@empathyco/x-components 6.0.0-alpha.35 → 6.0.0-alpha.37

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
+import { defineComponent, ref, computed, watch } from 'vue';
 import SlidingPanel from '../../../components/sliding-panel.vue.js';
 import { relatedPromptsXModule } from '../x-module.js';
 import '../../../composables/create-use-device.js';
+import { use$x } from '../../../composables/use-_x.js';
 import '@vue/devtools-api';
 import '../../../plugins/devtools/timeline.devtools.js';
 import '@empathyco/x-utils';
@@ -15,38 +16,190 @@ import '@vueuse/core';
 import { useState } from '../../../composables/use-state.js';
 import RelatedPrompt from './related-prompt.vue.js';
 
+/**
+ * This component shows the list of `RelatedPrompts` components.
+ *
+ * If the default slot is reimplemented in the consumer, `onSelect` function will be
+ * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.
+ *
+ * @public
+ */
 var _sfc_main = defineComponent({
     name: 'RelatedPromptsTagList',
     xModule: relatedPromptsXModule.name,
     components: { RelatedPrompt, SlidingPanel },
     props: {
-        buttonClass: String
+        /**
+         * The CSS class for the left and right button of the sliding panel.
+         *
+         * @public
+         */
+        buttonClass: String,
+        /**
+         * The CSS class for all the related prompt wrapper elements.
+         *
+         * @public
+         */
+        tagClass: String,
+        /**
+         * Array of colors to apply to the related prompts. It will be applied to tag
+         * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.
+         *
+         * @public
+         */
+        tagColors: Array,
+        /**
+         * The duration of the total animation in milliseconds.
+         *
+         * @public
+         */
+        animationDurationInMs: {
+            type: Number,
+            default: 700
+        }
     },
-    setup() {
-        const { relatedPrompts, selectedPrompt } = useState('relatedPrompts', [
+    setup(props) {
+        const x = use$x();
+        const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [
             'relatedPrompts',
             'selectedPrompt'
         ]);
-        const slidingPanelContent = ref();
-        const arePromptsVisible = ref(false);
-        const observer = new IntersectionObserver(([entry]) => {
-            arePromptsVisible.value = entry.isIntersecting;
+        const clickedListItemIndex = ref(null);
+        const initialOffsetLefts = {};
+        const isAnimating = ref(false);
+        const listItems = ref([]);
+        const sortedListItems = computed(() => [...listItems.value].sort((a, b) => Number.parseInt(b.getAttribute('data-index')) -
+            Number.parseInt(a.getAttribute('data-index'))));
+        // The duration of a single animation (enter or leave) in milliseconds
+        // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related
+        // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)
+        const singleAnimationDurationInMs = computed(() => props.animationDurationInMs /
+            (clickedListItemIndex.value !== null
+                ? relatedPrompts.value.length - 1
+                : relatedPrompts.value.length));
+        const indexRelatedPrompts = computed(() => relatedPrompts.value.map((relatedPrompt, index) => ({
+            ...relatedPrompt,
+            index
+        })));
+        const visibleRelatedPrompts = computed(() => {
+            return selectedPromptIndex.value !== -1
+                ? [indexRelatedPrompts.value[selectedPromptIndex.value]]
+                : indexRelatedPrompts.value;
         });
-        onMounted(() => {
-            observer.observe(slidingPanelContent.value);
-        });
-        onUnmounted(() => {
-            observer.disconnect();
-        });
-        const isSelected = (index) => selectedPrompt.value === index;
-        const hidePrompt = (index) => selectedPrompt.value !== -1 && selectedPrompt.value !== index;
+        let timeOutId;
+        const resetTransitionStyle = () => {
+            if (timeOutId) {
+                clearTimeout(timeOutId);
+            }
+            isAnimating.value = true;
+            timeOutId = +setTimeout(() => {
+                isAnimating.value = false;
+                clickedListItemIndex.value = null;
+                sortedListItems.value.forEach(element => {
+                    element.style.cssText
+                        .split(';')
+                        .map(rule => rule.split(':')[0]?.trim())
+                        .forEach(property => {
+                        if (property !== 'width') {
+                            element.style.removeProperty(property);
+                        }
+                    });
+                });
+            }, props.animationDurationInMs);
+        };
+        const onSelect = (selectedIndex) => {
+            resetTransitionStyle();
+            clickedListItemIndex.value = selectedIndex;
+            const selected = sortedListItems.value.find(element => Number.parseInt(element.getAttribute('data-index')) === selectedIndex);
+            // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'
+            if (selectedPromptIndex.value === -1) {
+                // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are
+                // sorted in descending order by index.
+                sortedListItems.value.forEach(element => {
+                    const index = Number.parseInt(element.getAttribute('data-index'));
+                    initialOffsetLefts[index] = element.offsetLeft;
+                    element.style.left = `${element.offsetLeft}px`;
+                    element.style.position = 'absolute';
+                    element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
+                    if (index !== selectedIndex) {
+                        element.style.opacity = '1';
+                        element.style.transitionDelay = `${(index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value}ms`;
+                    }
+                });
+                // Synchronize the transition delay of the selected element with the last
+                // element to leave
+                selected.style.transitionDelay = `${(relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *
+                    singleAnimationDurationInMs.value}ms`;
+                // Trigger the animation (selecting) for the selected element
+                requestAnimationFrame(() => {
+                    const maxWidth = getComputedStyle(selected).maxWidth;
+                    selected.style.left = '0px';
+                    selected.style.setProperty('width', `${maxWidth !== 'none' ? maxWidth : '100%'}`, 'important');
+                });
+            }
+            else {
+                // Prepare the selected element for the deselecting animation
+                selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
+                selected.style.left = '0px';
+                selected.style.position = 'absolute';
+                // Trigger the animation (deselecting) for the selected element
+                selected.style.removeProperty('width');
+                requestAnimationFrame(() => {
+                    selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;
+                });
+            }
+            x.emit('UserSelectedARelatedPrompt', selectedIndex);
+        };
+        const onBeforeEnter = (el) => {
+            const element = el;
+            const index = Number.parseInt(element.getAttribute('data-index'));
+            // Prepare the element for the enter animation
+            element.style.opacity = '0';
+            element.style.transform = 'translateY(5px)';
+            element.style.transitionDelay = `${(clickedListItemIndex.value !== null && index > clickedListItemIndex.value
+                ? index - 1
+                : index) * singleAnimationDurationInMs.value}ms`;
+            element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
+        };
+        const onEnter = (el, done) => {
+            const element = el;
+            const index = Number.parseInt(element.getAttribute('data-index'));
+            // Also part of the preparation for the enter animation, but it needs to be done
+            // once the element is inserted in DOM (if not the offsetLeft will be always 0)
+            element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;
+            // trigger enter animation
+            requestAnimationFrame(() => {
+                element.style.opacity = '1';
+                element.style.position = 'absolute';
+                element.style.transform = 'translateY(0)';
+            });
+            done();
+        };
+        const onLeave = (el, done) => {
+            const element = el;
+            // trigger leave animation
+            requestAnimationFrame(() => {
+                element.style.opacity = '0';
+                element.style.transform = 'translateY(5px)';
+            });
+            // Wait for the animation to finish (done() exectution extracts the element from the DOM)
+            setTimeout(done, props.animationDurationInMs);
+        };
+        const isSelected = (index) => selectedPromptIndex.value === index;
+        // Changing the query will trigger the appear animation, so we need to reset the
+        // style after it finishes
+        watch(() => x.query.search, resetTransitionStyle, { immediate: true });
         return {
-            arePromptsVisible,
-            hidePrompt,
             isSelected,
-            relatedPrompts,
-            selectedPrompt,
-            slidingPanelContent
+            onSelect,
+            onBeforeEnter,
+            onEnter,
+            onLeave,
+            selectedPromptIndex,
+            visibleRelatedPrompts,
+            listItems,
+            isAnimating,
+            x
         };
     }
 });

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-prompts-tag-list.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <div>\n    <template v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </template>\n    <SlidingPanel\n      :reset-on-content-change=\"true\"\n      :button-class=\"buttonClass\"\n      :scroll-container-class=\"\n        selectedPrompt === -1 ? 'desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm' : ''\n      \"\n    >\n      <template #sliding-panel-left-button>\n        <slot name=\"sliding-panel-left-button\" />\n      </template>\n\n      <slot name=\"sliding-panel-content\">\n        <div\n          ref=\"slidingPanelContent\"\n          class=\"x-related-prompt__sliding-panel-content\"\n          :class=\"{ 'x-related-prompt__sliding-panel-content-selected': selectedPrompt !== -1 }\"\n        >\n          <div\n            v-for=\"(suggestion, index) in relatedPrompts\"\n            :key=\"index\"\n            :style=\"{\n              animationDelay: `${index * 0.4 + 0.05}s`\n            }\"\n            class=\"x-related-prompt x-staggered-initial\"\n            :class=\"[\n              { 'x-staggered-animation': arePromptsVisible },\n              { 'x-hidden': hidePrompt(index) },\n              { 'x-related-prompt-selected': isSelected(index) }\n            ]\"\n            data-test=\"related-prompt-item\"\n          >\n            <slot\n              name=\"related-prompt-button\"\n              v-bind=\"{ suggestion, index, arePromptsVisible, isSelected }\"\n            >\n              <RelatedPrompt\n                :related-prompt=\"suggestion\"\n                :index=\"index\"\n                :is-prompt-visible=\"arePromptsVisible\"\n                :is-selected=\"isSelected(index)\"\n              />\n            </slot>\n          </div>\n        </div>\n      </slot>\n\n      <template #sliding-panel-right-button>\n        <slot name=\"sliding-panel-right-button\" />\n      </template>\n    </SlidingPanel>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\n  import SlidingPanel from '../../../components/sliding-panel.vue';\n  import { relatedPromptsXModule } from '../x-module';\n  import { useState } from '../../../composables/index';\n  import RelatedPrompt from './related-prompt.vue';\n\n  export default defineComponent({\n    name: 'RelatedPromptsTagList',\n    xModule: relatedPromptsXModule.name,\n    components: { RelatedPrompt, SlidingPanel },\n    props: {\n      buttonClass: String\n    },\n    setup() {\n      const { relatedPrompts, selectedPrompt } = useState('relatedPrompts', [\n        'relatedPrompts',\n        'selectedPrompt'\n      ]);\n\n      const slidingPanelContent = ref<Element>();\n      const arePromptsVisible = ref(false);\n\n      const observer = new IntersectionObserver(([entry]) => {\n        arePromptsVisible.value = entry.isIntersecting;\n      });\n\n      onMounted(() => {\n        observer.observe(slidingPanelContent.value as Element);\n      });\n\n      onUnmounted(() => {\n        observer.disconnect();\n      });\n\n      const isSelected = (index: number): boolean => selectedPrompt.value === index;\n\n      const hidePrompt = (index: number): boolean =>\n        selectedPrompt.value !== -1 && selectedPrompt.value !== index;\n\n      return {\n        arePromptsVisible,\n        hidePrompt,\n        isSelected,\n        relatedPrompts,\n        selectedPrompt,\n        slidingPanelContent\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-related-prompt__sliding-panel-content {\n    display: flex;\n    gap: 8px;\n  }\n\n  .x-related-prompt__sliding-panel-content-selected {\n    width: calc(100%);\n  }\n\n  .x-related-prompt {\n    display: flex;\n    flex-direction: column;\n    border-radius: 12px;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 500ms;\n    min-height: 112px;\n    height: 100%;\n    width: 303px;\n  }\n\n  .x-related-prompt-selected {\n    width: 100% !important;\n    min-height: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n\n    &__button {\n      width: 100% !important;\n    }\n  }\n\n  .x-related-prompt__button {\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    justify-content: space-between;\n    align-items: start;\n    text-align: start;\n    padding: 16px;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 500ms;\n    flex-grow: 1;\n    width: 303px;\n  }\n\n  .x-related-prompt__button-info {\n    display: flex;\n    min-height: 32px;\n  }\n\n  @media (max-width: 743px) {\n    .x-related-prompt {\n      width: 204px;\n      &__button {\n        width: 204px;\n      }\n    }\n  }\n\n  .x-no-scrollbar::-webkit-scrollbar {\n    display: none;\n  }\n\n  .x-no-scrollbar {\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  .x-typewritter-initial {\n    color: #0000;\n    background: linear-gradient(-90deg, transparent 5px, #0000 0) 10px 0,\n      linear-gradient(#575757 0 0) 0 0;\n    background-size: 0 200%;\n    -webkit-background-clip: padding-box, text;\n    background-clip: padding-box, text;\n    background-repeat: no-repeat;\n  }\n\n  .x-typewritter-animation {\n    animation: typewritter calc(var(--suggestion-text-length) * 0.05s)\n      steps(var(--suggestion-text-length)) forwards;\n  }\n\n  @keyframes typewritter {\n    from {\n      background-size: 0 200%;\n    }\n    to {\n      background-size: calc(var(--suggestion-text-length) * 1ch) 200%;\n    }\n  }\n\n  .x-staggered-initial {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  .x-staggered-animation {\n    animation: fadeInUp 0.6s forwards;\n  }\n\n  @keyframes fadeInUp {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgEE,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;IAC7B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,EAAE,aAAa,EAAE,cAAc;AAC3C,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,MAAK;AACnB,KAAA;IACD,KAAK,GAAA;QACH,MAAM,EAAE,cAAc,EAAE,cAAa,EAAI,GAAE,QAAQ,CAAC,gBAAgB,EAAE;YACpE,gBAAgB;YAChB,gBAAe;AAChB,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,mBAAkB,GAAI,GAAG,EAAW,CAAA;AAC1C,QAAA,MAAM,iBAAgB,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;QAEpC,MAAM,QAAS,GAAE,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;AACrD,YAAA,iBAAiB,CAAC,KAAM,GAAE,KAAK,CAAC,cAAc,CAAA;AAChD,SAAC,CAAC,CAAA;QAEF,SAAS,CAAC,MAAM;AACd,YAAA,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAgB,CAAC,CAAA;AACxD,SAAC,CAAC,CAAA;QAEF,WAAW,CAAC,MAAM;YAChB,QAAQ,CAAC,UAAU,EAAE,CAAA;AACvB,SAAC,CAAC,CAAA;AAEF,QAAA,MAAM,UAAW,GAAE,CAAC,KAAa,KAAc,cAAc,CAAC,KAAI,KAAM,KAAK,CAAA;AAE7E,QAAA,MAAM,UAAW,GAAE,CAAC,KAAa,KAC/B,cAAc,CAAC,KAAI,KAAM,CAAC,CAAA,IAAK,cAAc,CAAC,KAAM,KAAI,KAAK,CAAA;QAE/D,OAAO;YACL,iBAAiB;YACjB,UAAU;YACV,UAAU;YACV,cAAc;YACd,cAAc;YACd,mBAAkB;SACnB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"related-prompts-tag-list.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <SlidingPanel\n    :key=\"x.query.search\"\n    :reset-on-content-change=\"false\"\n    :button-class=\"buttonClass\"\n    scroll-container-class=\"x-related-prompts-tag-list-scroll-container\"\n  >\n    <template #sliding-panel-left-button>\n      <!-- \n      @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel. \n      -->\n      <slot name=\"sliding-panel-left-button\" />\n    </template>\n    <transition-group\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\n      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n    >\n      <li\n        v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n        ref=\"listItems\"\n        :key=\"relatedPrompt.suggestionText\"\n        class=\"x-related-prompts-tag-list-item\"\n        :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n        :data-index=\"index\"\n        :style=\"isAnimating && { pointerEvents: 'none' }\"\n        data-test=\"related-prompts-tag-list-item\"\n      >\n        <!--\n         @slot - The slot to render related prompt information.\n         @prop {Object} relatedPrompt - The related prompt object.\n         @prop {Function} onSelect - The function to select the related prompt.\n         @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n         -->\n        <slot\n          :relatedPrompt=\"relatedPrompt\"\n          :onSelect=\"() => onSelect(index)\"\n          :isSelected=\"isSelected(index)\"\n        >\n          <RelatedPrompt\n            @click=\"onSelect(index)\"\n            :related-prompt=\"relatedPrompt\"\n            :selected=\"isSelected(index)\"\n          />\n        </slot>\n      </li>\n    </transition-group>\n    <template #sliding-panel-right-button>\n      <!-- \n      @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel. \n      -->\n      <slot name=\"sliding-panel-right-button\" />\n    </template>\n  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, ref, watch } from 'vue';\n  import SlidingPanel from '../../../components/sliding-panel.vue';\n  import { relatedPromptsXModule } from '../x-module';\n  import { use$x, useState } from '../../../composables';\n  import RelatedPrompt from './related-prompt.vue';\n\n  /**\n   * This component shows the list of `RelatedPrompts` components.\n   *\n   * If the default slot is reimplemented in the consumer, `onSelect` function will be\n   * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedPromptsTagList',\n    xModule: relatedPromptsXModule.name,\n    components: { RelatedPrompt, SlidingPanel },\n    props: {\n      /**\n       * The CSS class for the left and right button of the sliding panel.\n       *\n       * @public\n       */\n      buttonClass: String,\n      /**\n       * The CSS class for all the related prompt wrapper elements.\n       *\n       * @public\n       */\n      tagClass: String,\n      /**\n       * Array of colors to apply to the related prompts. It will be applied to tag\n       * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n       *\n       * @public\n       */\n      tagColors: Array as PropType<string[]>,\n      /**\n       * The duration of the total animation in milliseconds.\n       *\n       * @public\n       */\n      animationDurationInMs: {\n        type: Number,\n        default: 700\n      }\n    },\n    setup(props) {\n      const x = use$x();\n      const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n        'relatedPrompts',\n        'selectedPrompt'\n      ]);\n\n      const clickedListItemIndex = ref<number | null>(null);\n      const initialOffsetLefts: Record<number, number> = {};\n      const isAnimating = ref(false);\n      const listItems = ref<HTMLElement[]>([]);\n\n      const sortedListItems = computed<HTMLElement[]>(() =>\n        [...listItems.value].sort(\n          (a: HTMLElement, b: HTMLElement) =>\n            Number.parseInt(b.getAttribute('data-index')!) -\n            Number.parseInt(a.getAttribute('data-index')!)\n        )\n      );\n\n      // The duration of a single animation (enter or leave) in milliseconds\n      // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n      // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n      const singleAnimationDurationInMs = computed(\n        () =>\n          props.animationDurationInMs /\n          (clickedListItemIndex.value !== null\n            ? relatedPrompts.value.length - 1\n            : relatedPrompts.value.length)\n      );\n\n      const indexRelatedPrompts = computed(() =>\n        (relatedPrompts.value as RelatedPromptModel[]).map(\n          (relatedPrompt: RelatedPromptModel, index: number) => ({\n            ...relatedPrompt,\n            index\n          })\n        )\n      );\n\n      const visibleRelatedPrompts = computed(() => {\n        return selectedPromptIndex.value !== -1\n          ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n          : indexRelatedPrompts.value;\n      });\n\n      let timeOutId: number;\n      const resetTransitionStyle = () => {\n        if (timeOutId) {\n          clearTimeout(timeOutId);\n        }\n\n        isAnimating.value = true;\n        timeOutId = +setTimeout(() => {\n          isAnimating.value = false;\n          clickedListItemIndex.value = null;\n\n          sortedListItems.value.forEach(element => {\n            element.style.cssText\n              .split(';')\n              .map(rule => rule.split(':')[0]?.trim())\n              .forEach(property => {\n                if (property !== 'width') {\n                  element.style.removeProperty(property);\n                }\n              });\n          });\n        }, props.animationDurationInMs);\n      };\n\n      const onSelect = (selectedIndex: number): void => {\n        resetTransitionStyle();\n\n        clickedListItemIndex.value = selectedIndex;\n        const selected: HTMLElement = sortedListItems.value.find(\n          element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n        )!;\n\n        // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n        if (selectedPromptIndex.value === -1) {\n          // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n          // sorted in descending order by index.\n          sortedListItems.value.forEach(element => {\n            const index = Number.parseInt(element.getAttribute('data-index')!);\n\n            initialOffsetLefts[index] = element.offsetLeft;\n            element.style.left = `${element.offsetLeft}px`;\n            element.style.position = 'absolute';\n            element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n            if (index !== selectedIndex) {\n              element.style.opacity = '1';\n              element.style.transitionDelay = `${\n                (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n              }ms`;\n            }\n          });\n\n          // Synchronize the transition delay of the selected element with the last\n          // element to leave\n          selected.style.transitionDelay = `${\n            (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n            singleAnimationDurationInMs.value\n          }ms`;\n\n          // Trigger the animation (selecting) for the selected element\n          requestAnimationFrame(() => {\n            const maxWidth = getComputedStyle(selected).maxWidth;\n\n            selected.style.left = '0px';\n            selected.style.setProperty(\n              'width',\n              `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n              'important'\n            );\n          });\n        } else {\n          // Prepare the selected element for the deselecting animation\n          selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n          selected.style.left = '0px';\n          selected.style.position = 'absolute';\n\n          // Trigger the animation (deselecting) for the selected element\n          selected.style.removeProperty('width');\n          requestAnimationFrame(() => {\n            selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n          });\n        }\n\n        x.emit('UserSelectedARelatedPrompt', selectedIndex);\n      };\n\n      const onBeforeEnter = (el: Element) => {\n        const element = el as HTMLElement;\n        const index = Number.parseInt(element.getAttribute('data-index')!);\n\n        // Prepare the element for the enter animation\n        element.style.opacity = '0';\n        element.style.transform = 'translateY(5px)';\n        element.style.transitionDelay = `${\n          (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n            ? index - 1\n            : index) * singleAnimationDurationInMs.value\n        }ms`;\n        element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n      };\n\n      const onEnter = (el: Element, done: () => void) => {\n        const element = el as HTMLElement;\n        const index = Number.parseInt(element.getAttribute('data-index')!);\n\n        // Also part of the preparation for the enter animation, but it needs to be done\n        // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n        element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n        // trigger enter animation\n        requestAnimationFrame(() => {\n          element.style.opacity = '1';\n          element.style.position = 'absolute';\n          element.style.transform = 'translateY(0)';\n        });\n\n        done();\n      };\n\n      const onLeave = (el: Element, done: () => void) => {\n        const element = el as HTMLElement;\n\n        // trigger leave animation\n        requestAnimationFrame(() => {\n          element.style.opacity = '0';\n          element.style.transform = 'translateY(5px)';\n        });\n\n        // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n        setTimeout(done, props.animationDurationInMs);\n      };\n\n      const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n      // Changing the query will trigger the appear animation, so we need to reset the\n      // style after it finishes\n      watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n      return {\n        isSelected,\n        onSelect,\n        onBeforeEnter,\n        onEnter,\n        onLeave,\n        selectedPromptIndex,\n        visibleRelatedPrompts,\n        listItems,\n        isAnimating,\n        x\n      };\n    }\n  });\n</script>\n<style lang=\"css\">\n  .x-related-prompts-tag-list-scroll-container {\n    height: 100%;\n    position: relative;\n  }\n  .x-related-prompts-tag-list {\n    display: flex;\n    gap: 16px;\n    min-width: 100%;\n  }\n  .x-related-prompts-tag-list-item {\n    height: 100%;\n  }\n</style>\n"],"names":[],"mappings":"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"}

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue3.js

@@ -1,6 +1,6 @@
 import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-related-prompt__sliding-panel-content{display:flex;gap:8px}.x-related-prompt__sliding-panel-content-selected{width:100%}.x-related-prompt{border-radius:12px;display:flex;flex-direction:column;height:100%;min-height:112px;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:303px}.x-related-prompt-selected{border-bottom-left-radius:0;border-bottom-right-radius:0;min-height:0;width:100%!important}.x-related-prompt-selected__button{width:100%!important}[dir=ltr] .x-related-prompt__button{text-align:left}[dir=rtl] .x-related-prompt__button{text-align:right}.x-related-prompt__button{align-items:start;display:flex;flex-direction:row;flex-grow:1;gap:12px;justify-content:space-between;padding:16px;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:303px}.x-related-prompt__button-info{display:flex;min-height:32px}@media (max-width:743px){.x-related-prompt,.x-related-prompt__button{width:204px}}.x-no-scrollbar::-webkit-scrollbar{display:none}.x-no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.x-typewritter-initial{background:linear-gradient(-90deg,transparent 5px,#0000 0) 10px 0,linear-gradient(#575757 0 0) 0 0;background-clip:padding-box,text;background-repeat:no-repeat;background-size:0 200%;color:#0000}.x-typewritter-animation{animation:typewritter calc(var(--suggestion-text-length)*.05s) steps(var(--suggestion-text-length)) forwards}@keyframes typewritter{0%{background-size:0 200%}to{background-size:calc(var(--suggestion-text-length)*1ch) 200%}}.x-staggered-initial{opacity:0;transform:translateY(20px)}.x-staggered-animation{animation:fadeInUp .6s forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}";
+var css = ".x-related-prompts-tag-list-scroll-container{height:100%;position:relative}.x-related-prompts-tag-list{display:flex;gap:16px;min-width:100%}.x-related-prompts-tag-list-item{height:100%}";
 injectCss(css);
 
 export { css, css as default };

package/js/x-modules/scroll/components/scroll-to-top.vue2.js

@@ -96,6 +96,7 @@ import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
 import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-loader-button.vue3.js';
 import '../../../components/page-selector.vue2.js';
 import '../../../components/page-selector.vue3.js';
 import { scrollXModule } from '../x-module.js';

package/js/x-modules/scroll/components/scroll-to-top.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      class=\"x-scroll-to-top x-button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { NoAnimation, BaseEventButton } from '../../../components';\n  import { XEventsTypes } from '../../../wiring';\n  import { scrollXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n  import { useState } from '../../../composables';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * The `ScrollToTop` component is a button that the user can click to make a container scroll\n   * up to its initial position.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ScrollToTop',\n    xModule: scrollXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /**\n       * Animation to use for showing/hiding the button.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /**\n       * Threshold in pixels from the top to show the button.\n       *\n       * @public\n       */\n      thresholdPx: Number,\n      /**\n       * Id of the target scroll component.\n       *\n       * @public\n       */\n      scrollId: {\n        type: String,\n        default: MainScrollId\n      }\n    },\n    setup(props) {\n      /**\n       * State of all the scroll components in this module.\n       *\n       * @internal\n       */\n      // TODO: Directly retrieve the needed data in this computed property\n      const { data } = useState('scroll', ['data']);\n\n      /**\n       * The scroll data retrieved for this component.\n       *\n       * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n       * passed. Otherwise it returns `null`.\n       * @internal\n       */\n      const scrollData = computed(() => {\n        return props.scrollId && data.value[props.scrollId]\n          ? data.value[props.scrollId]\n          : {\n              position: 0,\n              direction: 'UP',\n              hasReachedStart: false,\n              hasAlmostReachedEnd: false,\n              hasReachedEnd: false\n            };\n      });\n\n      /**\n       * Event that will be emitted when the scroll to top is clicked.\n       *\n       * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n       * @internal\n       */\n      const events = computed(\n        (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })\n      );\n\n      /**\n       * Checks if the thresholdPx prop has been provided and if it is a number.\n       *\n       * @returns If the thresholdPx is a number or not.\n       * @internal\n       */\n      const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');\n\n      /**\n       * Checks if the threshold has been reached in case the threshold strategy is in use.\n       *\n       * @returns If the scrollTop is bigger than the thresholdPx.\n       * @internal\n       */\n      const isThresholdReached = computed(\n        () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!\n      );\n\n      /**\n       * Returns if the scroll has almost reached its end or not.\n       *\n       * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n       * @internal\n       */\n      const hasAlmostReachedScrollEnd = computed(\n        () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'\n      );\n\n      /**\n       * Whether if the button is visible or not depending on the strategy being used.\n       *\n       * @returns If the button should be visible or not.\n       * @internal\n       */\n      const isVisible = computed(() =>\n        useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value\n      );\n\n      return {\n        events,\n        isVisible\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the scroll\n  that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC1B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAW;AACtB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;AAEF,QAAA,MAAM,EAAE,IAAK,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE7C;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM;YAChC,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAI;iBACpB,CAAA;AACP,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,UAAU,CAAA,CACzE,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,uBAAuB,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,WAAU,KAAM,QAAQ,CAAC,CAAA;AAElF;;;;;AAKE;QACF,MAAM,kBAAmB,GAAE,QAAQ,CACjC,MAAM,oBAAoB,CAAC,SAAS,UAAU,CAAC,KAAK,CAAC,QAAS,GAAE,KAAK,CAAC,WAAW,CAClF,CAAA;AAED;;;;;AAKE;QACF,MAAM,yBAA0B,GAAE,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAU,KAAI,MAAK,CACnF,CAAA;AAED;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAM,GAAE,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAI,CACvF,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"scroll-to-top.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      class=\"x-scroll-to-top x-button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { NoAnimation, BaseEventButton } from '../../../components';\n  import { XEventsTypes } from '../../../wiring';\n  import { scrollXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n  import { useState } from '../../../composables';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * The `ScrollToTop` component is a button that the user can click to make a container scroll\n   * up to its initial position.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ScrollToTop',\n    xModule: scrollXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /**\n       * Animation to use for showing/hiding the button.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /**\n       * Threshold in pixels from the top to show the button.\n       *\n       * @public\n       */\n      thresholdPx: Number,\n      /**\n       * Id of the target scroll component.\n       *\n       * @public\n       */\n      scrollId: {\n        type: String,\n        default: MainScrollId\n      }\n    },\n    setup(props) {\n      /**\n       * State of all the scroll components in this module.\n       *\n       * @internal\n       */\n      // TODO: Directly retrieve the needed data in this computed property\n      const { data } = useState('scroll', ['data']);\n\n      /**\n       * The scroll data retrieved for this component.\n       *\n       * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n       * passed. Otherwise it returns `null`.\n       * @internal\n       */\n      const scrollData = computed(() => {\n        return props.scrollId && data.value[props.scrollId]\n          ? data.value[props.scrollId]\n          : {\n              position: 0,\n              direction: 'UP',\n              hasReachedStart: false,\n              hasAlmostReachedEnd: false,\n              hasReachedEnd: false\n            };\n      });\n\n      /**\n       * Event that will be emitted when the scroll to top is clicked.\n       *\n       * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n       * @internal\n       */\n      const events = computed(\n        (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })\n      );\n\n      /**\n       * Checks if the thresholdPx prop has been provided and if it is a number.\n       *\n       * @returns If the thresholdPx is a number or not.\n       * @internal\n       */\n      const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');\n\n      /**\n       * Checks if the threshold has been reached in case the threshold strategy is in use.\n       *\n       * @returns If the scrollTop is bigger than the thresholdPx.\n       * @internal\n       */\n      const isThresholdReached = computed(\n        () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!\n      );\n\n      /**\n       * Returns if the scroll has almost reached its end or not.\n       *\n       * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n       * @internal\n       */\n      const hasAlmostReachedScrollEnd = computed(\n        () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'\n      );\n\n      /**\n       * Whether if the button is visible or not depending on the strategy being used.\n       *\n       * @returns If the button should be visible or not.\n       * @internal\n       */\n      const isVisible = computed(() =>\n        useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value\n      );\n\n      return {\n        events,\n        isVisible\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the scroll\n  that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC1B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAW;AACtB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;AAEF,QAAA,MAAM,EAAE,IAAK,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE7C;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM;YAChC,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAI;iBACpB,CAAA;AACP,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,UAAU,CAAA,CACzE,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,uBAAuB,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,WAAU,KAAM,QAAQ,CAAC,CAAA;AAElF;;;;;AAKE;QACF,MAAM,kBAAmB,GAAE,QAAQ,CACjC,MAAM,oBAAoB,CAAC,SAAS,UAAU,CAAC,KAAK,CAAC,QAAS,GAAE,KAAK,CAAC,WAAW,CAClF,CAAA;AAED;;;;;AAKE;QACF,MAAM,yBAA0B,GAAE,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAU,KAAI,MAAK,CACnF,CAAA;AAED;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAM,GAAE,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAI,CACvF,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.35",
+  "version": "6.0.0-alpha.37",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -138,5 +138,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "782271b380929cc378d5414ebeaa98d1e4cd7858"
+  "gitHead": "f1734e8e3cf41334b6c100a98bce16b0d4140148"
 }