@empathyco/x-components 6.0.0-alpha.5 → 6.0.0-alpha.51

package/js/x-modules/related-prompts/wiring.js

@@ -0,0 +1,99 @@
+import { namespacedWireCommit, namespacedWireCommitWithoutPayload, namespacedWireDispatch, namespacedWireDispatchWithoutPayload } from '../../wiring/namespaced-wires.factory.js';
+import { createWiring } from '../../wiring/wiring.utils.js';
+
+/**
+ * `relatedPrompts` {@link XModuleName | XModule name}.
+ */
+const moduleName = 'relatedPrompts';
+/**
+ * WireCommit for {@link RelatedPromptsXModule}.
+ */
+const wireCommit = namespacedWireCommit(moduleName);
+/**
+ * WireCommitWithoutPayload for {@link RelatedPromptsXModule}.
+ */
+const wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName);
+/**
+ * WireDispatch for {@link RelatedPromptsXModule}.
+ */
+const wireDispatch = namespacedWireDispatch(moduleName);
+/**
+ * WireDispatchWithoutPayload for {@link RelatedPromptsXModule}.
+ */
+const wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);
+/**
+ * Sets the related prompts state `query`.
+ */
+const setRelatedPromptsQuery = wireCommit('setQuery');
+/**
+ * Sets the related prompts state `selectedPrompt`.
+ */
+const setSelectedPromptWire = wireCommit('setSelectedPrompt');
+/**
+ * Sets the related prompts state `selectedQuery`.
+ */
+const setSelectedQueryWire = wireCommit('setSelectedQuery');
+/**
+ * Sets the related prompts state `query` from the payload.
+ */
+const setRelatedPromptsQueryFromPayload = wireCommit('setQuery', ({ eventPayload: { query } }) => query);
+/**
+ * Sets the related prompts state `params`.
+ */
+const setRelatedPromptsExtraParams = wireCommit('setParams');
+/**
+ * Resets the related prompts state.
+ */
+const resetRelatedPromptsStateWire = wireCommitWithoutPayload('resetRelatedPromptsState');
+/**
+ * Resets the selected related prompt number.
+ */
+const resetSelectedPromptWire = wireCommitWithoutPayload('resetSelectedPrompt');
+/**
+ * Fetches and saves the related prompts response.
+ */
+const fetchAndSaveRelatedPromptsResponseWire = wireDispatch('fetchAndSaveRelatedPrompts');
+/**
+ * Cancels the fetch and save related prompts response.
+ */
+const cancelFetchAndSaveSearchResponseWire = wireDispatchWithoutPayload('cancelFetchAndSaveRelatedPrompts');
+/**
+ * Wiring configuration for the {@link RelatedPromptsXModule | related prompts module}.
+ *
+ * @internal
+ */
+const relatedPromptsWiring = createWiring({
+    ParamsLoadedFromUrl: {
+        setRelatedPromptsQueryFromPayload
+    },
+    UserAcceptedAQuery: {
+        setRelatedPromptsQuery
+    },
+    UserClearedQuery: {
+        cancelFetchAndSaveSearchResponseWire,
+        resetRelatedPromptsStateWire,
+        setRelatedPromptsQuery
+    },
+    RelatedPromptsRequestUpdated: {
+        fetchAndSaveRelatedPromptsResponseWire
+    },
+    ExtraParamsChanged: {
+        setRelatedPromptsExtraParams
+    },
+    UserSelectedARelatedPrompt: {
+        setSelectedPromptWire
+    },
+    UserSelectedARelatedPromptQuery: {
+        setSelectedQueryWire
+    },
+    UserAcceptedAQueryPreview: {
+        setRelatedPromptsQueryFromPayload,
+        resetSelectedPromptWire
+    },
+    SearchRequestChanged: {
+        resetSelectedPromptWire
+    }
+});
+
+export { relatedPromptsWiring };
+//# sourceMappingURL=wiring.js.map

