@dialpad/dialtone 9.71.0-beta.1 → 9.71.0

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

@@ -0,0 +1,167 @@
+import { computed, ref, toRefs, watch, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, withModifiers } from "vue";
+import DtTabGroup from "../../tabs/tab_group.vue.js";
+import DtTab from "../../tabs/tab.vue.js";
+import DtIcon from "../../icon/icon.vue.js";
+import { EMOJI_PICKER_CATEGORIES } from "../emoji_picker_constants.js";
+const _hoisted_1 = { class: "d-emoji-picker__tabset" };
+const _sfc_main = {
+  __name: "emoji_tabset",
+  props: {
+    /**
+     * Whether to show the recently used tab or not
+     * @type {Boolean}
+     * @default false
+     */
+    showRecentlyUsedTab: {
+      type: Boolean,
+      default: false
+    },
+    scrollIntoTab: {
+      type: Number,
+      required: true
+    },
+    isScrolling: {
+      type: Boolean,
+      default: false
+    },
+    emojiFilter: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The labels for the aria-label
+     * @type {Array}
+     * @required
+     */
+    tabsetLabels: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: [
+    /**
+     * Emitted when a tab is selected
+     * @event selected-tabset
+     * @param {String} tabId - The name of the tab that was selected
+     */
+    "selected-tabset",
+    "focus-search-input",
+    "focus-skin-selector"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const 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" }
+    ];
+    const tabs = computed(() => {
+      const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);
+      return tabsData.map((tab, index) => ({
+        ...tab,
+        label: props.tabsetLabels[index],
+        id: (index + 1).toString(),
+        panelId: (index + 1).toString()
+      }));
+    });
+    const isSearching = computed(() => props.emojiFilter.length > 0);
+    const selectedTab = ref("1");
+    const { isScrolling } = toRefs(props);
+    const tabsetRef = ref([]);
+    watch(
+      () => props.scrollIntoTab,
+      () => {
+        if (!isScrolling.value && !isSearching.value) {
+          selectedTab.value = (props.scrollIntoTab + 1).toString();
+        }
+      }
+    );
+    watch(
+      isSearching,
+      () => {
+        if (isSearching.value) {
+          selectedTab.value = null;
+        }
+      }
+    );
+    function selectTabset(id) {
+      if (!isScrolling.value) {
+        selectedTab.value = id;
+      }
+      emits("selected-tabset", id);
+    }
+    function setTabsetRef(ref2) {
+      tabsetRef.value.push(ref2.$el);
+    }
+    function focusTabset() {
+      tabsetRef.value[0].focus();
+    }
+    function handleKeyDown(event, tabId) {
+      if (event.key === "Enter") {
+        selectTabset(tabId);
+        tabsetRef.value[tabId - 1].blur();
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        if (event.shiftKey) {
+          emits("focus-skin-selector");
+        } else {
+          emits("focus-search-input");
+        }
+      }
+      if (event.key === "ArrowDown") {
+        emits("focus-search-input");
+      }
+    }
+    __expose({
+      focusTabset
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(DtTabGroup), {
+          "tab-list-class": "d-emoji-picker__tabset-list",
+          selected: selectedTab.value
+        }, {
+          tabs: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab, index) => {
+              return openBlock(), createBlock(unref(DtTab), {
+                id: tab.id,
+                ref_for: true,
+                ref: (el) => {
+                  if (el) setTabsetRef(el);
+                },
+                key: tab.id,
+                "panel-id": tab.panelId,
+                label: tab.label,
+                "aria-controls": "d-emoji-picker-list",
+                tabindex: index + 1,
+                onClickCapture: withModifiers(($event) => selectTabset(tab.id), ["stop"]),
+                onKeydown: ($event) => handleKeyDown($event, tab.id)
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(DtIcon), {
+                    size: "400",
+                    name: tab.icon
+                  }, null, 8, ["name"])
+                ]),
+                _: 2
+              }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["selected"])
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=emoji_tabset.vue.js.map

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

@@ -0,0 +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      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=\"el => { if (el) setTabsetRef(el) }\"\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 setup>\nimport { computed, ref, toRefs, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tabs';\nimport { DtIcon } from '@/components/icon';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nconst props = defineProps({\n  /**\n   * Whether to show the recently used tab or not\n   * @type {Boolean}\n   * @default false\n   */\n  showRecentlyUsedTab: {\n    type: Boolean,\n    default: false,\n  },\n\n  scrollIntoTab: {\n    type: Number,\n    required: true,\n  },\n\n  isScrolling: {\n    type: Boolean,\n    default: false,\n  },\n\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The labels for the aria-label\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when a tab is selected\n   * @event selected-tabset\n   * @param {String} tabId - The name of the tab that was selected\n   */\n  'selected-tabset',\n\n  'focus-search-input',\n  'focus-skin-selector',\n]);\n\nconst 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\nconst tabs = computed(() => {\n  const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n  return tabsData.map((tab, index) => ({\n    ...tab,\n    label: props.tabsetLabels[index],\n    id: (index + 1).toString(),\n    panelId: (index + 1).toString(),\n  }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst { isScrolling } = toRefs(props);\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n  () => {\n    if (!isScrolling.value && !isSearching.value) {\n      selectedTab.value = (props.scrollIntoTab + 1).toString();\n    }\n  });\n\nwatch(isSearching,\n  () => {\n    if (isSearching.value) {\n      selectedTab.value = null;\n    }\n  });\n\n/**\n * We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n */\nfunction selectTabset (id) {\n  if (!isScrolling.value) {\n    selectedTab.value = id;\n  }\n  emits('selected-tabset', id);\n}\n\nfunction setTabsetRef (ref) {\n  // We push the $el, because $el is the button inside the dt-tab component\n  // and we need the button to focus it\n  tabsetRef.value.push(ref.$el);\n}\n\nfunction focusTabset () {\n  tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n  if (event.key === 'Enter') {\n    selectTabset(tabId);\n    // We blur because seems like the tab component override the selected prop, and it removes the selected style\n    tabsetRef.value[tabId - 1].blur();\n  }\n\n  if (event.key === 'Tab') {\n    event.preventDefault();\n    if (event.shiftKey) {\n      emits('focus-skin-selector');\n    } else {\n      emits('focus-search-input');\n    }\n  }\n\n  if (event.key === 'ArrowDown') {\n    // Jump to search input\n    emits('focus-search-input');\n  }\n}\n\ndefineExpose({\n  focusTabset,\n});\n</script>\n"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,UAAM,QAAQ;AAqCd,UAAM,QAAQ;AAYd,UAAM,YAAY;AAAA,MAChB,EAAE,OAAO,wBAAwB,oBAAoB,MAAM,QAAS;AAAA,MACpE,EAAE,OAAO,wBAAwB,oBAAoB,MAAM,YAAa;AAAA,MACxE,EAAE,OAAO,wBAAwB,QAAQ,MAAM,eAAgB;AAAA,MAC/D,EAAE,OAAO,wBAAwB,MAAM,MAAM,OAAQ;AAAA,MACrD,EAAE,OAAO,wBAAwB,UAAU,MAAM,SAAU;AAAA,MAC3D,EAAE,OAAO,wBAAwB,QAAQ,MAAM,iBAAkB;AAAA,MACjE,EAAE,OAAO,wBAAwB,SAAS,MAAM,YAAa;AAAA,MAC7D,EAAE,OAAO,wBAAwB,SAAS,MAAM,QAAS;AAAA,MACzD,EAAE,OAAO,wBAAwB,OAAO,MAAM,OAAQ;AAAA,IACxD;AAEA,UAAM,OAAO,SAAS,MAAM;AAC1B,YAAM,WAAW,MAAM,sBAAsB,YAAY,UAAU,MAAM,CAAC;AAE1E,aAAO,SAAS,IAAI,CAAC,KAAK,WAAW;AAAA,QACnC,GAAG;AAAA,QACH,OAAO,MAAM,aAAa,KAAK;AAAA,QAC/B,KAAK,QAAQ,GAAG,SAAU;AAAA,QAC1B,UAAU,QAAQ,GAAG,SAAU;AAAA,MAChC,EAAC;AAAA,IACJ,CAAC;AAED,UAAM,cAAc,SAAS,MAAM,MAAM,YAAY,SAAS,CAAC;AAE/D,UAAM,cAAc,IAAI,GAAG;AAE3B,UAAM,EAAE,YAAa,IAAG,OAAO,KAAK;AAEpC,UAAM,YAAY,IAAI,CAAA,CAAE;AAExB;AAAA,MAAM,MAAM,MAAM;AAAA,MAChB,MAAM;AACJ,YAAI,CAAC,YAAY,SAAS,CAAC,YAAY,OAAO;AAC5C,sBAAY,SAAS,MAAM,gBAAgB,GAAG;QAC/C;AAAA,MACL;AAAA,IAAG;AAEH;AAAA,MAAM;AAAA,MACJ,MAAM;AACJ,YAAI,YAAY,OAAO;AACrB,sBAAY,QAAQ;AAAA,QACrB;AAAA,MACL;AAAA,IAAG;AAOH,aAAS,aAAc,IAAI;AACzB,UAAI,CAAC,YAAY,OAAO;AACtB,oBAAY,QAAQ;AAAA,MACrB;AACD,YAAM,mBAAmB,EAAE;AAAA,IAC7B;AAEA,aAAS,aAAcA,MAAK;AAG1B,gBAAU,MAAM,KAAKA,KAAI,GAAG;AAAA,IAC9B;AAEA,aAAS,cAAe;AACtB,gBAAU,MAAM,CAAC,EAAE,MAAK;AAAA,IAC1B;AAEA,aAAS,cAAe,OAAO,OAAO;AACpC,UAAI,MAAM,QAAQ,SAAS;AACzB,qBAAa,KAAK;AAElB,kBAAU,MAAM,QAAQ,CAAC,EAAE,KAAI;AAAA,MAChC;AAED,UAAI,MAAM,QAAQ,OAAO;AACvB,cAAM,eAAc;AACpB,YAAI,MAAM,UAAU;AAClB,gBAAM,qBAAqB;AAAA,QACjC,OAAW;AACL,gBAAM,oBAAoB;AAAA,QAC3B;AAAA,MACF;AAED,UAAI,MAAM,QAAQ,aAAa;AAE7B,cAAM,oBAAoB;AAAA,MAC3B;AAAA,IACH;AAEA,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs

@@ -0,0 +1,95 @@
+"use strict";
+const common_emoji = require("../../common/emoji.cjs");
+const vue = require("vue");
+const icon_constants = require("../icon/icon_constants.cjs");
+const emoji = require("../emoji/emoji.vue.cjs");
+const _sfc_main = {
+  name: "DtEmojiTextWrapper",
+  components: {
+    DtEmoji: emoji
+  },
+  props: {
+    /**
+     * Element type (tag name) to use for the wrapper.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * The icon size to render the emojis at: 100 to 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (t) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(t)
+    }
+  },
+  data() {
+    return {
+      loadingEmojiJson: true
+    };
+  },
+  async created() {
+    this.loadingEmojiJson = false;
+  },
+  methods: {
+    /**
+     * Replaces the valid codes from the text content with a DtEmoji component.
+     * @returns {Array<VNode|string>}
+     */
+    replaceDtEmojis(replaceList, textContent) {
+      if (!replaceList.length) return textContent;
+      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
+      const items = textContent.split(regexp);
+      return items.filter((item) => item.trim() !== "").map((item) => {
+        if (replaceList.includes(item)) {
+          return vue.h(emoji, { code: item, size: this.size });
+        }
+        return vue.h("span", { class: "d-emoji-text-wrapper__text" }, item);
+      });
+    },
+    /**
+     * Recursively search the Vue virtual DOM to find text
+     * @param VNode
+     * @returns {VNode|*}
+     */
+    searchVNodes(VNode) {
+      var _a;
+      if (typeof VNode === "string") return this.searchCodes(VNode);
+      if (typeof VNode.type === "symbol") return this.searchCodes(VNode.children);
+      if ((_a = VNode.props) == null ? void 0 : _a.innerHTML) return this.searchVNodes(VNode.props.innerHTML);
+      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];
+      return vue.h(VNode.type, VNode.props, children.map((VNodeChild) => this.searchVNodes(VNodeChild)));
+    },
+    // TODO: Find a way to crawl vue components
+    replaceVueComponentVNodeContent(VNode) {
+    },
+    /**
+     * Find codes in text.
+     * @param textContent string
+     * @returns {Array<VNode|string>|string}
+     */
+    searchCodes(textContent) {
+      const shortcodes = common_emoji.findShortCodes(textContent);
+      const emojis = common_emoji.findEmojis(textContent);
+      const replaceList = [...shortcodes, ...emojis];
+      if (replaceList.length === 0) return textContent;
+      return this.replaceDtEmojis(replaceList, textContent);
+    }
+  },
+  render() {
+    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];
+    return vue.h(
+      this.elementType,
+      {
+        "data-qa": "emoji-text-wrapper",
+        class: "d-emoji-text-wrapper"
+      },
+      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
+    );
+  }
+};
+const DtEmojiTextWrapper = _sfc_main;
+module.exports = DtEmojiTextWrapper;
+//# sourceMappingURL=emoji_text_wrapper.vue.cjs.map

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_text_wrapper.vue.cjs","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      if (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["DtEmoji","ICON_SIZE_MODIFIERS","h","findShortCodes","findEmojis"],"mappings":";;;;;AAUA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,SAAAA;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAKC,kCAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiB,aAAa,aAAa;AACzC,UAAI,CAAC,YAAY,OAAQ,QAAO;AAEhC,YAAM,SAAS,IAAI,OAAO,IAAI,YAAY,KAAK,GAAG,CAAC,KAAK,GAAG;AAC3D,YAAM,QAAQ,YAAY,MAAM,MAAM;AAEtC,aAAO,MACJ,OAAO,UAAQ,KAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAAC,SAAS;AACb,YAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,iBAAOC,IAAC,EAACF,OAAS,EAAE,MAAM,MAAM,MAAM,KAAK,KAAG,CAAG;AAAA,QACnD;AACA,eAAOE,IAAAA,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAK,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAc,OAAO;;AACnB,UAAI,OAAO,UAAU,SAAU,QAAO,KAAK,YAAY,KAAK;AAC5D,UAAI,OAAO,MAAM,SAAS,SAAU,QAAO,KAAK,YAAY,MAAM,QAAQ;AAC1E,WAAI,WAAM,UAAN,mBAAa,UAAW,QAAO,KAAK,aAAa,MAAM,MAAM,SAAS;AAE1E,YAAM,WAAW,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;AACjF,aAAOA,IAAC,EAAC,MAAM,MAAM,MAAM,OAAO,SAAS,IAAI,gBAAc,KAAK,aAAa,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiC,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAa,aAAa;AACxB,YAAM,aAAaC,4BAAe,WAAW;AAC7C,YAAM,SAASC,wBAAW,WAAW;AAErC,YAAM,cAAc,CAAC,GAAG,YAAY,GAAG,MAAM;AAC7C,UAAI,YAAY,WAAW,EAAG,QAAO;AACrC,aAAO,KAAK,gBAAgB,aAAa,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAM,qBAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAOF,IAAC;AAAA,MACN,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACD,qBACA,mBAAmB,IAAI,WAAS,KAAK,aAAa,KAAK,CAAC;AAAA;EAE/D;AACH;;;"}

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.js

