{"version":3,"file":"EmojiInput-BdmZrjIs.js","sources":["../../../app/javascript/shared/components/emoji/EmojiInput.vue"],"sourcesContent":["<script>\nimport emojis from './emojisGroup.json';\nimport FluentIcon from 'shared/components/FluentIcon/Index.vue';\nimport WootButton from 'dashboard/components/ui/WootButton.vue';\nconst SEARCH_KEY = 'Search';\n\nexport default {\n  components: { FluentIcon, WootButton },\n  props: {\n    onClick: {\n      type: Function,\n      default: () => {},\n    },\n    showRemoveButton: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  data() {\n    return {\n      selectedKey: 'Search',\n      emojis,\n      search: '',\n    };\n  },\n  computed: {\n    categories() {\n      return [...this.emojis];\n    },\n    filterEmojisByCategory() {\n      const selectedCategoryName = this.emojis.find(category =>\n        category.name === this.selectedKey ? category.name : null\n      );\n      return selectedCategoryName?.emojis;\n    },\n    filterAllEmojisBySearch() {\n      return this.emojis.map(category => {\n        const allEmojis = category.emojis.filter(emoji =>\n          emoji.slug.replaceAll('_', ' ').includes(this.search.toLowerCase())\n        );\n        return allEmojis.length > 0\n          ? { ...category, emojis: allEmojis }\n          : { ...category, emojis: [] };\n      });\n    },\n    hasNoSearch() {\n      return this.selectedKey !== SEARCH_KEY && this.search === '';\n    },\n    hasEmptySearchResult() {\n      return this.filterAllEmojisBySearch.every(\n        category => category.emojis.length === 0\n      );\n    },\n  },\n  watch: {\n    search() {\n      this.selectedKey = 'Search';\n    },\n    selectedKey() {\n      return this.selectedKey === 'Search' ? this.focusSearchInput() : null;\n    },\n  },\n  mounted() {\n    this.focusSearchInput();\n  },\n  methods: {\n    changeCategory(category) {\n      this.search = '';\n      this.$refs.emojiItem.scrollTo({ top: 0 });\n      this.selectedKey = category;\n    },\n    getFirstEmojiByCategoryName(categoryName) {\n      const categoryItem = this.emojis.find(category =>\n        category.name === categoryName ? category : null\n      );\n      return categoryItem ? categoryItem.emojis[0].emoji : '';\n    },\n    focusSearchInput() {\n      this.$nextTick(() => {\n        this.$refs.searchbar.focus();\n      });\n    },\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"dialog\"\n    class=\"emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[18.75rem] absolute right-0 -top-[95px] w-80 z-20\"\n  >\n    <div class=\"flex flex-col\">\n      <div class=\"flex gap-2 emoji-search--wrap\">\n        <input\n          ref=\"searchbar\"\n          v-model=\"search\"\n          type=\"text\"\n          class=\"emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm\"\n          :placeholder=\"$t('EMOJI.PLACEHOLDER')\"\n        />\n        <WootButton\n          v-if=\"showRemoveButton\"\n          size=\"small\"\n          variant=\"smooth\"\n          class=\"dark:!bg-slate-800 dark:!hover:bg-slate-700\"\n          color-scheme=\"secondary\"\n          @click=\"onClick('')\"\n        >\n          {{ $t('EMOJI.REMOVE') }}\n        </WootButton>\n      </div>\n      <div v-if=\"hasNoSearch\" ref=\"emojiItem\" class=\"emoji-item\">\n        <h5 class=\"emoji-category--title\">\n          {{ selectedKey }}\n        </h5>\n        <div class=\"emoji--row\">\n          <button\n            v-for=\"item in filterEmojisByCategory\"\n            :key=\"item.slug\"\n            v-dompurify-html=\"item.emoji\"\n            class=\"emoji--item\"\n            track-by=\"$index\"\n            @click=\"onClick(item.emoji)\"\n          />\n        </div>\n      </div>\n      <div v-else ref=\"emojiItem\" class=\"emoji-item\">\n        <div v-for=\"category in filterAllEmojisBySearch\" :key=\"category.slug\">\n          <h5 v-if=\"category.emojis.length > 0\" class=\"emoji-category--title\">\n            {{ category.name }}\n          </h5>\n          <div v-if=\"category.emojis.length > 0\" class=\"emoji--row\">\n            <button\n              v-for=\"item in category.emojis\"\n              :key=\"item.slug\"\n              v-dompurify-html=\"item.emoji\"\n              class=\"emoji--item\"\n              track-by=\"$index\"\n              @click=\"onClick(item.emoji)\"\n            />\n          </div>\n        </div>\n        <div v-if=\"hasEmptySearchResult\" class=\"empty-message\">\n          <div class=\"emoji-icon\">\n            <FluentIcon icon=\"emoji\" size=\"48\" />\n          </div>\n          <span class=\"empty-message--text\">\n            {{ $t('EMOJI.NOT_FOUND') }}\n          </span>\n        </div>\n      </div>\n\n      <div class=\"emoji-dialog--footer\" role=\"menu\">\n        <ul>\n          <li>\n            <button\n              class=\"emoji--item\"\n              :class=\"{ active: selectedKey === 'Search' }\"\n              @click=\"changeCategory('Search')\"\n            >\n              <FluentIcon\n                icon=\"search\"\n                size=\"16\"\n                class=\"text-slate-700 dark:text-slate-100\"\n              />\n            </button>\n          </li>\n          <li\n            v-for=\"category in categories\"\n            :key=\"category.slug\"\n            @click=\"changeCategory(category.name)\"\n          >\n            <button\n              v-dompurify-html=\"getFirstEmojiByCategoryName(category.name)\"\n              class=\"emoji--item\"\n              :class=\"{ active: selectedKey === category.name }\"\n              @click=\"changeCategory(category.name)\"\n            />\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@tailwind components;\n\n@layer components {\n  .box-shadow-blue {\n    box-shadow:\n      0 0 0 1px #1f93ff,\n      0 0 1px 2px #c7e3ff;\n  }\n\n  .box-shadow-dark {\n    box-shadow:\n      0 0 0 1px #212222,\n      0 0 1px 2px #4c5155;\n  }\n}\n</style>\n\n<style lang=\"scss\">\n@import 'dashboard/assets/scss/mixins';\n\n.emoji-dialog {\n  &::before {\n    $space-slab: 12px;\n\n    @media (prefers-color-scheme: dark) {\n      $color-bg-dark: #26292b;\n      @include arrow(bottom, $color-bg-dark, $space-slab);\n    }\n\n    @media (prefers-color-scheme: light) {\n      $color-bg: #ebf0f5;\n      @include arrow(bottom, $color-bg, $space-slab);\n    }\n\n    @apply -bottom-3 absolute right-5;\n  }\n}\n\n.emoji--item {\n  @apply bg-transparent border-0 rounded cursor-pointer text-lg h-6 m-0 py-0 px-1 hover:bg-slate-75 dark:hover:bg-slate-800;\n}\n\n.emoji--row {\n  @apply box-border p-1;\n\n  .emoji--item {\n    @apply h-[1.625rem] w-[1.625rem] leading-normal m-1;\n  }\n}\n\n.emoji-search--wrap {\n  @apply m-2 sticky top-2;\n\n  .emoji-search--input {\n    @apply text-sm focus-visible:border-transparent text-slate-800 dark:text-slate-100 h-8 m-0 p-2 w-full rounded-md bg-slate-50 dark:bg-slate-800 border border-solid border-transparent dark:border-slate-800/50;\n  }\n}\n\n.empty-message {\n  @apply items-center flex flex-col h-[13.25rem] justify-center;\n\n  .emoji-icon {\n    @apply text-slate-200 dark:text-slate-200 mb-2;\n  }\n\n  .empty-message--text {\n    @apply text-slate-200 dark:text-slate-200 text-sm font-medium;\n  }\n}\n\n.emoji-item {\n  @apply h-[13.25rem] overflow-y-auto;\n}\n\n.emoji-category--title {\n  @apply text-slate-800 text-sm dark:text-slate-100 font-medium leading-normal m-0 py-1 px-2 capitalize;\n}\n\n.emoji-dialog--footer {\n  @apply relative w-full py-0 rounded-b-[0.34rem] px-1 bg-slate-75 dark:bg-slate-800;\n\n  ul {\n    @apply flex relative left-[2px] rtl:left-[unset] rtl:right-[2px] list-none m-0 overflow-auto py-1 px-0;\n\n    > li {\n      @apply items-center cursor-pointer flex justify-center p-1;\n    }\n\n    li .active {\n      @apply bg-white dark:bg-slate-900;\n    }\n\n    .emoji--item {\n      @apply items-center flex text-sm;\n\n      &:hover {\n        @apply bg-slate-75 dark:bg-slate-900;\n      }\n    }\n  }\n}\n</style>\n"],"names":["SEARCH_KEY","_sfc_main","FluentIcon","WootButton","emojis","selectedCategoryName","category","allEmojis","emoji","categoryName","categoryItem","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_12","_hoisted_14","_hoisted_15","_hoisted_17","_hoisted_18","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_cache","$event","$data","_ctx","$props","_createBlock","_component_WootButton","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","$options","_hoisted_5","_Fragment","_renderList","item","_directive_dompurify_html","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_13","_createVNode","_component_FluentIcon","_hoisted_16","_normalizeClass"],"mappings":"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"}