package/js/x-modules/related-prompts/wiring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/related-prompts/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireCommitWithoutPayload,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport {\n  NamespacedWireCommit,\n  NamespacedWireCommitWithoutPayload\n} from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `relatedPrompts` {@link XModuleName | XModule name}.\n */\nconst moduleName = 'relatedPrompts';\n\n/**\n * WireCommit for {@link RelatedPromptsXModule}.\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n\n/**\n * WireCommitWithoutPayload for {@link RelatedPromptsXModule}.\n */\nconst wireCommitWithoutPayload: NamespacedWireCommitWithoutPayload<typeof moduleName> =\n  namespacedWireCommitWithoutPayload(moduleName);\n\n/**\n * WireDispatch for {@link RelatedPromptsXModule}.\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * WireDispatchWithoutPayload for {@link RelatedPromptsXModule}.\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Sets the related prompts state `query`.\n */\nconst setRelatedPromptsQuery = wireCommit('setQuery');\n\n/**\n * Sets the related prompts state `selectedPrompt`.\n */\nconst setSelectedPromptWire = wireCommit('setSelectedPrompt');\n\n/**\n * Sets the related prompts state `selectedQuery`.\n */\nconst setSelectedQueryWire = wireCommit('setSelectedQuery');\n\n/**\n * Sets the related prompts state `query` from the payload.\n */\nconst setRelatedPromptsQueryFromPayload = wireCommit(\n  'setQuery',\n  ({ eventPayload: { query } }) => query\n);\n\n/**\n * Sets the related prompts state `params`.\n */\nconst setRelatedPromptsExtraParams = wireCommit('setParams');\n\n/**\n * Resets the related prompts state.\n */\nconst resetRelatedPromptsStateWire = wireCommitWithoutPayload('resetRelatedPromptsState');\n\n/**\n * Resets the selected related prompt number.\n */\nconst resetSelectedPromptWire = wireCommitWithoutPayload('resetSelectedPrompt');\n\n/**\n * Fetches and saves the related prompts response.\n */\nconst fetchAndSaveRelatedPromptsResponseWire = wireDispatch('fetchAndSaveRelatedPrompts');\n\n/**\n * Cancels the fetch and save related prompts response.\n */\nconst cancelFetchAndSaveSearchResponseWire = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveRelatedPrompts'\n);\n\n/**\n * Wiring configuration for the {@link RelatedPromptsXModule | related prompts module}.\n *\n * @internal\n */\nexport const relatedPromptsWiring = createWiring({\n  ParamsLoadedFromUrl: {\n    setRelatedPromptsQueryFromPayload\n  },\n  UserAcceptedAQuery: {\n    setRelatedPromptsQuery\n  },\n  UserClearedQuery: {\n    cancelFetchAndSaveSearchResponseWire,\n    resetRelatedPromptsStateWire,\n    setRelatedPromptsQuery\n  },\n  RelatedPromptsRequestUpdated: {\n    fetchAndSaveRelatedPromptsResponseWire\n  },\n  ExtraParamsChanged: {\n    setRelatedPromptsExtraParams\n  },\n  UserSelectedARelatedPrompt: {\n    setSelectedPromptWire\n  },\n  UserSelectedARelatedPromptQuery: {\n    setSelectedQueryWire\n  },\n  UserAcceptedAQueryPreview: {\n    setRelatedPromptsQueryFromPayload,\n    resetSelectedPromptWire\n  },\n  SearchRequestChanged: {\n    resetSelectedPromptWire\n  }\n});\n"],"names":[],"mappings":";;;AAYA;;AAEG;AACH,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAEpC;;AAEG;AACH,MAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAE7F;;AAEG;AACH,MAAM,wBAAwB,GAC5B,kCAAkC,CAAC,UAAU,CAAC,CAAC;AAEjD;;AAEG;AACH,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;AAEG;AACH,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;AAEG;AACH,MAAM,sBAAsB,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;AAEtD;;AAEG;AACH,MAAM,qBAAqB,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;AAE9D;;AAEG;AACH,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAE5D;;AAEG;AACH,MAAM,iCAAiC,GAAG,UAAU,CAClD,UAAU,EACV,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,CACvC,CAAC;AAEF;;AAEG;AACH,MAAM,4BAA4B,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAE7D;;AAEG;AACH,MAAM,4BAA4B,GAAG,wBAAwB,CAAC,0BAA0B,CAAC,CAAC;AAE1F;;AAEG;AACH,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,qBAAqB,CAAC,CAAC;AAEhF;;AAEG;AACH,MAAM,sCAAsC,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;AAE1F;;AAEG;AACH,MAAM,oCAAoC,GAAG,0BAA0B,CACrE,kCAAkC,CACnC,CAAC;AAEF;;;;AAIG;AACI,MAAM,oBAAoB,GAAG,YAAY,CAAC;AAC/C,IAAA,mBAAmB,EAAE;QACnB,iCAAiC;AAClC,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,sBAAsB;AACvB,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,oCAAoC;QACpC,4BAA4B;QAC5B,sBAAsB;AACvB,KAAA;AACD,IAAA,4BAA4B,EAAE;QAC5B,sCAAsC;AACvC,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,4BAA4B;AAC7B,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,qBAAqB;AACtB,KAAA;AACD,IAAA,+BAA+B,EAAE;QAC/B,oBAAoB;AACrB,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,iCAAiC;QACjC,uBAAuB;AACxB,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,uBAAuB;AACxB,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/related-prompts/x-module.js

@@ -0,0 +1,21 @@
+import { XPlugin } from '../../plugins/x-plugin.js';
+import { relatedPromptsXStoreModule } from './store/module.js';
+import { relatedPromptsStoreEmitters } from './store/emitters.js';
+import { relatedPromptsWiring } from './wiring.js';
+
+/**
+ * Related Prompts {@link XModule} implementation. This module is auto-registered as soon as you
+ * import any component from the `related-prompts` entry point.
+ *
+ * @public
+ */
+const relatedPromptsXModule = {
+    name: 'relatedPrompts',
+    storeModule: relatedPromptsXStoreModule,
+    storeEmitters: relatedPromptsStoreEmitters,
+    wiring: relatedPromptsWiring
+};
+XPlugin.registerXModule(relatedPromptsXModule);
+
+export { relatedPromptsXModule };
+//# sourceMappingURL=x-module.js.map