@@ -0,0 +1,96 @@
+import { findShortCodes, findEmojis } from "../../common/emoji.js";
+import { h } from "vue";
+import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
+import DtEmoji from "../emoji/emoji.vue.js";
+const _sfc_main = {
+  name: "DtEmojiTextWrapper",
+  components: {
+    DtEmoji
+  },
+  props: {
+    /**
+     * Element type (tag name) to use for the wrapper.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * The icon size to render the emojis at: 100 to 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
+    }
+  },
+  data() {
+    return {
+      loadingEmojiJson: true
+    };
+  },
+  async created() {
+    this.loadingEmojiJson = false;
+  },
+  methods: {
+    /**
+     * Replaces the valid codes from the text content with a DtEmoji component.
+     * @returns {Array<VNode|string>}
+     */
+    replaceDtEmojis(replaceList, textContent) {
+      if (!replaceList.length) return textContent;
+      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
+      const items = textContent.split(regexp);
+      return items.filter((item) => item.trim() !== "").map((item) => {
+        if (replaceList.includes(item)) {
+          return h(DtEmoji, { code: item, size: this.size });
+        }
+        return h("span", { class: "d-emoji-text-wrapper__text" }, item);
+      });
+    },
+    /**
+     * Recursively search the Vue virtual DOM to find text
+     * @param VNode
+     * @returns {VNode|*}
+     */
+    searchVNodes(VNode) {
+      var _a;
+      if (typeof VNode === "string") return this.searchCodes(VNode);
+      if (typeof VNode.type === "symbol") return this.searchCodes(VNode.children);
+      if ((_a = VNode.props) == null ? void 0 : _a.innerHTML) return this.searchVNodes(VNode.props.innerHTML);
+      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];
+      return h(VNode.type, VNode.props, children.map((VNodeChild) => this.searchVNodes(VNodeChild)));
+    },
+    // TODO: Find a way to crawl vue components
+    replaceVueComponentVNodeContent(VNode) {
+    },
+    /**
+     * Find codes in text.
+     * @param textContent string
+     * @returns {Array<VNode|string>|string}
+     */
+    searchCodes(textContent) {
+      const shortcodes = findShortCodes(textContent);
+      const emojis = findEmojis(textContent);
+      const replaceList = [...shortcodes, ...emojis];
+      if (replaceList.length === 0) return textContent;
+      return this.replaceDtEmojis(replaceList, textContent);
+    }
+  },
+  render() {
+    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];
+    return h(
+      this.elementType,
+      {
+        "data-qa": "emoji-text-wrapper",
+        class: "d-emoji-text-wrapper"
+      },
+      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
+    );
+  }
+};
+const DtEmojiTextWrapper = _sfc_main;
+export {
+  DtEmojiTextWrapper as default
+};
+//# sourceMappingURL=emoji_text_wrapper.vue.js.map

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_text_wrapper.vue.js","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      if (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;AAUA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,mBAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiB,aAAa,aAAa;AACzC,UAAI,CAAC,YAAY,OAAQ,QAAO;AAEhC,YAAM,SAAS,IAAI,OAAO,IAAI,YAAY,KAAK,GAAG,CAAC,KAAK,GAAG;AAC3D,YAAM,QAAQ,YAAY,MAAM,MAAM;AAEtC,aAAO,MACJ,OAAO,UAAQ,KAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAAC,SAAS;AACb,YAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,iBAAO,EAAE,SAAS,EAAE,MAAM,MAAM,MAAM,KAAK,KAAG,CAAG;AAAA,QACnD;AACA,eAAO,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAK,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAc,OAAO;;AACnB,UAAI,OAAO,UAAU,SAAU,QAAO,KAAK,YAAY,KAAK;AAC5D,UAAI,OAAO,MAAM,SAAS,SAAU,QAAO,KAAK,YAAY,MAAM,QAAQ;AAC1E,WAAI,WAAM,UAAN,mBAAa,UAAW,QAAO,KAAK,aAAa,MAAM,MAAM,SAAS;AAE1E,YAAM,WAAW,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;AACjF,aAAO,EAAE,MAAM,MAAM,MAAM,OAAO,SAAS,IAAI,gBAAc,KAAK,aAAa,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiC,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAa,aAAa;AACxB,YAAM,aAAa,eAAe,WAAW;AAC7C,YAAM,SAAS,WAAW,WAAW;AAErC,YAAM,cAAc,CAAC,GAAG,YAAY,GAAG,MAAM;AAC7C,UAAI,YAAY,WAAW,EAAG,QAAO;AACrC,aAAO,KAAK,gBAAgB,aAAa,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAM,qBAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAO;AAAA,MACL,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACD,qBACA,mBAAmB,IAAI,WAAS,KAAK,aAAa,KAAK,CAAC;AAAA;EAE/D;AACH;;"}

package/dist/vue3/components/empty_state/empty_state.vue.cjs

@@ -0,0 +1,171 @@
+"use strict";
+const vue = require("vue");
+const empty_state_constants = require("./empty_state_constants.cjs");
+const common_utils = require("../../common/utils.cjs");
+const illustration_constants = require("../illustration/illustration_constants.cjs");
+const icon_constants = require("../icon/icon_constants.cjs");
+const stack = require("../stack/stack.vue.cjs");
+const icon = require("../icon/icon.vue.cjs");
+const illustration = require("../illustration/illustration.vue.cjs");
+const _hoisted_1 = {
+  key: 0,
+  class: "d-empty-state__icon"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "d-empty-state__illustration"
+};
+const _sfc_main = {
+  __name: "empty_state",
+  props: {
+    /**
+      * The empty state size.
+      * @values 'sm', 'md', 'lg'
+      */
+    size: {
+      type: String,
+      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}
+      */
+    headerText: {
+      type: String,
+      required: true
+    },
+    /**
+      * Body text
+      * @type {String}
+      */
+    bodyText: {
+      type: String,
+      default: null
+    },
+    /**
+      * Whether to show the illustration
+      * @type {Boolean}
+      */
+    showIllustration: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(__props) {
+    const slots = vue.useSlots();
+    const props = __props;
+    const notSmSize = vue.computed(() => props.size !== "sm");
+    const showIllustrationComponent = vue.computed(() => props.illustrationName && notSmSize.value);
+    const showIcon = vue.computed(() => {
+      if (!props.iconName) {
+        return false;
+      }
+      return !(props.illustrationName && notSmSize.value);
+    });
+    const sizeClass = vue.computed(() => empty_state_constants.EMPTY_STATE_SIZE_MODIFIERS[props.size]);
+    const emptyStateClasses = vue.computed(() => ["d-empty-state", sizeClass.value]);
+    const contentClass = vue.computed(() => {
+      switch (props.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";
+      }
+    });
+    const headlineClass = vue.computed(() => {
+      switch (props.size) {
+        case "sm":
+          return "d-headline--md";
+        case "md":
+          return "d-headline--xl";
+        case "lg":
+          return "d-headline--xxl";
+        default:
+          return "d-headline--xxl";
+      }
+    });
+    const bodyClass = vue.computed(() => {
+      switch (props.size) {
+        case "sm":
+          return "d-body--sm";
+        case "md":
+          return "d-body--sm";
+        case "lg":
+          return "d-body--md";
+        default:
+          return "d-body--md";
+      }
+    });
+    vue.onMounted(() => {
+      if (!props.bodyText && !common_utils.hasSlotContent(slots.body)) {
+        console.warn("Dialtone Empty State component: You should provide either bodyText or content on body slot.");
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(stack), {
+        class: vue.normalizeClass(emptyStateClasses.value)
+      }, {
+        default: vue.withCtx(() => [
+          __props.showIllustration ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            showIcon.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+              vue.createVNode(vue.unref(icon), {
+                name: __props.iconName,
+                size: "800"
+              }, null, 8, ["name"])
+            ])) : vue.createCommentVNode("", true),
+            showIllustrationComponent.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
+              vue.createVNode(vue.unref(illustration), { name: __props.illustrationName }, null, 8, ["name"])
+            ])) : vue.createCommentVNode("", true)
+          ], 64)) : vue.createCommentVNode("", true),
+          vue.createVNode(vue.unref(stack), {
+            gap: "450",
+            class: vue.normalizeClass(["d-empty-state__content", contentClass.value])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["d-empty-state__header-text", headlineClass.value])
+              }, vue.toDisplayString(__props.headerText), 3),
+              __props.bodyText ? (vue.openBlock(), vue.createElementBlock("p", {
+                key: 0,
+                class: vue.normalizeClass(["d-empty-state__body-text", bodyClass.value])
+              }, vue.toDisplayString(__props.bodyText), 3)) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          vue.renderSlot(_ctx.$slots, "body")
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+};
+const _sfc_main$1 = _sfc_main;
+module.exports = _sfc_main$1;
+//# sourceMappingURL=empty_state.vue.cjs.map

