@dialpad/dialtone-vue 3.176.2 → 3.177.0

package/dist/components/emoji_picker/modules/emoji_selector.vue.js

@@ -1,409 +0,0 @@
-import { ref, computed, watch, nextTick, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, withDirectives, createCommentVNode, unref, vShow, normalizeClass } from "vue";
-import { emojisGrouped } from "@dialpad/dialtone-emojis";
-import { CDN_URL, ARROW_KEYS } from "../emoji_picker_constants.js";
-import { useKeyboardNavigation } from "../composables/useKeyboardNavigation.js";
-const _hoisted_1 = { class: "d-emoji-picker__selector" };
-const _hoisted_2 = {
-  key: 0,
-  class: "d-emoji-picker__search-label d-emoji-picker__alignment"
-};
-const _hoisted_3 = { key: 0 };
-const _hoisted_4 = { class: "d-emoji-picker__tab" };
-const _hoisted_5 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
-const _hoisted_6 = ["alt", "aria-label", "title", "src"];
-const _hoisted_7 = {
-  key: 2,
-  class: "d-emoji-picker__alignment"
-};
-const _hoisted_8 = {
-  class: "d-emoji-picker__tab",
-  "data-qa": "filtered-emojis"
-};
-const _hoisted_9 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
-const _hoisted_10 = ["alt", "aria-label", "title", "src"];
-const _sfc_main = {
-  __name: "emoji_selector",
-  props: {
-    /**
-     * The filter to apply to the emoji list
-     * @type {String}
-     * @default ''
-     */
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The skin tone to apply to the emoji list
-     * @type {String}
-     * @required
-     */
-    skinTone: {
-      type: String,
-      required: true
-    },
-    /**
-     * The labels for the tabset
-     * @type {Array}
-     * @required
-     */
-    tabsetLabels: {
-      type: Array,
-      required: true
-    },
-    selectedTabset: {
-      type: Object,
-      required: true
-    },
-    /**
-     * The label for the search results tab
-     * @type {String}
-     * @required
-     */
-    searchResultsLabel: {
-      type: String,
-      required: true
-    },
-    searchNoResultsLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * The list of recently used emojis
-     * @type {Array}
-     */
-    recentlyUsedEmojis: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: [
-    /**
-     * Emitted when the user hover over an emoji
-     * @event highlighted-emoji
-     * @param {Object} emoji - The emoji data that was hovered
-      */
-    "highlighted-emoji",
-    /**
-     * Emitted when the user select an emoji
-     * @event selected-emoji
-     * @param {Object} emoji - The emoji data that was selected
-      */
-    "selected-emoji",
-    /**
-     * Emitted when the user scroll into an emoji tab
-     * @event scroll-into-tab
-     * @param {Number} tab-index - The tab that was scrolled into
-      */
-    "scroll-into-tab",
-    /**
-     * Emitted when the user reach the end of the emoji list
-     * @event focus-skin-selector
-      */
-    "focus-skin-selector",
-    /**
-     * Emitted when the user shift tab in first tab of emoji selector
-     * @event focus-search-input
-      */
-    "focus-search-input"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const {
-      emojiFilteredRefs,
-      isFiltering,
-      hoverFirstEmoji,
-      setEmojiRef,
-      setFilteredRef,
-      focusEmoji,
-      handleArrowNavigationFiltered,
-      handleArrowNavigation
-    } = useKeyboardNavigation();
-    const tabCategoryRef = ref(null);
-    const listRef = ref(null);
-    const tabLabelObserver = ref(null);
-    const TABS_DATA = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"];
-    const tabLabels = computed(() => {
-      return props.recentlyUsedEmojis.length ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) })) : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));
-    });
-    const fixedLabel = ref(tabLabels.value[0].label);
-    const tabs = computed(() => {
-      return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);
-    });
-    const filteredEmojis = ref([]);
-    const currentEmojis = computed(() => {
-      return [
-        ...emojisGrouped[`People${props.skinTone}`],
-        ...emojisGrouped.Nature,
-        ...emojisGrouped.Food,
-        ...emojisGrouped[`Activity${props.skinTone}`],
-        ...emojisGrouped.Travel,
-        ...emojisGrouped[`Objects${props.skinTone}`],
-        ...emojisGrouped.Symbols,
-        ...emojisGrouped.Flags
-      ];
-    });
-    const debouncedSearch = debounce(() => {
-      emojiFilteredRefs.value = [];
-      searchByNameAndKeywords();
-    });
-    watch(currentEmojis, () => {
-      searchByNameAndKeywords();
-    }, { immediate: true });
-    watch(
-      () => props.recentlyUsedEmojis,
-      () => {
-        emojisGrouped["Recently used"] = props.recentlyUsedEmojis;
-      },
-      { immediate: true }
-    );
-    watch(() => props.emojiFilter, () => {
-      resetScroll();
-      if (props.emojiFilter) {
-        isFiltering.value = true;
-      } else {
-        isFiltering.value = false;
-        highlightEmoji(null);
-      }
-      debouncedSearch();
-    });
-    watch(
-      () => props.selectedTabset,
-      (tab) => {
-        scrollToTab(tab.tabId);
-      },
-      { deep: true }
-    );
-    function hoverEmoji(emoji, isFirst = false) {
-      hoverFirstEmoji.value = isFirst;
-      emits("highlighted-emoji", emoji);
-    }
-    function searchByNameAndKeywords() {
-      const searchStr = props.emojiFilter.toLowerCase();
-      filteredEmojis.value = currentEmojis.value.filter((obj) => {
-        const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);
-        const keywordsIncludeSearchStr = obj.keywords.some((keyword) => keyword.toLowerCase().includes(searchStr));
-        return nameIncludesSearchStr || keywordsIncludeSearchStr;
-      });
-      nextTick(() => {
-        if (searchStr) {
-          hoverEmoji(filteredEmojis.value[0], true);
-        }
-      });
-    }
-    function debounce(fn, delay = 300) {
-      let timeout;
-      return (...args) => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => fn(...args), delay);
-      };
-    }
-    function getImgSrc(emoji) {
-      return `${CDN_URL + emoji}.png`;
-    }
-    function handleImageError(event) {
-      event.target.parentNode.style.display = "none";
-    }
-    function scrollToTab(tabIndex, focusFirstEmoji = true) {
-      const tabLabel = tabLabels.value[tabIndex - 1];
-      const tabElement = tabLabel.ref.value[0];
-      nextTick(() => {
-        const container = listRef.value;
-        const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;
-        container.scrollTop = offsetTop;
-        if (focusFirstEmoji) {
-          focusEmoji(tabIndex - 1, 0);
-        }
-      });
-    }
-    function resetScroll() {
-      const container = listRef.value;
-      container.scrollTop = 0;
-    }
-    function setTabLabelObserver() {
-      tabLabelObserver.value = new IntersectionObserver(async (entries) => {
-        entries.forEach((entry) => {
-          var _a, _b, _c, _d, _e;
-          const { target } = entry;
-          const index = parseInt(target.dataset.index);
-          if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {
-            fixedLabel.value = ((_a = tabLabels.value[index - 1]) == null ? void 0 : _a.label) ?? ((_b = tabLabels.value[0]) == null ? void 0 : _b.label);
-            emits("scroll-into-tab", index - 1);
-          } else if (entry.boundingClientRect.bottom <= ((_c = tabCategoryRef.value) == null ? void 0 : _c.getBoundingClientRect().bottom)) {
-            emits("scroll-into-tab", index);
-            fixedLabel.value = (_d = tabLabels.value[index]) == null ? void 0 : _d.label;
-          } else if (index === 1) {
-            emits("scroll-into-tab", index);
-            fixedLabel.value = (_e = tabLabels.value[0]) == null ? void 0 : _e.label;
-          }
-        });
-      });
-      tabLabelObserver.value.observe(tabCategoryRef.value);
-      Array.from(listRef.value.children).forEach((child, index) => {
-        tabLabelObserver.value.observe(child);
-        child.dataset.index = index;
-      });
-    }
-    const handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {
-      event.preventDefault();
-      if (Object.values(ARROW_KEYS).includes(event.key)) {
-        handleArrowNavigationFiltered(event.key, indexEmoji);
-        return;
-      }
-      switch (event.key) {
-        case "Tab":
-          emits("focus-skin-selector");
-          break;
-        case "Enter":
-          selectEmoji(emoji, event);
-          break;
-      }
-    };
-    const handleKeyDown = (event, indexTab, indexEmoji, emoji) => {
-      event.preventDefault();
-      if (Object.values(ARROW_KEYS).includes(event.key)) {
-        handleArrowNavigation(event.key, indexTab, indexEmoji);
-        return;
-      }
-      switch (event.key) {
-        case "Tab":
-          if (event.shiftKey) {
-            if (focusEmoji(indexTab, 0) && indexTab > 0) {
-              scrollToTab(indexTab, true);
-            } else {
-              scrollToTab(1, false);
-              emits("focus-search-input");
-            }
-          } else {
-            if (focusEmoji(indexTab + 1, 0)) {
-              scrollToTab(indexTab + 1 + 1, false);
-            } else {
-              emits("focus-skin-selector");
-            }
-          }
-          break;
-        case "Enter":
-          selectEmoji(emoji, event);
-          break;
-      }
-    };
-    function selectEmoji(emoji, event) {
-      emits("selected-emoji", { ...emoji, shift_key: event.shiftKey });
-    }
-    function highlightEmoji(emoji) {
-      emits("highlighted-emoji", emoji);
-    }
-    function focusEmojiSelector() {
-      focusEmoji(0, 0);
-    }
-    function focusLastEmoji() {
-      scrollToTab(tabs.value.length, true);
-    }
-    onMounted(() => {
-      setTabLabelObserver();
-    });
-    onUnmounted(() => {
-      tabLabelObserver.value.disconnect();
-    });
-    __expose({
-      focusEmojiSelector,
-      focusLastEmoji
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", {
-          id: "d-emoji-picker-list",
-          ref_key: "listRef",
-          ref: listRef,
-          class: "d-emoji-picker__list"
-        }, [
-          __props.emojiFilter ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(filteredEmojis.value.length > 0 ? __props.searchResultsLabel : __props.searchNoResultsLabel), 1)) : (openBlock(), createElementBlock("div", {
-            key: 1,
-            ref_key: "tabCategoryRef",
-            ref: tabCategoryRef,
-            class: "d-emoji-picker__category d-emoji-picker__alignment"
-          }, [
-            createElementVNode("p", null, toDisplayString(fixedLabel.value), 1)
-          ], 512)),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(tabLabels.value, (tabLabel, indexTab) => {
-            return withDirectives((openBlock(), createElementBlock("div", {
-              key: indexTab,
-              ref_for: true,
-              ref: tabLabel.ref,
-              class: "d-emoji-picker__alignment"
-            }, [
-              indexTab ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(tabLabel.label), 1)) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_4, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(emojisGrouped)[tabs.value[indexTab] + __props.skinTone] ? unref(emojisGrouped)[tabs.value[indexTab] + __props.skinTone] : unref(emojisGrouped)[tabs.value[indexTab]], (emoji, indexEmoji) => {
-                  return openBlock(), createElementBlock("button", {
-                    key: emoji.shortname,
-                    ref_for: true,
-                    ref: (el) => {
-                      if (el) unref(setEmojiRef)(el, indexTab, indexEmoji);
-                    },
-                    type: "button",
-                    "aria-label": emoji.name,
-                    onClick: (event) => selectEmoji(emoji, event),
-                    onFocusin: ($event) => highlightEmoji(emoji),
-                    onFocusout: _cache[0] || (_cache[0] = ($event) => highlightEmoji(null)),
-                    onMouseover: ($event) => highlightEmoji(emoji),
-                    onMouseleave: _cache[1] || (_cache[1] = ($event) => highlightEmoji(null)),
-                    onKeydown: (event) => handleKeyDown(event, indexTab, indexEmoji, emoji)
-                  }, [
-                    createElementVNode("img", {
-                      class: "d-icon d-icon--size-500",
-                      alt: emoji.name,
-                      "aria-label": emoji.name,
-                      title: emoji.name,
-                      src: getImgSrc(emoji.unicode_character),
-                      onError: handleImageError
-                    }, null, 40, _hoisted_6)
-                  ], 40, _hoisted_5);
-                }), 128))
-              ])
-            ])), [
-              [vShow, !__props.emojiFilter]
-            ]);
-          }), 128)),
-          __props.emojiFilter ? (openBlock(), createElementBlock("div", _hoisted_7, [
-            createElementVNode("div", _hoisted_8, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(filteredEmojis.value, (emoji, index) => {
-                return openBlock(), createElementBlock("button", {
-                  key: emoji.shortname,
-                  ref_for: true,
-                  ref: (el) => {
-                    if (el) unref(setFilteredRef)(el, index);
-                  },
-                  type: "button",
-                  "aria-label": emoji.name,
-                  class: normalizeClass({
-                    "hover-emoji": index === 0 && unref(hoverFirstEmoji)
-                  }),
-                  onClick: (event) => selectEmoji(emoji, event),
-                  onFocusin: ($event) => highlightEmoji(emoji),
-                  onFocusout: _cache[2] || (_cache[2] = ($event) => highlightEmoji(null)),
-                  onMouseover: ($event) => hoverEmoji(emoji),
-                  onMouseleave: _cache[3] || (_cache[3] = ($event) => hoverEmoji(null)),
-                  onKeydown: (event) => handleKeyDownFilteredEmojis(event, index, emoji)
-                }, [
-                  createElementVNode("img", {
-                    class: "d-icon d-icon--size-500",
-                    alt: emoji.name,
-                    "aria-label": emoji.name,
-                    title: emoji.name,
-                    src: `${unref(CDN_URL) + emoji.unicode_character}.png`
-                  }, null, 8, _hoisted_10)
-                ], 42, _hoisted_9);
-              }), 128))
-            ])
-          ])) : createCommentVNode("", true)
-        ], 512)
-      ]);
-    };
-  }
-};
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=emoji_selector.vue.js.map

