@dialpad/dialtone-vue 2.166.1 → 2.166.3

package/dist/packages/dialtone-vue2/components/emoji_picker/modules/emoji_skin_selector.vue.cjs

@@ -1,179 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const tooltip = require("../../tooltip/tooltip.vue.cjs");
-const emoji_picker_constants = require("../emoji_picker_constants.cjs");
-const _pluginVue2_normalizer = require("../../../../../_virtual/_plugin-vue2_normalizer.cjs");
-const _sfc_main = {
-  name: "EmojiSkinSelector",
-  components: {
-    DtTooltip: tooltip.default
-  },
-  props: {
-    skinTone: {
-      type: String,
-      required: true
-    },
-    isHovering: {
-      type: Boolean,
-      default: false
-    },
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      isOpen: false,
-      skinSelected: null,
-      skinsRef: [],
-      cdnUrl: emoji_picker_constants.CDN_URL
-    };
-  },
-  computed: {
-    skinPassedIn() {
-      return this.skinList.find((skin) => skin.skinTone === this.skinTone);
-    },
-    skinList() {
-      return [
-        {
-          name: ":wave_tone1:",
-          unicode_output: "1f44b-1f3fb",
-          skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
-          skinCode: "_tone1"
-        },
-        {
-          name: ":wave_tone2:",
-          unicode_output: "1f44b-1f3fc",
-          skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
-          skinCode: "_tone2"
-        },
-        {
-          name: ":wave_tone3:",
-          unicode_output: "1f44b-1f3fd",
-          skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
-          skinCode: "_tone3"
-        },
-        {
-          name: ":wave_tone4:",
-          unicode_output: "1f44b-1f3fe",
-          skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
-          skinCode: "_tone4"
-        },
-        {
-          name: ":wave_tone5:",
-          unicode_output: "1f44b-1f3ff",
-          skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
-          skinCode: "_tone5"
-        },
-        {
-          name: ":wave:",
-          unicode_output: "1f44b",
-          skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
-          skinCode: ""
-        }
-      ];
-    }
-  },
-  watch: {
-    isHovering(newVal) {
-      if (newVal) {
-        this.isOpen = false;
-      }
-    },
-    skinTone(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.skinSelected = this.skinPassedIn;
-      }
-    }
-  },
-  mounted() {
-    this.skinSelected = this.skinPassedIn;
-    this.$nextTick(() => {
-      this.setupSkinRefs();
-    });
-  },
-  methods: {
-    setupSkinRefs() {
-      this.skinList.forEach((skin, index) => {
-        const refKey = `skinRef-${index}`;
-        if (this.$refs[refKey]) {
-          this.$set(this.skinsRef, index, this.$refs[refKey][0]);
-        }
-      });
-    },
-    focusSkinSelector() {
-      if (this.$refs.skinSelectorRef) {
-        this.$refs.skinSelectorRef.focus();
-      }
-    },
-    selectSkin(skin) {
-      this.skinSelected = skin;
-      this.isOpen = false;
-      this.$emit("skin-tone", skin.skinTone);
-      this.$nextTick(() => {
-        this.focusSkinSelector();
-      });
-    },
-    handleKeyDown(event, skin, index) {
-      var _a, _b, _c, _d;
-      event.preventDefault();
-      if (event.key === "ArrowLeft") {
-        if (index === 0) (_a = this.skinsRef[this.skinsRef.length - 1]) == null ? void 0 : _a.focus();
-        (_b = this.skinsRef[index - 1]) == null ? void 0 : _b.focus();
-      }
-      if (event.key === "ArrowRight") {
-        if (this.skinsRef.length) (_c = this.skinsRef[0]) == null ? void 0 : _c.focus();
-        (_d = this.skinsRef[index + 1]) == null ? void 0 : _d.focus();
-      }
-      if (event.key === "Enter") {
-        if (skin) {
-          this.selectSkin(skin);
-        } else {
-          this.toggleSkinList();
-        }
-      }
-      if (event.key === "Tab") {
-        if (event.shiftKey) {
-          this.$emit("focus-last-emoji");
-        } else {
-          this.$emit("focus-tabset");
-        }
-      }
-    },
-    toggleSkinList() {
-      this.isOpen = !this.isOpen;
-      this.$nextTick(() => {
-        if (this.skinsRef[0]) {
-          this.skinsRef[0].focus();
-        }
-      });
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { attrs: { "data-qa": "skin-selector" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, _vm._l(_vm.skinList, function(skin, index) {
-    var _a;
-    return _c("button", { key: skin.name, ref: `skinRef-${index}`, refInFor: true, class: {
-      "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
-    }, on: { "click": function($event) {
-      return _vm.selectSkin(skin);
-    }, "keydown": (event) => _vm.handleKeyDown(event, skin, index) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": skin.name, "aria-label": skin.name, "title": skin.name, "src": `${_vm.cdnUrl + skin.unicode_output}.png` } })]);
-  }), 0), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [_c("dt-tooltip", { attrs: { "placement": "top-end" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    var _a, _b, _c2, _d;
-    return [_c("button", { ref: "skinSelectorRef", attrs: { "aria-label": _vm.skinSelectorButtonTooltipLabel, "tabindex": "-1" }, on: { "click": _vm.toggleSkinList, "keydown": (event) => _vm.handleKeyDown(event) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name, "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name, "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name, "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png` } })])];
-  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const EmojiSkinSelector = __component__.exports;
-exports.default = EmojiSkinSelector;
-//# sourceMappingURL=emoji_skin_selector.vue.cjs.map

package/dist/packages/dialtone-vue2/components/emoji_picker/modules/emoji_skin_selector.vue.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"emoji_skin_selector.vue.cjs","sources":["../../../../../../components/emoji_picker/modules/emoji_skin_selector.vue"],"sourcesContent":["<template>\n  <div data-qa=\"skin-selector\">\n    <div\n      v-show=\"isOpen\"\n      class=\"d-emoji-picker__skin-list\"\n    >\n      <button\n        v-for=\"(skin, index) in skinList\"\n        :key=\"skin.name\"\n        :ref=\"`skinRef-${index}`\"\n        :class=\"{\n          'selected': skinSelected?.skinCode === skin.skinCode,\n        }\"\n        @click=\"selectSkin(skin)\"\n        @keydown=\"event => handleKeyDown(event, skin, index)\"\n      >\n        <img\n          class=\"d-icon d-icon--size-500\"\n          :alt=\"skin.name\"\n          :aria-label=\"skin.name\"\n          :title=\"skin.name\"\n          :src=\"`${cdnUrl + skin.unicode_output}.png`\"\n        >\n      </button>\n    </div>\n    <div\n      v-show=\"!isOpen\"\n      class=\"d-emoji-picker__skin-selected\"\n    >\n      <dt-tooltip placement=\"top-end\">\n        {{ skinSelectorButtonTooltipLabel }}\n        <template #anchor>\n          <button\n            ref=\"skinSelectorRef\"\n            :aria-label=\"skinSelectorButtonTooltipLabel\"\n            tabindex=\"-1\"\n            @click=\"toggleSkinList\"\n            @keydown=\"event => handleKeyDown(event)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"skinSelected?.name\"\n              :aria-label=\"skinSelected?.name\"\n              :title=\"skinSelected?.name\"\n              :src=\"`${cdnUrl + skinSelected?.unicode_output}.png`\"\n            >\n          </button>\n        </template>\n      </dt-tooltip>\n    </div>\n  </div>\n</template>\n\n<script>\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n  name: 'EmojiSkinSelector',\n\n  components: {\n    DtTooltip,\n  },\n\n  props: {\n    skinTone: {\n      type: String,\n      required: true,\n    },\n\n    isHovering: {\n      type: Boolean,\n      default: false,\n    },\n\n    skinSelectorButtonTooltipLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      isOpen: false,\n      skinSelected: null,\n      skinsRef: [],\n      cdnUrl: CDN_URL,\n    };\n  },\n\n  computed: {\n    skinPassedIn () {\n      return this.skinList.find(skin => skin.skinTone === this.skinTone);\n    },\n\n    skinList () {\n      return [\n        {\n          name: ':wave_tone1:',\n          unicode_output: '1f44b-1f3fb',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,\n          skinCode: '_tone1',\n        },\n        {\n          name: ':wave_tone2:',\n          unicode_output: '1f44b-1f3fc',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,\n          skinCode: '_tone2',\n        },\n        {\n          name: ':wave_tone3:',\n          unicode_output: '1f44b-1f3fd',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,\n          skinCode: '_tone3',\n        },\n        {\n          name: ':wave_tone4:',\n          unicode_output: '1f44b-1f3fe',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,\n          skinCode: '_tone4',\n        },\n        {\n          name: ':wave_tone5:',\n          unicode_output: '1f44b-1f3ff',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,\n          skinCode: '_tone5',\n        },\n        {\n          name: ':wave:',\n          unicode_output: '1f44b',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,\n          skinCode: '',\n        },\n      ];\n    },\n  },\n\n  watch: {\n    isHovering (newVal) {\n      if (newVal) {\n        this.isOpen = false;\n      }\n    },\n\n    skinTone (newVal, oldVal) {\n      if (newVal !== oldVal) {\n        this.skinSelected = this.skinPassedIn;\n      }\n    },\n  },\n\n  mounted () {\n    this.skinSelected = this.skinPassedIn;\n    this.$nextTick(() => {\n      this.setupSkinRefs();\n    });\n  },\n\n  methods: {\n    setupSkinRefs () {\n      this.skinList.forEach((skin, index) => {\n        const refKey = `skinRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.skinsRef, index, this.$refs[refKey][0]);\n        }\n      });\n    },\n\n    focusSkinSelector () {\n      if (this.$refs.skinSelectorRef) {\n        this.$refs.skinSelectorRef.focus();\n      }\n    },\n\n    selectSkin (skin) {\n      this.skinSelected = skin;\n      this.isOpen = false;\n      this.$emit('skin-tone', skin.skinTone);\n      this.$nextTick(() => {\n        this.focusSkinSelector();\n      });\n    },\n\n    handleKeyDown (event, skin, index) {\n      event.preventDefault();\n\n      if (event.key === 'ArrowLeft') {\n        if (index === 0) this.skinsRef[this.skinsRef.length - 1]?.focus();\n        this.skinsRef[index - 1]?.focus();\n      }\n\n      if (event.key === 'ArrowRight') {\n        if (this.skinsRef.length) this.skinsRef[0]?.focus();\n        this.skinsRef[index + 1]?.focus();\n      }\n\n      if (event.key === 'Enter') {\n        if (skin) { this.selectSkin(skin); } else {\n          this.toggleSkinList();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        if (event.shiftKey) {\n          this.$emit('focus-last-emoji');\n        } else {\n          this.$emit('focus-tabset');\n        }\n      }\n    },\n\n    toggleSkinList () {\n      this.isOpen = !this.isOpen;\n      this.$nextTick(() => {\n        if (this.skinsRef[0]) {\n          this.skinsRef[0].focus();\n        }\n      });\n    },\n  },\n};\n</script>\n"],"names":["DtTooltip","CDN_URL","EMOJI_PICKER_SKIN_TONE_MODIFIERS"],"mappings":"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"}

package/dist/packages/dialtone-vue2/components/emoji_picker/modules/emoji_skin_selector.vue.js

@@ -1,179 +0,0 @@
-import DtTooltip from "../../tooltip/tooltip.vue.js";
-import { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from "../emoji_picker_constants.js";
-import normalizeComponent from "../../../../../_virtual/_plugin-vue2_normalizer.js";
-const _sfc_main = {
-  name: "EmojiSkinSelector",
-  components: {
-    DtTooltip
-  },
-  props: {
-    skinTone: {
-      type: String,
-      required: true
-    },
-    isHovering: {
-      type: Boolean,
-      default: false
-    },
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      isOpen: false,
-      skinSelected: null,
-      skinsRef: [],
-      cdnUrl: CDN_URL
-    };
-  },
-  computed: {
-    skinPassedIn() {
-      return this.skinList.find((skin) => skin.skinTone === this.skinTone);
-    },
-    skinList() {
-      return [
-        {
-          name: ":wave_tone1:",
-          unicode_output: "1f44b-1f3fb",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
-          skinCode: "_tone1"
-        },
-        {
-          name: ":wave_tone2:",
-          unicode_output: "1f44b-1f3fc",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
-          skinCode: "_tone2"
-        },
-        {
-          name: ":wave_tone3:",
-          unicode_output: "1f44b-1f3fd",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
-          skinCode: "_tone3"
-        },
-        {
-          name: ":wave_tone4:",
-          unicode_output: "1f44b-1f3fe",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
-          skinCode: "_tone4"
-        },
-        {
-          name: ":wave_tone5:",
-          unicode_output: "1f44b-1f3ff",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
-          skinCode: "_tone5"
-        },
-        {
-          name: ":wave:",
-          unicode_output: "1f44b",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
-          skinCode: ""
-        }
-      ];
-    }
-  },
-  watch: {
-    isHovering(newVal) {
-      if (newVal) {
-        this.isOpen = false;
-      }
-    },
-    skinTone(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.skinSelected = this.skinPassedIn;
-      }
-    }
-  },
-  mounted() {
-    this.skinSelected = this.skinPassedIn;
-    this.$nextTick(() => {
-      this.setupSkinRefs();
-    });
-  },
-  methods: {
-    setupSkinRefs() {
-      this.skinList.forEach((skin, index) => {
-        const refKey = `skinRef-${index}`;
-        if (this.$refs[refKey]) {
-          this.$set(this.skinsRef, index, this.$refs[refKey][0]);
-        }
-      });
-    },
-    focusSkinSelector() {
-      if (this.$refs.skinSelectorRef) {
-        this.$refs.skinSelectorRef.focus();
-      }
-    },
-    selectSkin(skin) {
-      this.skinSelected = skin;
-      this.isOpen = false;
-      this.$emit("skin-tone", skin.skinTone);
-      this.$nextTick(() => {
-        this.focusSkinSelector();
-      });
-    },
-    handleKeyDown(event, skin, index) {
-      var _a, _b, _c, _d;
-      event.preventDefault();
-      if (event.key === "ArrowLeft") {
-        if (index === 0) (_a = this.skinsRef[this.skinsRef.length - 1]) == null ? void 0 : _a.focus();
-        (_b = this.skinsRef[index - 1]) == null ? void 0 : _b.focus();
-      }
-      if (event.key === "ArrowRight") {
-        if (this.skinsRef.length) (_c = this.skinsRef[0]) == null ? void 0 : _c.focus();
-        (_d = this.skinsRef[index + 1]) == null ? void 0 : _d.focus();
-      }
-      if (event.key === "Enter") {
-        if (skin) {
-          this.selectSkin(skin);
-        } else {
-          this.toggleSkinList();
-        }
-      }
-      if (event.key === "Tab") {
-        if (event.shiftKey) {
-          this.$emit("focus-last-emoji");
-        } else {
-          this.$emit("focus-tabset");
-        }
-      }
-    },
-    toggleSkinList() {
-      this.isOpen = !this.isOpen;
-      this.$nextTick(() => {
-        if (this.skinsRef[0]) {
-          this.skinsRef[0].focus();
-        }
-      });
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { attrs: { "data-qa": "skin-selector" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, _vm._l(_vm.skinList, function(skin, index) {
-    var _a;
-    return _c("button", { key: skin.name, ref: `skinRef-${index}`, refInFor: true, class: {
-      "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
-    }, on: { "click": function($event) {
-      return _vm.selectSkin(skin);
-    }, "keydown": (event) => _vm.handleKeyDown(event, skin, index) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": skin.name, "aria-label": skin.name, "title": skin.name, "src": `${_vm.cdnUrl + skin.unicode_output}.png` } })]);
-  }), 0), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [_c("dt-tooltip", { attrs: { "placement": "top-end" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    var _a, _b, _c2, _d;
-    return [_c("button", { ref: "skinSelectorRef", attrs: { "aria-label": _vm.skinSelectorButtonTooltipLabel, "tabindex": "-1" }, on: { "click": _vm.toggleSkinList, "keydown": (event) => _vm.handleKeyDown(event) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name, "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name, "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name, "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png` } })])];
-  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const EmojiSkinSelector = __component__.exports;
-export {
-  EmojiSkinSelector as default
-};
-//# sourceMappingURL=emoji_skin_selector.vue.js.map

package/dist/packages/dialtone-vue2/components/emoji_picker/modules/emoji_skin_selector.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"emoji_skin_selector.vue.js","sources":["../../../../../../components/emoji_picker/modules/emoji_skin_selector.vue"],"sourcesContent":["<template>\n  <div data-qa=\"skin-selector\">\n    <div\n      v-show=\"isOpen\"\n      class=\"d-emoji-picker__skin-list\"\n    >\n      <button\n        v-for=\"(skin, index) in skinList\"\n        :key=\"skin.name\"\n        :ref=\"`skinRef-${index}`\"\n        :class=\"{\n          'selected': skinSelected?.skinCode === skin.skinCode,\n        }\"\n        @click=\"selectSkin(skin)\"\n        @keydown=\"event => handleKeyDown(event, skin, index)\"\n      >\n        <img\n          class=\"d-icon d-icon--size-500\"\n          :alt=\"skin.name\"\n          :aria-label=\"skin.name\"\n          :title=\"skin.name\"\n          :src=\"`${cdnUrl + skin.unicode_output}.png`\"\n        >\n      </button>\n    </div>\n    <div\n      v-show=\"!isOpen\"\n      class=\"d-emoji-picker__skin-selected\"\n    >\n      <dt-tooltip placement=\"top-end\">\n        {{ skinSelectorButtonTooltipLabel }}\n        <template #anchor>\n          <button\n            ref=\"skinSelectorRef\"\n            :aria-label=\"skinSelectorButtonTooltipLabel\"\n            tabindex=\"-1\"\n            @click=\"toggleSkinList\"\n            @keydown=\"event => handleKeyDown(event)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"skinSelected?.name\"\n              :aria-label=\"skinSelected?.name\"\n              :title=\"skinSelected?.name\"\n              :src=\"`${cdnUrl + skinSelected?.unicode_output}.png`\"\n            >\n          </button>\n        </template>\n      </dt-tooltip>\n    </div>\n  </div>\n</template>\n\n<script>\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n  name: 'EmojiSkinSelector',\n\n  components: {\n    DtTooltip,\n  },\n\n  props: {\n    skinTone: {\n      type: String,\n      required: true,\n    },\n\n    isHovering: {\n      type: Boolean,\n      default: false,\n    },\n\n    skinSelectorButtonTooltipLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      isOpen: false,\n      skinSelected: null,\n      skinsRef: [],\n      cdnUrl: CDN_URL,\n    };\n  },\n\n  computed: {\n    skinPassedIn () {\n      return this.skinList.find(skin => skin.skinTone === this.skinTone);\n    },\n\n    skinList () {\n      return [\n        {\n          name: ':wave_tone1:',\n          unicode_output: '1f44b-1f3fb',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,\n          skinCode: '_tone1',\n        },\n        {\n          name: ':wave_tone2:',\n          unicode_output: '1f44b-1f3fc',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,\n          skinCode: '_tone2',\n        },\n        {\n          name: ':wave_tone3:',\n          unicode_output: '1f44b-1f3fd',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,\n          skinCode: '_tone3',\n        },\n        {\n          name: ':wave_tone4:',\n          unicode_output: '1f44b-1f3fe',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,\n          skinCode: '_tone4',\n        },\n        {\n          name: ':wave_tone5:',\n          unicode_output: '1f44b-1f3ff',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,\n          skinCode: '_tone5',\n        },\n        {\n          name: ':wave:',\n          unicode_output: '1f44b',\n          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,\n          skinCode: '',\n        },\n      ];\n    },\n  },\n\n  watch: {\n    isHovering (newVal) {\n      if (newVal) {\n        this.isOpen = false;\n      }\n    },\n\n    skinTone (newVal, oldVal) {\n      if (newVal !== oldVal) {\n        this.skinSelected = this.skinPassedIn;\n      }\n    },\n  },\n\n  mounted () {\n    this.skinSelected = this.skinPassedIn;\n    this.$nextTick(() => {\n      this.setupSkinRefs();\n    });\n  },\n\n  methods: {\n    setupSkinRefs () {\n      this.skinList.forEach((skin, index) => {\n        const refKey = `skinRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.skinsRef, index, this.$refs[refKey][0]);\n        }\n      });\n    },\n\n    focusSkinSelector () {\n      if (this.$refs.skinSelectorRef) {\n        this.$refs.skinSelectorRef.focus();\n      }\n    },\n\n    selectSkin (skin) {\n      this.skinSelected = skin;\n      this.isOpen = false;\n      this.$emit('skin-tone', skin.skinTone);\n      this.$nextTick(() => {\n        this.focusSkinSelector();\n      });\n    },\n\n    handleKeyDown (event, skin, index) {\n      event.preventDefault();\n\n      if (event.key === 'ArrowLeft') {\n        if (index === 0) this.skinsRef[this.skinsRef.length - 1]?.focus();\n        this.skinsRef[index - 1]?.focus();\n      }\n\n      if (event.key === 'ArrowRight') {\n        if (this.skinsRef.length) this.skinsRef[0]?.focus();\n        this.skinsRef[index + 1]?.focus();\n      }\n\n      if (event.key === 'Enter') {\n        if (skin) { this.selectSkin(skin); } else {\n          this.toggleSkinList();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        if (event.shiftKey) {\n          this.$emit('focus-last-emoji');\n        } else {\n          this.$emit('focus-tabset');\n        }\n      }\n    },\n\n    toggleSkinList () {\n      this.isOpen = !this.isOpen;\n      this.$nextTick(() => {\n        if (this.skinsRef[0]) {\n          this.skinsRef[0].focus();\n        }\n      });\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/packages/dialtone-vue2/components/emoji_picker/modules/emoji_tabset.vue.cjs

@@ -1,156 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const emoji_picker_constants = require("../emoji_picker_constants.cjs");
-const vue2 = require("@dialpad/dialtone-icons/vue2");
-const _pluginVue2_normalizer = require("../../../../../_virtual/_plugin-vue2_normalizer.cjs");
-const tab_group = require("../../tab/tab_group.vue.cjs");
-const tab = require("../../tab/tab.vue.cjs");
-const _sfc_main = {
-  name: "EmojiTabset",
-  components: {
-    DtTabGroup: tab_group.default,
-    DtTab: tab.default
-  },
-  props: {
-    /**
-     * Whether to show the recently used tab or not
-     * @type {Boolean}
-     * @default false
-     */
-    showRecentlyUsedTab: {
-      type: Boolean,
-      default: false
-    },
-    scrollIntoTab: {
-      type: Number,
-      required: true
-    },
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The labels for the aria-label
-     * @type {Array}
-     * @required
-     */
-    tabSetLabels: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      selectedTab: "1",
-      tabsetRef: [],
-      TABS_DATA: [
-        { 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 }
-      ]
-    };
-  },
-  computed: {
-    tabs() {
-      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);
-      return tabsData.map((tab2, index) => ({
-        ...tab2,
-        label: this.tabSetLabels[index],
-        // IDs on dt-tab component need to be on string
-        id: (index + 1).toString(),
-        panelId: (index + 1).toString()
-      }));
-    },
-    isSearching() {
-      return this.emojiFilter.length > 0;
-    }
-  },
-  watch: {
-    scrollIntoTab: function(newVal) {
-      if (!this.isSearching) {
-        this.selectedTab = (newVal + 1).toString();
-      }
-    },
-    isSearching: function(newVal) {
-      if (newVal) {
-        this.selectedTab = null;
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.setTabsetRef();
-    });
-  },
-  methods: {
-    selectTabset(id) {
-      const parseId = parseInt(id);
-      this.selectedTab = id;
-      this.$emit("selected-tabset", parseId);
-    },
-    setTabsetRef() {
-      this.tabs.forEach((skin, index) => {
-        const refKey = `tabsetRef-${index}`;
-        if (this.$refs[refKey]) {
-          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);
-        }
-      });
-    },
-    focusTabset() {
-      if (this.tabsetRef[0]) {
-        this.tabsetRef[0].focus();
-      }
-    },
-    // eslint-disable-next-line complexity
-    handleKeyDown(event, tabId) {
-      if (event.key === "Enter") {
-        this.selectTabset(tabId);
-        if (this.tabsetRef[tabId - 1]) {
-          this.tabsetRef[tabId - 1].blur();
-        }
-      }
-      if (event.key === "Tab") {
-        event.preventDefault();
-        if (event.shiftKey) {
-          this.$emit("focus-skin-selector");
-        } else {
-          this.$emit("focus-search-input");
-        }
-      }
-      if (event.key === "ArrowDown") {
-        this.$emit("focus-search-input");
-      }
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "size": "sm", "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
-    return _vm._l(_vm.tabs, function(tab2, index) {
-      return _c("dt-tab", { key: tab2.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab2.id, "panel-id": tab2.panelId, "label": tab2.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
-        $event.stopPropagation();
-        return _vm.selectTabset(tab2.id);
-      }, "keydown": function($event) {
-        return _vm.handleKeyDown($event, tab2.id);
-      } } }, [_c(tab2.icon, { tag: "component", attrs: { "size": "400" } })], 1);
-    });
-  }, proxy: true }]) })], 1);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const EmojiTabset = __component__.exports;
-exports.default = EmojiTabset;
-//# sourceMappingURL=emoji_tabset.vue.cjs.map

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

@@ -1 +0,0 @@
-{"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/tab';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker/emoji_picker_constants';\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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"}