package/dist/vue3/components/empty_state/empty_state.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty_state.vue.cjs","sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <template v-if=\"showIllustration\">\n      <span\n        v-if=\"showIcon\"\n        class=\"d-empty-state__icon\"\n      >\n        <dt-icon\n          :name=\"iconName\"\n          size=\"800\"\n        />\n      </span>\n\n      <span\n        v-if=\"showIllustrationComponent\"\n        class=\"d-empty-state__illustration\"\n      >\n        <dt-illustration\n          :name=\"illustrationName\"\n        />\n      </span>\n    </template>\n\n    <dt-stack\n      gap=\"450\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <div :class=\"['d-empty-state__header-text', headlineClass]\">\n        {{ headerText }}\n      </div>\n\n      <p\n        v-if=\"bodyText\"\n        :class=\"['d-empty-state__body-text', bodyClass]\"\n      >\n        {{ bodyText }}\n      </p>\n    </dt-stack>\n\n    <slot name=\"body\" />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * The illustration name in kebab-case\n   * This only displays when size is 'lg' or 'md'\n   * This has priority over icon.\n    * @type {String}\n    */\n  illustrationName: {\n    type: String,\n    default: null,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n\n  /**\n    * The icon name in kebab-case\n   * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n   * Will always be shown in 'sm' size.\n    * @type {String}\n    */\n  iconName: {\n    type: String,\n    default: null,\n    validator: (name) => ICON_NAMES.includes(name),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Whether to show the illustration\n    * @type {Boolean}\n    */\n  showIllustration: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst notSmSize = computed(() => props.size !== 'sm');\n\nconst showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);\n\nconst showIcon = computed(() => {\n  if (!props.iconName) {\n    return false;\n  }\n  return !(props.illustrationName && notSmSize.value);\n});\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-empty-state__content--sm';\n    case 'md':\n      return 'd-empty-state__content--md';\n    case 'lg':\n      return 'd-empty-state__content--lg';\n    default:\n      return 'd-empty-state__content--lg';\n  }\n});\n\nconst headlineClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-headline--md';\n    case 'md':\n      return 'd-headline--xl';\n    case 'lg':\n      return 'd-headline--xxl';\n    default:\n      return 'd-headline--xxl';\n  }\n});\n\nconst bodyClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-body--sm';\n    case 'md':\n      return 'd-body--sm';\n    case 'lg':\n      return 'd-body--md';\n    default:\n      return 'd-body--md';\n  }\n});\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":["useSlots","computed","EMPTY_STATE_SIZE_MODIFIERS","onMounted","hasSlotContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,UAAM,QAAQA,IAAQ,SAAA;AAEtB,UAAM,QAAQ;AA+Dd,UAAM,YAAYC,IAAAA,SAAS,MAAM,MAAM,SAAS,IAAI;AAEpD,UAAM,4BAA4BA,IAAQ,SAAC,MAAM,MAAM,oBAAoB,UAAU,KAAK;AAE1F,UAAM,WAAWA,IAAQ,SAAC,MAAM;AAC9B,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACR;AACD,aAAO,EAAE,MAAM,oBAAoB,UAAU;AAAA,IAC/C,CAAC;AAED,UAAM,YAAYA,IAAQ,SAAC,MAAMC,sBAAAA,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoBD,IAAQ,SAAC,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAeA,IAAQ,SAAC,MAAM;AAClC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,gBAAgBA,IAAQ,SAAC,MAAM;AACnC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,YAAYA,IAAQ,SAAC,MAAM;AAC/B,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAEDE,QAAAA,UAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAACC,aAAAA,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,KAAK,6FAA6F;AAAA,MAC3G;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}