package/dist/components/emoji_picker/modules/emoji_selector.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"emoji_selector.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_selector.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-emoji-picker__selector\"\n  >\n    <div\n      id=\"d-emoji-picker-list\"\n      ref=\"listRef\"\n      class=\"d-emoji-picker__list\"\n    >\n      <p\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n      >\n        {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n      </p>\n      <div\n        v-else\n        ref=\"tabCategoryRef\"\n        class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n      >\n        <p>\n          {{ fixedLabel }}\n        </p>\n      </div>\n      <div\n        v-for=\"(tabLabel, indexTab) in tabLabels\"\n        v-show=\"!emojiFilter\"\n        :key=\"indexTab\"\n        :ref=\"tabLabel.ref\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <p\n          v-if=\"indexTab\"\n        >\n          {{ tabLabel.label }}\n        </p>\n        <div\n          class=\"d-emoji-picker__tab\"\n        >\n          <button\n            v-for=\"(emoji, indexEmoji) in\n            (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"highlightEmoji(emoji)\"\n            @mouseleave=\"highlightEmoji(null)\"\n            @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"getImgSrc(emoji.unicode_character)\"\n              @error=\"handleImageError\"\n            >\n          </button>\n        </div>\n      </div>\n      <div\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <div\n          class=\"d-emoji-picker__tab \"\n          data-qa=\"filtered-emojis\"\n        >\n          <button\n            v-for=\"(emoji, index) in filteredEmojis\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            :class=\"{\n              'hover-emoji': (index === 0 && hoverFirstEmoji),\n            }\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"hoverEmoji(emoji)\"\n            @mouseleave=\"hoverEmoji(null)\"\n            @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n            >\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n/* eslint-disable max-len */\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n  /**\n   * The filter to apply to the emoji list\n   * @type {String}\n   * @default ''\n   */\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The labels for the tabset\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  selectedTabset: {\n    type: Object,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of recently used emojis\n   * @type {Array}\n   */\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when the user hover over an emoji\n   * @event highlighted-emoji\n   * @param {Object} emoji - The emoji data that was hovered\n    */\n  'highlighted-emoji',\n\n  /**\n   * Emitted when the user select an emoji\n   * @event selected-emoji\n   * @param {Object} emoji - The emoji data that was selected\n    */\n  'selected-emoji',\n\n  /**\n   * Emitted when the user scroll into an emoji tab\n   * @event scroll-into-tab\n   * @param {Number} tab-index - The tab that was scrolled into\n    */\n  'scroll-into-tab',\n\n  /**\n   * Emitted when the user reach the end of the emoji list\n   * @event focus-skin-selector\n    */\n  'focus-skin-selector',\n\n  /**\n   * Emitted when the user shift tab in first tab of emoji selector\n   * @event focus-search-input\n    */\n  'focus-search-input',\n]);\n\nconst {\n  emojiFilteredRefs,\n  isFiltering,\n  hoverFirstEmoji,\n  setEmojiRef,\n  setFilteredRef,\n  focusEmoji,\n  handleArrowNavigationFiltered,\n  handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/**\n * The ref for the tab category\n * This is used to display the fixed label\n */\nconst tabCategoryRef = ref(null);\n\n/**\n * The ref for the list\n * This is used to display the tabs\n */\nconst listRef = ref(null);\n\n/**\n * The ref for the tab label observer\n * This is used to update the fixed label\n */\nconst tabLabelObserver = ref(null);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n */\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags'];\n\n/**\n * The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n */\nconst tabLabels = computed(() => {\n  return props.recentlyUsedEmojis.length\n    ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) }))\n    : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n});\n\n/**\n * The label of the fixed tab\n * This is used to display the fixed label\n */\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n */\nconst tabs = computed(() => {\n  return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);\n});\n\n/**\n * The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n */\nconst filteredEmojis = ref([]);\n\n/**\n * The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n */\nconst currentEmojis = computed(() => {\n  return [\n    ...emojis[`People${props.skinTone}`],\n    ...emojis.Nature,\n    ...emojis.Food,\n    ...emojis[`Activity${props.skinTone}`],\n    ...emojis.Travel,\n    ...emojis[`Objects${props.skinTone}`],\n    ...emojis.Symbols,\n    ...emojis.Flags,\n  ];\n});\n\n/**\n * This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n */\nconst debouncedSearch = debounce(() => {\n  // We clean the emojiFilteredRefs to have an updated ref list for the search results\n  emojiFilteredRefs.value = [];\n  searchByNameAndKeywords();\n});\n\n/**\n * Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n */\nwatch(currentEmojis, () => {\n  searchByNameAndKeywords();\n}, { immediate: true });\n\n/**\n * Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n */\nwatch(() => props.recentlyUsedEmojis,\n  () => {\n    emojis['Recently used'] = props.recentlyUsedEmojis;\n  }, { immediate: true });\n\n/**\n * Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n */\nwatch(() => props.emojiFilter, () => {\n  resetScroll();\n  if (props.emojiFilter) {\n    isFiltering.value = true;\n  } else {\n    isFiltering.value = false;\n    // If the emoji filter is empty, emit null to remove the highlighted emoji\n    // of the previous search\n    highlightEmoji(null);\n  }\n  debouncedSearch();\n});\n\nwatch(\n  () => props.selectedTabset,\n  (tab) => {\n    scrollToTab(tab.tabId);\n  },\n  { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n  hoverFirstEmoji.value = isFirst;\n  emits('highlighted-emoji', emoji);\n}\n\n/**\n * Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n */\nfunction searchByNameAndKeywords () {\n  const searchStr = props.emojiFilter.toLowerCase();\n  filteredEmojis.value = currentEmojis.value.filter(obj => {\n    const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n    const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n    return nameIncludesSearchStr || keywordsIncludeSearchStr;\n  });\n  nextTick(() => {\n    if (searchStr) {\n      hoverEmoji(filteredEmojis.value[0], true);\n    }\n  });\n}\n\nfunction debounce (fn, delay = 300) {\n  let timeout;\n\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\nfunction getImgSrc (emoji) {\n  return `${CDN_URL + emoji}.png`;\n}\n\n/**\n * Handle image error - We hide the entire button if the image is not found\n */\nfunction handleImageError (event) {\n  event.target.parentNode.style.display = 'none';\n}\n\n/**\n * Scroll to the selected tab\n */\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n  const tabLabel = tabLabels.value[tabIndex - 1];\n  const tabElement = tabLabel.ref.value[0];\n\n  nextTick(() => {\n    const container = listRef.value;\n    const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n    container.scrollTop = offsetTop;\n\n    if (focusFirstEmoji) {\n      focusEmoji((tabIndex - 1), 0);\n    }\n  });\n}\n\nfunction resetScroll () {\n  const container = listRef.value;\n\n  container.scrollTop = 0;\n}\n\n/**\n * This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n */\nfunction setTabLabelObserver () {\n  /**\n   * The code extracts the target element and its index from the IntersectionObserverEntry object,\n   * and checks whether the target intersects with the root and is positioned above or below it.\n   */\n  tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n    // eslint-disable-next-line complexity\n    entries.forEach(entry => {\n      const { target } = entry;\n      const index = parseInt(target.dataset.index);\n\n      /**\n       * If the target is positioned above the root,\n       * the code updates the value of the fixed label to the label of the previous tab,\n       * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n       * updates the value of the fixed label to the label of the current tab.\n       * If the target stops intersecting with the root and its index is 1 (the second tab),\n       * the code updates the value of the fixed label to the label of the first tab.\n       * NOTES:\n       * This last condition is needed because sometimes it is\n       * not detect the intersection between the root and the target.\n       * We also provide a 50 pixels offset to the root element in the first condition to always get the\n       * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n       */\n      if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n        fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n        emits('scroll-into-tab', index - 1);\n      } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[index]?.label;\n      } else if (index === 1) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[0]?.label;\n      }\n    });\n  });\n\n  /**\n   * The tabLabelObserver is set to observe the root element and all its children elements with\n   * the IntersectionObserver object, and sets their data-index attribute to their index.\n   */\n  tabLabelObserver.value.observe(tabCategoryRef.value);\n\n  Array.from(listRef.value.children).forEach((child, index) => {\n    tabLabelObserver.value.observe(child);\n    child.dataset.index = index;\n  });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigationFiltered(event.key, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      emits('focus-skin-selector');\n      break;\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n    default:\n      break;\n  }\n};\n\n/* eslint-disable-next-line complexity */\nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigation(event.key, indexTab, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      if (event.shiftKey) {\n        if (focusEmoji(indexTab, 0) && indexTab > 0) {\n          scrollToTab(indexTab, true);\n        } else {\n          scrollToTab(1, false);\n          emits('focus-search-input');\n        }\n      } else {\n        if (focusEmoji(indexTab + 1, 0)) {\n          scrollToTab(indexTab + 1 + 1, false);\n        } else {\n          // We are on the last emoji tabset, jump to the skin selector\n          emits('focus-skin-selector');\n        }\n      }\n      break;\n\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n\n    default:\n      break;\n  }\n};\n\nfunction selectEmoji (emoji, event) {\n  emits('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n}\n\nfunction highlightEmoji (emoji) {\n  emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n  focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n  scrollToTab(tabs.value.length, true);\n}\n\nonMounted(() => {\n  setTabLabelObserver();\n});\n\nonUnmounted(() => {\n  tabLabelObserver.value.disconnect();\n});\n\ndefineExpose({\n  focusEmojiSelector,\n  focusLastEmoji,\n});\n</script>\n"],"names":["emojis"],"mappings":"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"}