package/js/x-modules/related-prompts/x-module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/related-prompts/x-module.ts"],"sourcesContent":["import { XPlugin } from '../../plugins/x-plugin';\nimport { XModule } from '../x-modules.types';\nimport { RelatedPromptsXStoreModule } from './store/types';\nimport { relatedPromptsXStoreModule } from './store/module';\nimport { relatedPromptsStoreEmitters } from './store/emitters';\nimport { relatedPromptsWiring } from './wiring';\n\n/**\n * RelatedPrompts {@link XModule} alias.\n *\n * @public\n */\nexport type RelatedPromptsXModule = XModule<RelatedPromptsXStoreModule>;\n\n/**\n * Related Prompts {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `related-prompts` entry point.\n *\n * @public\n */\nexport const relatedPromptsXModule: RelatedPromptsXModule = {\n  name: 'relatedPrompts',\n  storeModule: relatedPromptsXStoreModule,\n  storeEmitters: relatedPromptsStoreEmitters,\n  wiring: relatedPromptsWiring\n};\n\nXPlugin.registerXModule(relatedPromptsXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,qBAAqB,GAA0B;AAC1D,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,aAAa,EAAE,2BAA2B;AAC1C,IAAA,MAAM,EAAE,oBAAoB;EAC5B;AAEF,OAAO,CAAC,eAAe,CAAC,qBAAqB,CAAC;;;;"}

package/js/x-modules/related-tags/components/related-tag.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './related-tag.vue2.js';
-import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -12,7 +12,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-test": "related-tag"
     },
     [
-      createCommentVNode("\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      "),
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ relatedTag: _ctx.relatedTag, isSelected: _ctx.isSelected, shouldHighlightCurated: _ctx.shouldHighlightCurated })), () => [
         createTextVNode(
           toDisplayString(_ctx.relatedTag.tag),

package/js/x-modules/related-tags/components/related-tag.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tag.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonEl\"\n    @click=\"clickRelatedTag\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n  >\n    <!--\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      -->\n    <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, PropType, ref } from 'vue';\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { relatedTagsXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * This component renders a related tag for a query. A related tag is a descriptive keyword\n   * related to the current query to fine-tune the search. For example, if you are searching\n   * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedTag',\n    xModule: relatedTagsXModule.name,\n    props: {\n      /**\n       * Indicates if the curated related tag should be highlighted.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * The related tag model data.\n       *\n       * @public\n       */\n      relatedTag: {\n        type: Object as PropType<RelatedTagModel>,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const buttonEl = ref<HTMLElement | undefined>();\n\n      /**\n       * The selected related tags.\n       *\n       * @internal\n       */\n      const { selectedRelatedTags }: Dictionary<ComputedRef<RelatedTagModel[]>> = useState(\n        'relatedTags',\n        ['selectedRelatedTags']\n      );\n\n      /**\n       * Check if the related tag is selected or not.\n       *\n       * @returns If the related tag is selected.\n       *\n       * @internal\n       */\n      const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag));\n\n      /**\n       * Blurs the related tag if it is selected.\n       *\n       * @public\n       */\n      const blurRelatedTag = () => {\n        if (isSelected.value) {\n          buttonEl.value?.blur();\n        }\n      };\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: buttonEl.value as HTMLElement,\n        feature: 'related_tag'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n        // isSelected value before emitting this selection events.\n        $x.emit(\n          isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n          props.relatedTag,\n          createEventMetadata()\n        );\n        $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata());\n      };\n\n      /**\n       * Handles the click on the button.\n       *\n       * @public\n       */\n      const clickRelatedTag = () => {\n        emitEvents();\n        blurRelatedTag();\n      };\n\n      /**\n       * Check if the related tag is curated and should be highlighted.\n       *\n       * @returns True if the related tag is curated and should be highlighted.\n       *\n       * @internal\n       */\n      const shouldHighlightCurated = computed(\n        () => props.highlightCurated && (props.relatedTag.isCurated ?? false)\n      );\n\n      /**\n       * Adds the dynamic css classes to the component.\n       *\n       * @returns The class to be added to the component.\n       *\n       * @internal\n       */\n      const dynamicClasses = computed(\n        (): VueCSSClasses => ({\n          'x-selected x-related-tag--is-selected': isSelected.value,\n          'x-related-tag--is-curated': shouldHighlightCurated.value\n        })\n      );\n\n      return {\n        buttonEl,\n        dynamicClasses,\n        isSelected,\n        clickRelatedTag,\n        shouldHighlightCurated\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPickedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserSelectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n    <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n  </RelatedTag>\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    },\n    methods: {\n      alertRelatedTag(relatedTag) {\n        alert(`You have clicked the related tag: ${relatedTag.query}`);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;SAEQ,WAAU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACbA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,UAAA;AAAA,MACL,gBAAU,CAAa,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,IAAA,CAAA,eAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAGvB,MAAA,WAAA,EAAA,aAAA;AAAA,KAAA;AAMA,IAAA;AAAA,MAAAC,kBAAA,CAdJ,2SAcuF,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,sBAAA,EAAA,IAAA,CAAA,sBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"related-tag.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonEl\"\n    @click=\"clickRelatedTag\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n  >\n    <!--\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      -->\n    <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, PropType, ref } from 'vue';\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { relatedTagsXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * This component renders a related tag for a query. A related tag is a descriptive keyword\n   * related to the current query to fine-tune the search. For example, if you are searching\n   * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedTag',\n    xModule: relatedTagsXModule.name,\n    props: {\n      /**\n       * Indicates if the curated related tag should be highlighted.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * The related tag model data.\n       *\n       * @public\n       */\n      relatedTag: {\n        type: Object as PropType<RelatedTagModel>,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const buttonEl = ref<HTMLElement | undefined>();\n\n      /**\n       * The selected related tags.\n       *\n       * @internal\n       */\n      const { selectedRelatedTags }: Dictionary<ComputedRef<RelatedTagModel[]>> = useState(\n        'relatedTags',\n        ['selectedRelatedTags']\n      );\n\n      /**\n       * Check if the related tag is selected or not.\n       *\n       * @returns If the related tag is selected.\n       *\n       * @internal\n       */\n      const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag));\n\n      /**\n       * Blurs the related tag if it is selected.\n       *\n       * @public\n       */\n      const blurRelatedTag = () => {\n        if (isSelected.value) {\n          buttonEl.value?.blur();\n        }\n      };\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: buttonEl.value as HTMLElement,\n        feature: 'related_tag'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n        // isSelected value before emitting this selection events.\n        $x.emit(\n          isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n          props.relatedTag,\n          createEventMetadata()\n        );\n        $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata());\n      };\n\n      /**\n       * Handles the click on the button.\n       *\n       * @public\n       */\n      const clickRelatedTag = () => {\n        emitEvents();\n        blurRelatedTag();\n      };\n\n      /**\n       * Check if the related tag is curated and should be highlighted.\n       *\n       * @returns True if the related tag is curated and should be highlighted.\n       *\n       * @internal\n       */\n      const shouldHighlightCurated = computed(\n        () => props.highlightCurated && (props.relatedTag.isCurated ?? false)\n      );\n\n      /**\n       * Adds the dynamic css classes to the component.\n       *\n       * @returns The class to be added to the component.\n       *\n       * @internal\n       */\n      const dynamicClasses = computed(\n        (): VueCSSClasses => ({\n          'x-selected x-related-tag--is-selected': isSelected.value,\n          'x-related-tag--is-curated': shouldHighlightCurated.value\n        })\n      );\n\n      return {\n        buttonEl,\n        dynamicClasses,\n        isSelected,\n        clickRelatedTag,\n        shouldHighlightCurated\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPickedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserSelectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n    <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n  </RelatedTag>\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    },\n    methods: {\n      alertRelatedTag(relatedTag) {\n        alert(`You have clicked the related tag: ${relatedTag.query}`);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;SAEQ,WAAU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACbA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,UAAA;AAAA,MACL,gBAAU,CAAa,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,IAAA,CAAA,eAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;MASvB,WAA6F,EAAA,aAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/related-tags/components/related-tags.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './related-tags.vue2.js';
-import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot, mergeProps, createVNode, normalizeClass } from 'vue';
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, mergeProps, createVNode, normalizeClass, createCommentVNode } from 'vue';
 import './related-tags.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -21,7 +21,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-related-tags__item",
             "data-test": "related-tag-item"
           }, [
-            createCommentVNode("\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       "),
             renderSlot(_ctx.$slots, "related-tag", mergeProps({ ref_for: true }, { relatedTag, highlightCurated: _ctx.highlightCurated }), () => [
               createVNode(_component_RelatedTag, {
                 highlightCurated: _ctx.highlightCurated,
@@ -29,8 +28,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 class: normalizeClass(_ctx.itemClass)
               }, {
                 default: withCtx(({ relatedTag: relatedTag2, isSelected, shouldHighlightCurated }) => [
-                  createCommentVNode(" eslint-disable max-len "),
-                  createCommentVNode("\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            "),
                   renderSlot(_ctx.$slots, "related-tag-content", mergeProps({ ref_for: true }, { relatedTag: relatedTag2, isSelected, shouldHighlightCurated }), void 0, true)
                 ]),
                 _: 2

package/js/x-modules/related-tags/components/related-tags.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlightCurated=\"highlightCurated\"\n          :relatedTag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { relatedTagsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/index';\n  import { useGetter } from '../../../composables/use-getter';\n  import RelatedTag from './related-tag.vue';\n\n  /**\n   * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n   * default to select from after a query is performed to fine-tune search.\n   * For example, if you are searching for *lego*, different related tags could be *city*,\n   * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n   * or *lego harry potter*.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedTags',\n    xModule: relatedTagsXModule.name,\n    components: {\n      RelatedTag\n    },\n    props: {\n      /**\n       * Animation component that will be used to animate the suggestion.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Number of related tags to be rendered.\n       *\n       * @public\n       */\n      maxItemsToRender: Number,\n\n      /**\n       * Flag to indicate if the curated tags should be displayed different.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n\n      /** Class inherited by content element. */\n      itemClass: String\n    },\n    setup(props) {\n      const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags', [\n        'relatedTags'\n      ]).relatedTags;\n\n      const relatedTags = computed((): RelatedTagModel[] =>\n        storedRelatedTags.value.slice(0, props.maxItemsToRender)\n      );\n\n      return {\n        relatedTags\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-related-tags {\n    display: flex;\n    flex-flow: row nowrap;\n    list-style: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      RelatedTag\n    }\n  };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      ResultsList\n    }\n  };\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode","_renderSlot","highlightCurated","_mergeProps","_createVNode","itemClass","_normalizeClass","_withCtx","relatedTag"],"mappings":";;;;;;gCAGsBA,gBAAM,CAAA,YAAA,CAAA,CAAA;SAH5B,IAIY,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,gBAAA;AANJ,IAAA,WAAA,EAAA,cAAA;AAAA,GAAA,EAAA;;iBAUY,IAAU,CAAA,EAAAC,kBAAA;AAAA,QAAMC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,UAAA,KAAA;AACjB,UAAA,OAAAL,SAAA,EAAuB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC5B,GAAU,EAAA,UAAA,CAAA,KAAA;AAAA,YAAA,KAAA,EAAA,sBAAA;AAEV,YAAA,WAAA,EAAA,kBAAA;AAAA,WAKA,EAAA;AAAA,YAmBeG,kBAAA,CAAA,2OAAA,CAAA;AAAA,YAAAC,UAAA,CAjBV,aAAkBC,aAAgB,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA;AAAA,cAAAC,WAAA,CACxB,qBAAY,EAAA;AAAA,gBACtB,kBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,UAAAA;AAEG,gBAAA,KAAA,EAAOC,eAAI,IAAY,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;AAEhC,gBAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,EAAA,UAAA,EAAAC,WAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,KAAA;AAAA,kBAMAR,kBAGE,CAAA,0BAAA,CAAA;AAAA,kBAAAA,kBAAA,CAAA,iVAAA,CAAA;AApCd,kBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAAK,WAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAR,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlightCurated=\"highlightCurated\"\n          :relatedTag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { relatedTagsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/index';\n  import { useGetter } from '../../../composables/use-getter';\n  import RelatedTag from './related-tag.vue';\n\n  /**\n   * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n   * default to select from after a query is performed to fine-tune search.\n   * For example, if you are searching for *lego*, different related tags could be *city*,\n   * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n   * or *lego harry potter*.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedTags',\n    xModule: relatedTagsXModule.name,\n    components: {\n      RelatedTag\n    },\n    props: {\n      /**\n       * Animation component that will be used to animate the suggestion.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Number of related tags to be rendered.\n       *\n       * @public\n       */\n      maxItemsToRender: Number,\n\n      /**\n       * Flag to indicate if the curated tags should be displayed different.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n\n      /** Class inherited by content element. */\n      itemClass: String\n    },\n    setup(props) {\n      const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags', [\n        'relatedTags'\n      ]).relatedTags;\n\n      const relatedTags = computed((): RelatedTagModel[] =>\n        storedRelatedTags.value.slice(0, props.maxItemsToRender)\n      );\n\n      return {\n        relatedTags\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-related-tags {\n    display: flex;\n    flex-flow: row nowrap;\n    list-style: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      RelatedTag\n    }\n  };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      ResultsList\n    }\n  };\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot","highlightCurated","_mergeProps","_createVNode","itemClass","_normalizeClass","relatedTag","_createCommentVNode"],"mappings":";;;;;;gCAGsBA,gBAAM,CAAA,YAAA,CAAA,CAAA;SAH5B,IAIY,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,gBAAA;AANJ,IAAA,WAAA,EAAA,cAAA;AAAA,GAAA,EAAA;;iBAUY,IAAU,CAAA,EAAAC,kBAAA;AAAA,QAAMC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,UAAA,KAAA;AACjB,UAAA,OAAAL,SAAA,EAAuB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC5B,GAAU,EAAA,UAAA,CAAA,KAAA;AAAA,YAAA,KAAA,EAAA,sBAAA;YAOV,WAoBO,EAAA,kBAAA;AAAA,WAAA,EAAA;AAlBF,YAAAG,UAAA,CAAA,IAAA,CAAA,MAAA,EAAkBC,aAAgB,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA;AAAA,cAAAC,WAAA,CACxB,qBAAY,EAAA;AAAA,gBACtB,kBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,UAAAA;AAEG,gBAAA,KAAA,EAAOC,eAAI,IAAY,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;;AAzB5C,kBAAAL,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAAI,WAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/related-tags/store/emitters.js

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { createEmitterArrayFilter } from '../../../utils/array.js';
 import { relatedTagsXStoreModule } from './module.js';

package/js/x-modules/related-tags/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/related-tags/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { createEmitterArrayFilter } from '../../../utils/array';\nimport { relatedTagsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the related-tags module.\n *\n * @internal\n */\nexport const relatedTagsEmitters = createStoreEmitters(relatedTagsXStoreModule, {\n  RelatedTagsChanged: state => state.relatedTags,\n  RelatedTagsRequestUpdated: (_, getters) => getters.request,\n  SelectedRelatedTagsChanged: {\n    selector: state => state.selectedRelatedTags,\n    filter: createEmitterArrayFilter('tag')\n  }\n});\n"],"names":[],"mappings":";;;;AAIA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE,KAAK,IAAI,KAAK,CAAC,WAAW;IAC9C,yBAAyB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC1D,IAAA,0BAA0B,EAAE;AAC1B,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,mBAAmB;AAC5C,QAAA,MAAM,EAAE,wBAAwB,CAAC,KAAK,CAAC;AACxC,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/related-tags/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { createEmitterArrayFilter } from '../../../utils/array';\nimport { relatedTagsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the related-tags module.\n *\n * @internal\n */\nexport const relatedTagsEmitters = createStoreEmitters(relatedTagsXStoreModule, {\n  RelatedTagsChanged: state => state.relatedTags,\n  RelatedTagsRequestUpdated: (_, getters) => getters.request,\n  SelectedRelatedTagsChanged: {\n    selector: state => state.selectedRelatedTags,\n    filter: createEmitterArrayFilter('tag')\n  }\n});\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE,KAAK,IAAI,KAAK,CAAC,WAAW;IAC9C,yBAAyB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC1D,IAAA,0BAA0B,EAAE;AAC1B,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,mBAAmB;AAC5C,QAAA,MAAM,EAAE,wBAAwB,CAAC,KAAK,CAAC;AACxC,KAAA;AACF,CAAA;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './scroll-to-top.vue2.js';
-import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -14,7 +14,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         events: _ctx.events
       }, {
         default: withCtx(() => [
-          createCommentVNode(" @slot (Required) Button content with a text, an icon or both "),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3

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

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue.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":["_resolveComponent","animation","isVisible","_createBlock","_resolveDynamicComponent","_withCtx","events","_createCommentVNode","_renderSlot"],"mappings":";;;;;AAYc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAZd,iBACkBC,CAAAA,CAAAA;SAENC,SAAS,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IADjB,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAA,IAAA,CAFJ,wBAIsC,EAAAF,WAAA,CAAA,0BAAA,EAAA;AAAA,QAChC,GAAA,EAAA,CAAA;AAAA,QACA,KAAA,EAAA,0BAAA;AAAA,QACC,WAAQG,EAAAA,eAAAA;AAAAA,QAAAA,YAAAA,EAAAA,eAAAA;AAPf,QAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,OAAA,EAAA;iBAUMD,OAAQ,CAAA,MAAA;AAAA,UAAAE,kBAAA,CAAA,gEAAA,CAAA;AAVd,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,CAAA;AAAA,QAAA,CAAA,EAAA,CAAA;AAAA;AAAA,OAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,IAAAD,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"scroll-to-top.vue.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":["_resolveComponent","animation","isVisible","_createBlock","_resolveDynamicComponent","_withCtx","events","_renderSlot","_createCommentVNode"],"mappings":";;;;;AAYc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAZd,iBACkBC,CAAAA,CAAAA;SAENC,SAAS,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IADjB,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAA,IAAA,CAFJ,wBAIsC,EAAAF,WAAA,CAAA,0BAAA,EAAA;AAAA,QAChC,GAAA,EAAA,CAAA;AAAA,QACA,KAAA,EAAA,0BAAA;AAAA,QACC,WAAQG,EAAAA,eAAAA;AAAAA,QAAAA,YAAAA,EAAAA,eAAAA;AAPf,QAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,OAAA,EAAA;;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,CAAA;AAAA,QAAA,CAAA,EAAA,CAAA;AAAA;AAAA,OAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -82,6 +82,8 @@ import '../../../components/base-grid.vue3.js';
 import '../../../components/base-keyboard-navigation.vue2.js';
 import '../../../components/base-rating.vue2.js';
 import '../../../components/base-rating.vue3.js';
+import '../../../components/base-slider.vue2.js';
+import '../../../components/base-slider.vue3.js';
 import '../../../components/base-switch.vue2.js';
 import '../../../components/base-switch.vue3.js';
 import '../../../components/base-variable-column-grid.vue2.js';
@@ -94,6 +96,10 @@ 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 '../../../components/display-click-provider.vue.js';
 import { scrollXModule } from '../x-module.js';
 import { AnimationProp } from '../../../types/animation-prop.js';
 import '../../../composables/create-use-device.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/js/x-modules/scroll/store/emitters.js

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { scrollXStoreModule } from './module.js';
 

package/js/x-modules/scroll/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/scroll/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { scrollXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the scroll module.\n *\n * @internal\n */\nexport const scrollEmitters = createStoreEmitters(scrollXStoreModule, {});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/scroll/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { scrollXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the scroll module.\n *\n * @internal\n */\nexport const scrollEmitters = createStoreEmitters(scrollXStoreModule, {});\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}

package/js/x-modules/search/components/partial-results-list.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './partial-results-list.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, createCommentVNode } from 'vue';
 import './partial-results-list.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -20,7 +20,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-partial-result",
             "data-test": "partial-result"
           }, [
-            createCommentVNode("\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      "),
             renderSlot(_ctx.$slots, "default", { partialResult }, void 0, true)
           ]);
         }),

package/js/x-modules/search/components/partial-results-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partialResult=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { PartialResult } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * It renders a list of partial results from {@link SearchState.partialResults} by default.\n   * It also provides the partial result slot to customize the item with the partial result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PartialResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * Animation component that will be used to animate the partial results.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Maximum number of partial results to show.\n       *\n       * @public\n       */\n      maxItemsToRender: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * The partials results from the search state.\n       *\n       * @public\n       */\n      const items: ComputedRef<PartialResult[]> = useState('search', [\n        'partialResults'\n      ]).partialResults;\n\n      /**\n       * A limited number of partial results.\n       *\n       * @returns The partial results sliced by the maxItemsToRender.\n       *\n       * @internal\n       */\n      const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));\n\n      return {\n        partialResults\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-partial-results-list {\n    display: flex;\n    flex-flow: column nowrap;\n    list-style-type: none;\n    padding: 0;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,cAAA,CAAA,MAAA,IAAAC,SAAA,EAIkC,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC9B,GAAA,EAAA,CAAA;AAAA,IACA,KAAI,EAAA,wBAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANR,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;AAUe,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAuBC,QAAA;AAAA,QAAK,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,aAAA,EAAA,KAAA,KAAA;AAChC,UAAA,OAAAL,SAAA,EAAmB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACxB,sBAAU,KAAgB,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,YAAA,KAAA,EAAA,kBAAA;AAE1B,YAAA,WAAA,EAAA,gBAAA;AAAA,WAIA,EAAA;AAAA,YAAAG,kBAAA,CAAA,mIAAA,CAAA;;;AAlBN,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partialResult=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { PartialResult } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * It renders a list of partial results from {@link SearchState.partialResults} by default.\n   * It also provides the partial result slot to customize the item with the partial result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PartialResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * Animation component that will be used to animate the partial results.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Maximum number of partial results to show.\n       *\n       * @public\n       */\n      maxItemsToRender: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * The partials results from the search state.\n       *\n       * @public\n       */\n      const items: ComputedRef<PartialResult[]> = useState('search', [\n        'partialResults'\n      ]).partialResults;\n\n      /**\n       * A limited number of partial results.\n       *\n       * @returns The partial results sliced by the maxItemsToRender.\n       *\n       * @internal\n       */\n      const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));\n\n      return {\n        partialResults\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-partial-results-list {\n    display: flex;\n    flex-flow: column nowrap;\n    list-style-type: none;\n    padding: 0;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,cAAA,CAAA,MAAA,IAAAC,SAAA,EAIkC,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC9B,GAAA,EAAA,CAAA;AAAA,IACA,KAAI,EAAA,wBAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANR,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;AAUe,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAuBC,QAAA;AAAA,QAAK,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,aAAA,EAAA,KAAA,KAAA;AAChC,UAAA,OAAAL,SAAA,EAAmB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACxB,sBAAU,KAAgB,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,YAAA,KAAA,EAAA,kBAAA;YAM1B,WAAuC,EAAA,gBAAA;AAAA,WAAA,EAAA;;;AAlB7C,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/results-list.vue.js

@@ -1,9 +1,9 @@
 import { defineComponent, provide, ref, computed, watch, h } from 'vue';
 import { LIST_ITEMS_KEY, QUERY_KEY, HAS_MORE_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import ItemsList from '../../../components/items-list.vue.js';
-import { animationProp } from '../../../utils/options-api.js';
 import { useState } from '../../../composables/use-state.js';
 import { searchXModule } from '../x-module.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
 
 /**
  * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
@@ -22,7 +22,7 @@ var _sfc_main = defineComponent({
     props: {
         /** Animation component that will be used to animate the results. */
         animation: {
-            type: animationProp,
+            type: AnimationProp,
             default: 'ul'
         }
     },

package/js/x-modules/search/components/results-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, provide, Ref, ref, watch } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import ItemsList from '../../../components/items-list.vue';\n  import { RequestStatus } from '../../../store/utils/status-store.utils';\n  import { animationProp } from '../../../utils/options-api';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n   * default.\n   *\n   * The component provides a default slot which wraps the whole component with the `results` bound.\n   *\n   * It also provides the slot result to customize the item, which is within the default slot, with\n   * the result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the results. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      }\n    },\n    emits: ['UserReachedResultsListEnd'],\n    setup(props, { slots }) {\n      /**\n       * The results to render from the state.\n       *\n       * @remarks The results list are provided with `items` key. It can be\n       * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n       * `BaseGrid` or any component that injects the list.\n       */\n      const items: ComputedRef<Result[]> = useState('search', ['results']).results;\n      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);\n\n      /** The total number of results, taken from the state. */\n      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;\n\n      /** This query is updated only when the search request has succeeded. */\n      let providedQuery = ref('');\n      provide<Ref<string>>(QUERY_KEY as string, providedQuery);\n\n      /** Indicates if there are more available results that have not been injected. */\n      const hasMoreItems = computed(() => items.value.length < totalResults.value);\n      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);\n\n      /** The status of the search request, taken from the state. */\n      const searchStatus: ComputedRef<RequestStatus> = useState('search', ['status']).status;\n\n      /** The query of the search request, taken from the state. */\n      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;\n\n      /**\n       * Updates the query to be provided to the child components\n       * when the search request has succeeded.\n       *\n       * @param status - The status of the search request.\n       */\n      function updateQuery(status: RequestStatus) {\n        if (status === 'success') {\n          providedQuery.value = searchQuery.value;\n        }\n      }\n\n      /**\n       * Watches the searchStatus and triggers updateQuery as callback\n       * when it changes.\n       *\n       * @param status - The status of the search request.\n       */\n      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the ResultsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #result=\"{ item }\">\n          <span>Result: {{ item.name }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding result content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\nThe order in which elements are placed in the template will define the concat strategy of the items,\nso it is important to define it properly; for example, Promoteds will be usually before Banners so\nfirst promoted items are inserted within the results and then banner items are placed on top of\nthat, occupying the rows.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <BannersList>\n          <template #result=\"{ item }\">Result: {{ item.id }}</template>\n          <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n          <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        </BannersList>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BannersList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAcE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,2BAA2B,CAAC;AACpC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;;AAME;AACF,QAAA,MAAM,KAAK,GAA0B,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAA;AAC5E,QAAA,OAAO,CAAwB,cAAwB,EAAE,KAAK,CAAC,CAAA;;AAG/D,QAAA,MAAM,YAAY,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAA;;AAG3F,QAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC,CAAA;AAC3B,QAAA,OAAO,CAAc,SAAmB,EAAE,aAAa,CAAC,CAAA;;AAGxD,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,GAAI,YAAY,CAAC,KAAK,CAAC,CAAA;AAC5E,QAAA,OAAO,CAAuB,kBAA4B,EAAE,YAAY,CAAC,CAAA;;AAGzE,QAAA,MAAM,YAAY,GAA+B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;;AAGtF,QAAA,MAAM,WAAW,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;AAE5E;;;;;AAKE;QACF,SAAS,WAAW,CAAC,MAAqB,EAAA;YACxC,IAAI,WAAW,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAM,GAAE,WAAW,CAAC,KAAK,CAAA;AACzC,aAAA;SACF;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAC,CAAA;AAE/E,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAG,CAAA;;AAErE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;AAC1E,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, provide, Ref, ref, watch } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import ItemsList from '../../../components/items-list.vue';\n  import { RequestStatus } from '../../../store/utils/status-store.utils';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n\n  /**\n   * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n   * default.\n   *\n   * The component provides a default slot which wraps the whole component with the `results` bound.\n   *\n   * It also provides the slot result to customize the item, which is within the default slot, with\n   * the result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the results. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    emits: ['UserReachedResultsListEnd'],\n    setup(props, { slots }) {\n      /**\n       * The results to render from the state.\n       *\n       * @remarks The results list are provided with `items` key. It can be\n       * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n       * `BaseGrid` or any component that injects the list.\n       */\n      const items: ComputedRef<Result[]> = useState('search', ['results']).results;\n      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);\n\n      /** The total number of results, taken from the state. */\n      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;\n\n      /** This query is updated only when the search request has succeeded. */\n      let providedQuery = ref('');\n      provide<Ref<string>>(QUERY_KEY as string, providedQuery);\n\n      /** Indicates if there are more available results that have not been injected. */\n      const hasMoreItems = computed(() => items.value.length < totalResults.value);\n      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);\n\n      /** The status of the search request, taken from the state. */\n      const searchStatus: ComputedRef<RequestStatus> = useState('search', ['status']).status;\n\n      /** The query of the search request, taken from the state. */\n      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;\n\n      /**\n       * Updates the query to be provided to the child components\n       * when the search request has succeeded.\n       *\n       * @param status - The status of the search request.\n       */\n      function updateQuery(status: RequestStatus) {\n        if (status === 'success') {\n          providedQuery.value = searchQuery.value;\n        }\n      }\n\n      /**\n       * Watches the searchStatus and triggers updateQuery as callback\n       * when it changes.\n       *\n       * @param status - The status of the search request.\n       */\n      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the ResultsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #result=\"{ item }\">\n          <span>Result: {{ item.name }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding result content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\nThe order in which elements are placed in the template will define the concat strategy of the items,\nso it is important to define it properly; for example, Promoteds will be usually before Banners so\nfirst promoted items are inserted within the results and then banner items are placed on top of\nthat, occupying the rows.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <BannersList>\n          <template #result=\"{ item }\">Result: {{ item.id }}</template>\n          <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n          <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        </BannersList>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BannersList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAcE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,2BAA2B,CAAC;AACpC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;;AAME;AACF,QAAA,MAAM,KAAK,GAA0B,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAA;AAC5E,QAAA,OAAO,CAAwB,cAAwB,EAAE,KAAK,CAAC,CAAA;;AAG/D,QAAA,MAAM,YAAY,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAA;;AAG3F,QAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC,CAAA;AAC3B,QAAA,OAAO,CAAc,SAAmB,EAAE,aAAa,CAAC,CAAA;;AAGxD,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,GAAI,YAAY,CAAC,KAAK,CAAC,CAAA;AAC5E,QAAA,OAAO,CAAuB,kBAA4B,EAAE,YAAY,CAAC,CAAA;;AAGzE,QAAA,MAAM,YAAY,GAA+B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;;AAGtF,QAAA,MAAM,WAAW,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;AAE5E;;;;;AAKE;QACF,SAAS,WAAW,CAAC,MAAqB,EAAA;YACxC,IAAI,WAAW,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAM,GAAE,WAAW,CAAC,KAAK,CAAA;AACzC,aAAA;SACF;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAC,CAAA;AAE/E,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAG,CAAA;;AAErE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;AAC1E,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/search/components/sort-dropdown.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './sort-dropdown.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -15,7 +15,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": "Select sorting"
   }, {
     toggle: withCtx(({ isOpen, item }) => [
-      createCommentVNode("\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      "),
       renderSlot(_ctx.$slots, "toggle", normalizeProps(guardReactiveProps({ isOpen, item })), () => [
         createTextVNode(
           toDisplayString(item),
@@ -25,7 +24,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     item: withCtx(({ item, isHighlighted, isSelected }) => [
-      createCommentVNode("\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      "),
       renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps({ item, isHighlighted, isSelected })), () => [
         createTextVNode(
           toDisplayString(item),