package/dist/components/emoji_picker/modules/emoji_skin_selector.vue.cjs

@@ -1,199 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const emoji_picker_constants = require("../emoji_picker_constants.cjs");
-const tooltip = require("../../tooltip/tooltip.vue.cjs");
-const _hoisted_1 = { "data-qa": "skin-selector" };
-const _hoisted_2 = { class: "d-emoji-picker__skin-list" };
-const _hoisted_3 = ["onKeydown", "onClick"];
-const _hoisted_4 = ["alt", "aria-label", "title", "src"];
-const _hoisted_5 = { class: "d-emoji-picker__skin-selected" };
-const _hoisted_6 = ["aria-label"];
-const _hoisted_7 = ["alt", "aria-label", "title", "src"];
-const _sfc_main = {
-  __name: "emoji_skin_selector",
-  props: {
-    /**
-     * The skin tone to apply to the emoji list
-     * @type {String}
-     * @required
-     */
-    skinTone: {
-      type: String,
-      required: true
-    },
-    isHovering: {
-      type: Boolean,
-      default: false
-    },
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * The skin tone that was selected
-     * @event skin-tone
-     * @type {Number}
-     */
-    "skin-tone",
-    "focus-tabset",
-    "focus-last-emoji"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const skinList = [
-      {
-        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: ""
-      }
-    ];
-    const isOpen = vue.ref(false);
-    const skinSelectorRef = vue.ref(null);
-    const skinsRef = vue.ref([]);
-    vue.watchEffect(
-      () => props.isHovering && (isOpen.value = false)
-    );
-    const skinPassedIn = vue.computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));
-    const skinSelected = vue.ref(skinPassedIn.value);
-    vue.watchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));
-    function setSkinsRef(ref) {
-      skinsRef.value.push(ref);
-    }
-    function focusSkinSelector() {
-      skinSelectorRef.value.focus();
-    }
-    function selectSkin(skin) {
-      skinSelected.value = skin;
-      isOpen.value = false;
-      emits("skin-tone", skin.skinTone);
-      vue.nextTick(() => focusSkinSelector());
-    }
-    const handleKeyDown = (event, skin, index) => {
-      var _a, _b, _c;
-      event.preventDefault();
-      if (event.key === "ArrowLeft") {
-        if (index === 0) (_a = skinsRef.value[skinsRef.value.length - 1]) == null ? void 0 : _a.focus();
-        (_b = skinsRef.value[index - 1]) == null ? void 0 : _b.focus();
-      }
-      if (event.key === "ArrowRight") {
-        (_c = skinsRef.value[index + 1]) == null ? void 0 : _c.focus();
-      }
-      if (event.key === "Enter") {
-        if (skin) {
-          selectSkin(skin);
-        } else {
-          toggleSkinList();
-        }
-      }
-      if (event.key === "Tab") {
-        if (event.shiftKey) {
-          emits("focus-last-emoji");
-        } else {
-          emits("focus-tabset");
-        }
-      }
-    };
-    function toggleSkinList() {
-      isOpen.value = !isOpen.value;
-      vue.nextTick(() => skinsRef.value[0].focus());
-    }
-    __expose({
-      focusSkinSelector
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.withDirectives(vue.createElementVNode("div", _hoisted_2, [
-          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(skinList, (skin, index) => {
-            return vue.createElementVNode("button", {
-              ref_for: true,
-              ref: (el) => {
-                if (el) setSkinsRef(el);
-              },
-              key: skin.name,
-              class: vue.normalizeClass({
-                "selected": skinSelected.value.skinCode === skin.skinCode
-              }),
-              onKeydown: (event) => handleKeyDown(event, skin, index),
-              onClick: ($event) => selectSkin(skin)
-            }, [
-              vue.createElementVNode("img", {
-                class: "d-icon d-icon--size-500",
-                alt: skin.name,
-                "aria-label": skin.name,
-                title: skin.name,
-                src: `${vue.unref(emoji_picker_constants.CDN_URL) + skin.unicode_output}.png`
-              }, null, 8, _hoisted_4)
-            ], 42, _hoisted_3);
-          }), 64))
-        ], 512), [
-          [vue.vShow, isOpen.value]
-        ]),
-        vue.withDirectives(vue.createElementVNode("div", _hoisted_5, [
-          vue.createVNode(vue.unref(tooltip.default), { placement: "top-end" }, {
-            anchor: vue.withCtx(() => [
-              vue.createElementVNode("button", {
-                ref_key: "skinSelectorRef",
-                ref: skinSelectorRef,
-                "aria-label": __props.skinSelectorButtonTooltipLabel,
-                tabindex: "-1",
-                onClick: toggleSkinList,
-                onKeydown: _cache[0] || (_cache[0] = (event) => handleKeyDown(event))
-              }, [
-                vue.createElementVNode("img", {
-                  class: "d-icon d-icon--size-500",
-                  alt: skinSelected.value.name,
-                  "aria-label": skinSelected.value.name,
-                  title: skinSelected.value.name,
-                  src: `${vue.unref(emoji_picker_constants.CDN_URL) + skinSelected.value.unicode_output}.png`
-                }, null, 8, _hoisted_7)
-              ], 40, _hoisted_6)
-            ]),
-            default: vue.withCtx(() => [
-              vue.createTextVNode(vue.toDisplayString(__props.skinSelectorButtonTooltipLabel) + " ", 1)
-            ]),
-            _: 1
-          })
-        ], 512), [
-          [vue.vShow, !isOpen.value]
-        ])
-      ]);
-    };
-  }
-};
-exports.default = _sfc_main;
-//# sourceMappingURL=emoji_skin_selector.vue.cjs.map

package/dist/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        :ref=\"el => { if (el) setSkinsRef(el) }\"\n        :key=\"skin.name\"\n        :class=\"{\n          'selected': skinSelected.skinCode === skin.skinCode,\n        }\"\n        @keydown=\"event => handleKeyDown(event, skin, index)\"\n        @click=\"selectSkin(skin)\"\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=\"`${CDN_URL + 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=\"`${CDN_URL + skinSelected.unicode_output}.png`\"\n            >\n          </button>\n        </template>\n      </dt-tooltip>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref, watchEffect } from 'vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker/emoji_picker_constants.js';\nimport { DtTooltip } from '@/components/tooltip';\n\nconst props = defineProps({\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\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\nconst emits = defineEmits([\n  /**\n   * The skin tone that was selected\n   * @event skin-tone\n   * @type {Number}\n   */\n  'skin-tone',\n  'focus-tabset',\n  'focus-last-emoji',\n]);\n\nconst skinList = [\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\nconst isOpen = ref(false);\n\nconst skinSelectorRef = ref(null);\n\nconst skinsRef = ref([]);\n\n/**\n * It will close the skin selector if the user is hovering over the emoji list\n */\nwatchEffect(\n  () => props.isHovering && (isOpen.value = false),\n);\n\n/**\n * It will initially display props.skinTone. If a new skin tone is selected,\n * it will display that until props.skinTone changes.\n */\nconst skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));\nconst skinSelected = ref(skinPassedIn.value);\nwatchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));\n\nfunction setSkinsRef (ref) {\n  skinsRef.value.push(ref);\n}\nfunction focusSkinSelector () {\n  skinSelectorRef.value.focus();\n}\n\nfunction selectSkin (skin) {\n  skinSelected.value = skin;\n  isOpen.value = false;\n  emits('skin-tone', skin.skinTone);\n  nextTick(() => focusSkinSelector());\n}\n\nconst handleKeyDown = (event, skin, index) => {\n  event.preventDefault();\n\n  if (event.key === 'ArrowLeft') {\n    if (index === 0) skinsRef.value[skinsRef.value.length - 1]?.focus();\n    skinsRef.value[index - 1]?.focus();\n  }\n\n  if (event.key === 'ArrowRight') {\n    skinsRef.value[index + 1]?.focus();\n  }\n\n  if (event.key === 'Enter') {\n    if (skin) { selectSkin(skin); } else {\n      toggleSkinList();\n    }\n  }\n\n  if (event.key === 'Tab') {\n    if (event.shiftKey) {\n      emits('focus-last-emoji');\n    } else {\n      emits('focus-tabset');\n    }\n  }\n};\n\nfunction toggleSkinList () {\n  isOpen.value = !isOpen.value;\n  nextTick(() => skinsRef.value[0].focus());\n}\n\ndefineExpose({\n  focusSkinSelector,\n});\n</script>\n"],"names":["EMOJI_PICKER_SKIN_TONE_MODIFIERS","ref","watchEffect","computed","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,UAAM,QAAQ;AAsBd,UAAM,QAAQ;AAWd,UAAM,WAAW;AAAA,MACf;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAUA,uBAAgC,iCAAC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAUA,uBAAgC,iCAAC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAUA,uBAAgC,iCAAC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAUA,uBAAgC,iCAAC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAUA,uBAAgC,iCAAC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAUA,uBAAgC,iCAAC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,IACH;AAEA,UAAM,SAASC,IAAAA,IAAI,KAAK;AAExB,UAAM,kBAAkBA,IAAAA,IAAI,IAAI;AAEhC,UAAM,WAAWA,IAAAA,IAAI,CAAA,CAAE;AAKvBC,QAAW;AAAA,MACT,MAAM,MAAM,eAAe,OAAO,QAAQ;AAAA,IAC5C;AAMA,UAAM,eAAeC,IAAQ,SAAC,MAAM,SAAS,KAAK,CAAC,SAAS,KAAK,aAAa,MAAM,QAAQ,CAAC;AAC7F,UAAM,eAAeF,IAAG,IAAC,aAAa,KAAK;AAC3CC,QAAAA,YAAY,MAAM,aAAa,UAAU,aAAa,QAAQ,aAAa,MAAM;AAEjF,aAAS,YAAa,KAAK;AACzB,eAAS,MAAM,KAAK,GAAG;AAAA,IACzB;AACA,aAAS,oBAAqB;AAC5B,sBAAgB,MAAM;IACxB;AAEA,aAAS,WAAY,MAAM;AACzB,mBAAa,QAAQ;AACrB,aAAO,QAAQ;AACf,YAAM,aAAa,KAAK,QAAQ;AAChCE,mBAAS,MAAM,kBAAiB,CAAE;AAAA,IACpC;AAEA,UAAM,gBAAgB,CAAC,OAAO,MAAM,UAAU;;AAC5C,YAAM,eAAc;AAEpB,UAAI,MAAM,QAAQ,aAAa;AAC7B,YAAI,UAAU,EAAG,gBAAS,MAAM,SAAS,MAAM,SAAS,CAAC,MAAxC,mBAA2C;AAC5D,uBAAS,MAAM,QAAQ,CAAC,MAAxB,mBAA2B;AAAA,MAC5B;AAED,UAAI,MAAM,QAAQ,cAAc;AAC9B,uBAAS,MAAM,QAAQ,CAAC,MAAxB,mBAA2B;AAAA,MAC5B;AAED,UAAI,MAAM,QAAQ,SAAS;AACzB,YAAI,MAAM;AAAE,qBAAW,IAAI;AAAA,QAAE,OAAQ;AACnC;QACD;AAAA,MACF;AAED,UAAI,MAAM,QAAQ,OAAO;AACvB,YAAI,MAAM,UAAU;AAClB,gBAAM,kBAAkB;AAAA,QAC9B,OAAW;AACL,gBAAM,cAAc;AAAA,QACrB;AAAA,MACF;AAAA,IACH;AAEA,aAAS,iBAAkB;AACzB,aAAO,QAAQ,CAAC,OAAO;AACvBA,UAAQ,SAAC,MAAM,SAAS,MAAM,CAAC,EAAE,MAAK,CAAE;AAAA,IAC1C;AAEA,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}