@empathyco/x-components 6.0.0-alpha.60 → 6.0.0-alpha.62

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

@@ -1,10 +1,10 @@
-import { setStatus } from '../../../store/utils/status-store.utils.js';
 import { setQuery } from '../../../store/utils/query.utils.js';
+import { setStatus } from '../../../store/utils/status-store.utils.js';
 import { fetchAndSaveRelatedPrompts, cancelFetchAndSaveRelatedPrompts } from './actions/fetch-and-save-related-prompts.action.js';
 import { fetchRelatedPrompts } from './actions/fetch-related-prompts.action.js';
 import { setUrlParams } from './actions/set-url-params.action.js';
-import { request } from './getters/request.getter.js';
 import { query } from './getters/related-prompts-query.getter.js';
+import { request } from './getters/request.getter.js';
 
 /**
  * {@link XStoreModule} For the related prompt module.
@@ -19,11 +19,11 @@ const relatedPromptsXStoreModule = {
         selectedQuery: -1,
         status: 'initial',
         params: {},
-        relatedTags: []
+        relatedTags: [],
     }),
     getters: {
         request,
-        query
+        query,
     },
     mutations: {
         setStatus,
@@ -50,14 +50,14 @@ const relatedPromptsXStoreModule = {
         },
         setRelatedPromptsRelatedTags(state, relatedTags) {
             state.relatedTags = relatedTags;
-        }
+        },
     },
     actions: {
         fetchRelatedPrompts,
         fetchAndSaveRelatedPrompts,
         cancelFetchAndSaveRelatedPrompts,
-        setUrlParams
-    }
+        setUrlParams,
+    },
 };
 
 export { relatedPromptsXStoreModule };

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

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/related-prompts/store/module.ts"],"sourcesContent":["import { setStatus } from '../../../store/utils/status-store.utils';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { RelatedPromptsXStoreModule } from './types';\nimport {\n  cancelFetchAndSaveRelatedPrompts,\n  fetchAndSaveRelatedPrompts\n} from './actions/fetch-and-save-related-prompts.action';\nimport { fetchRelatedPrompts } from './actions/fetch-related-prompts.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { request } from './getters/request.getter';\nimport { query } from './getters/related-prompts-query.getter';\n\n/**\n * {@link XStoreModule} For the related prompt module.\n *\n * @internal\n */\nexport const relatedPromptsXStoreModule: RelatedPromptsXStoreModule = {\n  state: () => ({\n    query: '',\n    relatedPrompts: [],\n    selectedPrompt: -1,\n    selectedQuery: -1,\n    status: 'initial',\n    params: {},\n    relatedTags: []\n  }),\n  getters: {\n    request,\n    query\n  },\n  mutations: {\n    setStatus,\n    setQuery,\n    setParams(state, params) {\n      state.params = params;\n    },\n    setRelatedPromptsProducts(state, products) {\n      state.relatedPrompts = products;\n    },\n    setSelectedPrompt(state, selectedPrompt) {\n      state.selectedPrompt = state.selectedPrompt === selectedPrompt ? -1 : selectedPrompt;\n    },\n    setSelectedQuery(state, selectedQuery) {\n      state.selectedQuery = selectedQuery;\n    },\n    resetRelatedPromptsState(state) {\n      state.selectedQuery = -1;\n      state.selectedPrompt = -1;\n      state.relatedPrompts = [];\n    },\n    resetSelectedPrompt(state) {\n      state.selectedPrompt = -1;\n    },\n    setRelatedPromptsRelatedTags(state, relatedTags) {\n      state.relatedTags = relatedTags;\n    }\n  },\n  actions: {\n    fetchRelatedPrompts,\n    fetchAndSaveRelatedPrompts,\n    cancelFetchAndSaveRelatedPrompts,\n    setUrlParams\n  }\n};\n"],"names":[],"mappings":";;;;;;;;AAYA;;;;AAIG;AACU,MAAA,0BAA0B,GAA+B;AACpE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,cAAc,EAAE,EAAE;QAClB,cAAc,EAAE,CAAC,CAAC;QAClB,aAAa,EAAE,CAAC,CAAC;AACjB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,WAAW,EAAE,EAAE;KAChB,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;QACP,KAAK;AACN,KAAA;AACD,IAAA,SAAS,EAAE;QACT,SAAS;QACT,QAAQ;QACR,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,yBAAyB,CAAC,KAAK,EAAE,QAAQ,EAAA;AACvC,YAAA,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;SACjC;QACD,iBAAiB,CAAC,KAAK,EAAE,cAAc,EAAA;AACrC,YAAA,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,KAAK,cAAc,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC;SACtF;QACD,gBAAgB,CAAC,KAAK,EAAE,aAAa,EAAA;AACnC,YAAA,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;SACrC;AACD,QAAA,wBAAwB,CAAC,KAAK,EAAA;AAC5B,YAAA,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;AACzB,YAAA,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;AAC1B,YAAA,KAAK,CAAC,cAAc,GAAG,EAAE,CAAC;SAC3B;AACD,QAAA,mBAAmB,CAAC,KAAK,EAAA;AACvB,YAAA,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;SAC3B;QACD,4BAA4B,CAAC,KAAK,EAAE,WAAW,EAAA;AAC7C,YAAA,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;SACjC;AACF,KAAA;AACD,IAAA,OAAO,EAAE;QACP,mBAAmB;QACnB,0BAA0B;QAC1B,gCAAgC;QAChC,YAAY;AACb,KAAA;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/related-prompts/store/module.ts"],"sourcesContent":["import type { RelatedPromptsXStoreModule } from './types'\nimport { setQuery } from '../../../store/utils/query.utils'\nimport { setStatus } from '../../../store/utils/status-store.utils'\nimport {\n  cancelFetchAndSaveRelatedPrompts,\n  fetchAndSaveRelatedPrompts,\n} from './actions/fetch-and-save-related-prompts.action'\nimport { fetchRelatedPrompts } from './actions/fetch-related-prompts.action'\nimport { setUrlParams } from './actions/set-url-params.action'\nimport { query } from './getters/related-prompts-query.getter'\nimport { request } from './getters/request.getter'\n\n/**\n * {@link XStoreModule} For the related prompt module.\n *\n * @internal\n */\nexport const relatedPromptsXStoreModule: RelatedPromptsXStoreModule = {\n  state: () => ({\n    query: '',\n    relatedPrompts: [],\n    selectedPrompt: -1,\n    selectedQuery: -1,\n    status: 'initial',\n    params: {},\n    relatedTags: [],\n  }),\n  getters: {\n    request,\n    query,\n  },\n  mutations: {\n    setStatus,\n    setQuery,\n    setParams(state, params) {\n      state.params = params\n    },\n    setRelatedPromptsProducts(state, products) {\n      state.relatedPrompts = products\n    },\n    setSelectedPrompt(state, selectedPrompt) {\n      state.selectedPrompt = state.selectedPrompt === selectedPrompt ? -1 : selectedPrompt\n    },\n    setSelectedQuery(state, selectedQuery) {\n      state.selectedQuery = selectedQuery\n    },\n    resetRelatedPromptsState(state) {\n      state.selectedQuery = -1\n      state.selectedPrompt = -1\n      state.relatedPrompts = []\n    },\n    resetSelectedPrompt(state) {\n      state.selectedPrompt = -1\n    },\n    setRelatedPromptsRelatedTags(state, relatedTags) {\n      state.relatedTags = relatedTags\n    },\n  },\n  actions: {\n    fetchRelatedPrompts,\n    fetchAndSaveRelatedPrompts,\n    cancelFetchAndSaveRelatedPrompts,\n    setUrlParams,\n  },\n}\n"],"names":[],"mappings":";;;;;;;;AAYA;;;;AAIG;AACU,MAAA,0BAA0B,GAA+B;AACpE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,cAAc,EAAE,EAAE;QAClB,cAAc,EAAE,CAAC,CAAC;QAClB,aAAa,EAAE,CAAC,CAAC;AACjB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,WAAW,EAAE,EAAE;KAChB,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;QACP,KAAK;AACN,KAAA;AACD,IAAA,SAAS,EAAE;QACT,SAAS;QACT,QAAQ;QACR,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;SACtB;QACD,yBAAyB,CAAC,KAAK,EAAE,QAAQ,EAAA;AACvC,YAAA,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAA;SAChC;QACD,iBAAiB,CAAC,KAAK,EAAE,cAAc,EAAA;AACrC,YAAA,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,KAAK,cAAc,GAAG,CAAC,CAAC,GAAG,cAAc,CAAA;SACrF;QACD,gBAAgB,CAAC,KAAK,EAAE,aAAa,EAAA;AACnC,YAAA,KAAK,CAAC,aAAa,GAAG,aAAa,CAAA;SACpC;AACD,QAAA,wBAAwB,CAAC,KAAK,EAAA;AAC5B,YAAA,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,CAAA;AACxB,YAAA,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAA;AACzB,YAAA,KAAK,CAAC,cAAc,GAAG,EAAE,CAAA;SAC1B;AACD,QAAA,mBAAmB,CAAC,KAAK,EAAA;AACvB,YAAA,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAA;SAC1B;QACD,4BAA4B,CAAC,KAAK,EAAE,WAAW,EAAA;AAC7C,YAAA,KAAK,CAAC,WAAW,GAAG,WAAW,CAAA;SAChC;AACF,KAAA;AACD,IAAA,OAAO,EAAE;QACP,mBAAmB;QACnB,0BAA0B;QAC1B,gCAAgC;QAChC,YAAY;AACb,KAAA;;;;;"}

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

@@ -1,6 +1,6 @@
 import { namespacedWireCommit, namespacedWireCommitWithoutPayload, namespacedWireDispatch, namespacedWireDispatchWithoutPayload } from '../../wiring/namespaced-wires.factory.js';
-import { createWiring } from '../../wiring/wiring.utils.js';
 import { filter } from '../../wiring/wires.operators.js';
+import { createWiring } from '../../wiring/wiring.utils.js';
 
 /** `relatedPrompts` XModule name. */
 const moduleName = 'relatedPrompts';
@@ -41,41 +41,41 @@ const resetRelatedPrompt = wireCommitWithoutPayload('resetSelectedPrompt');
  */
 const relatedPromptsWiring = createWiring({
     ParamsLoadedFromUrl: {
-        setUrlParams
+        setUrlParams,
     },
     ExtraParamsChanged: {
-        setExtraParams
+        setExtraParams,
     },
     UserAcceptedAQuery: {
         setRelatedPromptsQuery,
-        resetRelatedPrompt
+        resetRelatedPrompt,
     },
     UserAcceptedAQueryPreview: {
         setRelatedPromptsQueryFromPreview,
-        resetRelatedPrompt
+        resetRelatedPrompt,
     },
     UserClearedQuery: {
         cancelFetchAndSaveRelatedPrompts,
         resetRelatedPromptsState,
-        setRelatedPromptsQuery
+        setRelatedPromptsQuery,
     },
     RelatedPromptsRequestUpdated: {
-        fetchAndSaveRelatedPrompts
+        fetchAndSaveRelatedPrompts,
     },
     UserSelectedARelatedPrompt: {
-        setRelatedPrompt
+        setRelatedPrompt,
     },
     UserSelectedARelatedPromptQuery: {
-        setRelatedPromptQuery
+        setRelatedPromptQuery,
     },
     SearchRequestChanged: {
         resetRelatedPrompt: filter(resetRelatedPrompt, 
         // Avoid reset selected prompt just after restored from URL with ParamsLoadedFromUrl event
-        ({ store }) => store.state.x.search.origin !== 'url:external')
+        ({ store }) => store.state.x.search.origin !== 'url:external'),
     },
     SelectedRelatedTagsChanged: {
-        setRelatedPromptsRelatedTags
-    }
+        setRelatedPromptsRelatedTags,
+    },
 });
 
 export { relatedPromptsWiring };

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

@@ -1 +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 { createWiring } from '../../wiring/wiring.utils';\nimport { filter } from '../../wiring/wires.operators';\n\n/** `relatedPrompts` XModule name. */\nconst moduleName = 'relatedPrompts';\n/** WireCommit for RelatedPromptsXModule. */\nconst wireCommit = namespacedWireCommit(moduleName);\n/** WireCommitWithoutPayload for RelatedPromptsXModule. */\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName);\n/** WireDispatch for RelatedPromptsXModule.*/\nconst wireDispatch = namespacedWireDispatch(moduleName);\n/** WireDispatchWithoutPayload for RelatedPromptsXModule. */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/** Sets the related prompts state from URL data. */\nconst setUrlParams = wireDispatch('setUrlParams');\n/** Sets the related prompts state `params`. */\nconst setExtraParams = wireCommit('setParams');\n\n/** Sets the related prompts state `query`. */\nconst setRelatedPromptsQuery = wireCommit('setQuery');\n/** Sets the related prompts state `query` from the payload. */\nconst setRelatedPromptsQueryFromPreview = wireCommit(\n  'setQuery',\n  ({ eventPayload: { query } }) => query\n);\n/** Sets the related prompts state `selectedQuery`. */\nconst setRelatedPromptQuery = wireCommit('setSelectedQuery');\n/** Sets the related prompts state `selectedPrompt`. */\nconst setRelatedPrompt = wireCommit('setSelectedPrompt');\n/** Sets the related prompts state `relatedTags`.*/\nconst setRelatedPromptsRelatedTags = wireCommit('setRelatedPromptsRelatedTags');\n/** Fetches and saves the related prompts response. */\nconst fetchAndSaveRelatedPrompts = wireDispatch('fetchAndSaveRelatedPrompts');\n/** Cancels the fetch and save related prompts response. */\nconst cancelFetchAndSaveRelatedPrompts = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveRelatedPrompts'\n);\n\n/** Resets the related prompts state. */\nconst resetRelatedPromptsState = wireCommitWithoutPayload('resetRelatedPromptsState');\n/** Resets the selected related prompt number. */\nconst resetRelatedPrompt = wireCommitWithoutPayload('resetSelectedPrompt');\n\n/**\n * Wiring configuration for the {@link RelatedPromptsXModule | related prompts module}.\n *\n * @internal\n */\nexport const relatedPromptsWiring = createWiring({\n  ParamsLoadedFromUrl: {\n    setUrlParams\n  },\n  ExtraParamsChanged: {\n    setExtraParams\n  },\n  UserAcceptedAQuery: {\n    setRelatedPromptsQuery,\n    resetRelatedPrompt\n  },\n  UserAcceptedAQueryPreview: {\n    setRelatedPromptsQueryFromPreview,\n    resetRelatedPrompt\n  },\n  UserClearedQuery: {\n    cancelFetchAndSaveRelatedPrompts,\n    resetRelatedPromptsState,\n    setRelatedPromptsQuery\n  },\n  RelatedPromptsRequestUpdated: {\n    fetchAndSaveRelatedPrompts\n  },\n  UserSelectedARelatedPrompt: {\n    setRelatedPrompt\n  },\n  UserSelectedARelatedPromptQuery: {\n    setRelatedPromptQuery\n  },\n  SearchRequestChanged: {\n    resetRelatedPrompt: filter(\n      resetRelatedPrompt,\n      // Avoid reset selected prompt just after restored from URL with ParamsLoadedFromUrl event\n      ({ store }) => store.state.x.search.origin !== 'url:external'\n    )\n  },\n  SelectedRelatedTagsChanged: {\n    setRelatedPromptsRelatedTags\n  }\n});\n"],"names":[],"mappings":";;;;AASA;AACA,MAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC;AACA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AACpD;AACA,MAAM,wBAAwB,GAAG,kCAAkC,CAAC,UAAU,CAAC,CAAC;AAChF;AACA,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AACxD;AACA,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;AACA,MAAM,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;AAClD;AACA,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAE/C;AACA,MAAM,sBAAsB,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;AACtD;AACA,MAAM,iCAAiC,GAAG,UAAU,CAClD,UAAU,EACV,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,CACvC,CAAC;AACF;AACA,MAAM,qBAAqB,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC7D;AACA,MAAM,gBAAgB,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;AACzD;AACA,MAAM,4BAA4B,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAC;AAChF;AACA,MAAM,0BAA0B,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;AAC9E;AACA,MAAM,gCAAgC,GAAG,0BAA0B,CACjE,kCAAkC,CACnC,CAAC;AAEF;AACA,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,0BAA0B,CAAC,CAAC;AACtF;AACA,MAAM,kBAAkB,GAAG,wBAAwB,CAAC,qBAAqB,CAAC,CAAC;AAE3E;;;;AAIG;AACI,MAAM,oBAAoB,GAAG,YAAY,CAAC;AAC/C,IAAA,mBAAmB,EAAE;QACnB,YAAY;AACb,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,cAAc;AACf,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,sBAAsB;QACtB,kBAAkB;AACnB,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,iCAAiC;QACjC,kBAAkB;AACnB,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,gCAAgC;QAChC,wBAAwB;QACxB,sBAAsB;AACvB,KAAA;AACD,IAAA,4BAA4B,EAAE;QAC5B,0BAA0B;AAC3B,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,gBAAgB;AACjB,KAAA;AACD,IAAA,+BAA+B,EAAE;QAC/B,qBAAqB;AACtB,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,kBAAkB,EAAE,MAAM,CACxB,kBAAkB;;AAElB,QAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,cAAc,CAC9D;AACF,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,4BAA4B;AAC7B,KAAA;AACF,CAAA;;;;"}
+{"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 { filter } from '../../wiring/wires.operators'\nimport { createWiring } from '../../wiring/wiring.utils'\n\n/** `relatedPrompts` XModule name. */\nconst moduleName = 'relatedPrompts'\n/** WireCommit for RelatedPromptsXModule. */\nconst wireCommit = namespacedWireCommit(moduleName)\n/** WireCommitWithoutPayload for RelatedPromptsXModule. */\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName)\n/** WireDispatch for RelatedPromptsXModule.*/\nconst wireDispatch = namespacedWireDispatch(moduleName)\n/** WireDispatchWithoutPayload for RelatedPromptsXModule. */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName)\n\n/** Sets the related prompts state from URL data. */\nconst setUrlParams = wireDispatch('setUrlParams')\n/** Sets the related prompts state `params`. */\nconst setExtraParams = wireCommit('setParams')\n\n/** Sets the related prompts state `query`. */\nconst setRelatedPromptsQuery = wireCommit('setQuery')\n/** Sets the related prompts state `query` from the payload. */\nconst setRelatedPromptsQueryFromPreview = wireCommit(\n  'setQuery',\n  ({ eventPayload: { query } }) => query,\n)\n/** Sets the related prompts state `selectedQuery`. */\nconst setRelatedPromptQuery = wireCommit('setSelectedQuery')\n/** Sets the related prompts state `selectedPrompt`. */\nconst setRelatedPrompt = wireCommit('setSelectedPrompt')\n/** Sets the related prompts state `relatedTags`.*/\nconst setRelatedPromptsRelatedTags = wireCommit('setRelatedPromptsRelatedTags')\n/** Fetches and saves the related prompts response. */\nconst fetchAndSaveRelatedPrompts = wireDispatch('fetchAndSaveRelatedPrompts')\n/** Cancels the fetch and save related prompts response. */\nconst cancelFetchAndSaveRelatedPrompts = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveRelatedPrompts',\n)\n\n/** Resets the related prompts state. */\nconst resetRelatedPromptsState = wireCommitWithoutPayload('resetRelatedPromptsState')\n/** Resets the selected related prompt number. */\nconst resetRelatedPrompt = wireCommitWithoutPayload('resetSelectedPrompt')\n\n/**\n * Wiring configuration for the {@link RelatedPromptsXModule | related prompts module}.\n *\n * @internal\n */\nexport const relatedPromptsWiring = createWiring({\n  ParamsLoadedFromUrl: {\n    setUrlParams,\n  },\n  ExtraParamsChanged: {\n    setExtraParams,\n  },\n  UserAcceptedAQuery: {\n    setRelatedPromptsQuery,\n    resetRelatedPrompt,\n  },\n  UserAcceptedAQueryPreview: {\n    setRelatedPromptsQueryFromPreview,\n    resetRelatedPrompt,\n  },\n  UserClearedQuery: {\n    cancelFetchAndSaveRelatedPrompts,\n    resetRelatedPromptsState,\n    setRelatedPromptsQuery,\n  },\n  RelatedPromptsRequestUpdated: {\n    fetchAndSaveRelatedPrompts,\n  },\n  UserSelectedARelatedPrompt: {\n    setRelatedPrompt,\n  },\n  UserSelectedARelatedPromptQuery: {\n    setRelatedPromptQuery,\n  },\n  SearchRequestChanged: {\n    resetRelatedPrompt: filter(\n      resetRelatedPrompt,\n      // Avoid reset selected prompt just after restored from URL with ParamsLoadedFromUrl event\n      ({ store }) => store.state.x.search.origin !== 'url:external',\n    ),\n  },\n  SelectedRelatedTagsChanged: {\n    setRelatedPromptsRelatedTags,\n  },\n})\n"],"names":[],"mappings":";;;;AASA;AACA,MAAM,UAAU,GAAG,gBAAgB,CAAA;AACnC;AACA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAA;AACnD;AACA,MAAM,wBAAwB,GAAG,kCAAkC,CAAC,UAAU,CAAC,CAAA;AAC/E;AACA,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAA;AACvD;AACA,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAA;AAEnF;AACA,MAAM,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;AACjD;AACA,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;AAE9C;AACA,MAAM,sBAAsB,GAAG,UAAU,CAAC,UAAU,CAAC,CAAA;AACrD;AACA,MAAM,iCAAiC,GAAG,UAAU,CAClD,UAAU,EACV,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,CACvC,CAAA;AACD;AACA,MAAM,qBAAqB,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAA;AAC5D;AACA,MAAM,gBAAgB,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAA;AACxD;AACA,MAAM,4BAA4B,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAA;AAC/E;AACA,MAAM,0BAA0B,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAA;AAC7E;AACA,MAAM,gCAAgC,GAAG,0BAA0B,CACjE,kCAAkC,CACnC,CAAA;AAED;AACA,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,0BAA0B,CAAC,CAAA;AACrF;AACA,MAAM,kBAAkB,GAAG,wBAAwB,CAAC,qBAAqB,CAAC,CAAA;AAE1E;;;;AAIG;AACI,MAAM,oBAAoB,GAAG,YAAY,CAAC;AAC/C,IAAA,mBAAmB,EAAE;QACnB,YAAY;AACb,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,cAAc;AACf,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,sBAAsB;QACtB,kBAAkB;AACnB,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,iCAAiC;QACjC,kBAAkB;AACnB,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,gCAAgC;QAChC,wBAAwB;QACxB,sBAAsB;AACvB,KAAA;AACD,IAAA,4BAA4B,EAAE;QAC5B,0BAA0B;AAC3B,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,gBAAgB;AACjB,KAAA;AACD,IAAA,+BAA+B,EAAE;QAC/B,qBAAqB;AACtB,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,kBAAkB,EAAE,MAAM,CACxB,kBAAkB;;AAElB,QAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,cAAc,CAC9D;AACF,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,4BAA4B;AAC7B,KAAA;AACF,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
 import { XPlugin } from '../../plugins/x-plugin.js';
-import { relatedPromptsXStoreModule } from './store/module.js';
 import { relatedPromptsStoreEmitters } from './store/emitters.js';
+import { relatedPromptsXStoreModule } from './store/module.js';
 import { relatedPromptsWiring } from './wiring.js';
 
 /**
@@ -13,7 +13,7 @@ const relatedPromptsXModule = {
     name: 'relatedPrompts',
     storeModule: relatedPromptsXStoreModule,
     storeEmitters: relatedPromptsStoreEmitters,
-    wiring: relatedPromptsWiring
+    wiring: relatedPromptsWiring,
 };
 XPlugin.registerXModule(relatedPromptsXModule);
 

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

@@ -1 +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;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/related-prompts/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { RelatedPromptsXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/x-plugin'\nimport { relatedPromptsStoreEmitters } from './store/emitters'\nimport { relatedPromptsXStoreModule } from './store/module'\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;EAC7B;AAED,OAAO,CAAC,eAAe,CAAC,qBAAqB,CAAC;;;;"}

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

@@ -7,9 +7,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "button",
     {
       ref: "buttonEl",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickRelatedTag && _ctx.clickRelatedTag(...args)),
       class: normalizeClass(["x-tag x-related-tag", _ctx.dynamicClasses]),
-      "data-test": "related-tag"
+      "data-test": "related-tag",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickRelatedTag && _ctx.clickRelatedTag(...args))
     },
     [
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ relatedTag: _ctx.relatedTag, isSelected: _ctx.isSelected, shouldHighlightCurated: _ctx.shouldHighlightCurated })), () => [

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"],"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;;;;;;;;;;;;;;;;;;"}
+{"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    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n    @click=\"clickRelatedTag\"\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\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { ComputedRef, PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { relatedTagsXModule } from '../x-module'\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 */\nexport 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>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport 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","dynamicClasses","_normalizeClass","relatedTag"],"mappings":";;;;SAEQ,WAAU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACTA,SAHT,EAAA,EAAAC,kBAAA;AAAA,IAGU,QAAA;AAAA,IAEEC;AAAAA,MADR,GAAA,EAAA,UAAA;AAAA,MAEC,OAAKC,cAAE,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,MAAA,WAAA,EAAA,aAAA;MAQR,OAA6F,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAdjG,sDAcoBC,GAAU,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}

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

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue';
-import { relatedTagsXModule } from '../x-module.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
+import { relatedTagsXModule } from '../x-module.js';
 
 /**
  * This component renders a related tag for a query. A related tag is a descriptive keyword
@@ -21,7 +21,7 @@ var _sfc_main = defineComponent({
          */
         highlightCurated: {
             type: Boolean,
-            default: false
+            default: false,
         },
         /**
          * The related tag model data.
@@ -30,8 +30,8 @@ var _sfc_main = defineComponent({
          */
         relatedTag: {
             type: Object,
-            required: true
-        }
+            required: true,
+        },
     },
     setup(props) {
         const $x = use$x();
@@ -68,7 +68,7 @@ var _sfc_main = defineComponent({
          */
         const createEventMetadata = () => ({
             target: buttonEl.value,
-            feature: 'related_tag'
+            feature: 'related_tag',
         });
         /**
          * Emits events when the button is clicked.
@@ -107,16 +107,16 @@ var _sfc_main = defineComponent({
          */
         const dynamicClasses = computed(() => ({
             'x-selected x-related-tag--is-selected': isSelected.value,
-            'x-related-tag--is-curated': shouldHighlightCurated.value
+            'x-related-tag--is-curated': shouldHighlightCurated.value,
         }));
         return {
             buttonEl,
             dynamicClasses,
             isSelected,
             clickRelatedTag,
-            shouldHighlightCurated
+            shouldHighlightCurated,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"related-tag.vue2.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":[],"mappings":";;;;;AA4BE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAmC;AACzC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,WAAW,GAAG,EAA2B,CAAA;AAE/C;;;;AAIE;AACF,QAAA,MAAM,EAAE,mBAAoB,EAAC,GAA+C,QAAQ,CAClF,aAAa,EACb,CAAC,qBAAqB,CAAA,CACvB,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,aAAa,QAAQ,CAAC,MAAM,mBAAmB,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAA;AAEvF;;;;AAIE;QACF,MAAM,iBAAiB,MAAM;YAC3B,IAAI,UAAU,CAAC,KAAK,EAAE;AACpB,gBAAA,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,CAAA;AACxB,aAAA;AACF,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,QAAQ,CAAC,KAAoB;AACrC,YAAA,OAAO,EAAE,aAAY;AACtB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;;;YAGvB,EAAE,CAAC,IAAI,CACL,UAAU,CAAC,KAAM,GAAE,2BAA0B,GAAI,yBAAyB,EAC1E,KAAK,CAAC,UAAU,EAChB,mBAAmB,EAAC,CACrB,CAAA;AACD,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,UAAU,EAAE,mBAAmB,EAAE,CAAC,CAAA;AAC3E,SAAC,CAAA;AAED;;;;AAIE;QACF,MAAM,kBAAkB,MAAM;AAC5B,YAAA,UAAU,EAAE,CAAA;AACZ,YAAA,cAAc,EAAE,CAAA;AAClB,SAAC,CAAA;AAED;;;;;;AAME;QACF,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAiB,KAAI,KAAK,CAAC,UAAU,CAAC,SAAQ,IAAK,KAAK,CAAA,CACrE,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,uCAAuC,EAAE,UAAU,CAAC,KAAK;YACzD,2BAA2B,EAAE,sBAAsB,CAAC,KAAI;AACzD,SAAA,CAAA,CACF,CAAA;QAED,OAAO;YACL,QAAQ;YACR,cAAc;YACd,UAAU;YACV,eAAe;YACf,sBAAqB;SACtB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"related-tag.vue2.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonEl\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n    @click=\"clickRelatedTag\"\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\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { ComputedRef, PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { relatedTagsXModule } from '../x-module'\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 */\nexport 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>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport 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":[],"mappings":";;;;;AA6BA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAmC;AACzC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,QAAS,GAAE,GAAG,EAA0B,CAAA;AAE9C;;;;AAIE;AACF,QAAA,MAAM,EAAE,mBAAoB,EAAC,GAA+C,QAAQ,CAClF,aAAa,EACb,CAAC,qBAAqB,CAAC,CACzB,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM,mBAAmB,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA,CAAA;AAEtF;;;;AAIE;QACF,MAAM,iBAAiB,MAAM;YAC3B,IAAI,UAAU,CAAC,KAAK,EAAE;AACpB,gBAAA,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAC,CAAA;AACvB,aAAA;AACF,SAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,QAAQ,CAAC,KAAoB;AACrC,YAAA,OAAO,EAAE,aAAa;AACvB,SAAA,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;;;YAGvB,EAAE,CAAC,IAAI,CACL,UAAU,CAAC,KAAM,GAAE,2BAA0B,GAAI,yBAAyB,EAC1E,KAAK,CAAC,UAAU,EAChB,mBAAmB,EAAE,CACvB,CAAA;AACA,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,UAAU,EAAE,mBAAmB,EAAE,CAAA,CAAA;AAC1E,SAAA,CAAA;AAEA;;;;AAIE;QACF,MAAM,kBAAkB,MAAM;AAC5B,YAAA,UAAU,EAAC,CAAA;AACX,YAAA,cAAc,EAAC,CAAA;AACjB,SAAA,CAAA;AAEA;;;;;;AAME;QACF,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAiB,KAAI,KAAK,CAAC,UAAU,CAAC,SAAQ,IAAK,KAAK,CAAC,CACvE,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,uCAAuC,EAAE,UAAU,CAAC,KAAK;YACzD,2BAA2B,EAAE,sBAAsB,CAAC,KAAK;AAC1D,SAAA,CAAC,CACJ,CAAA;QAEA,OAAO;YACL,QAAQ;YACR,cAAc;YACd,UAAU;YACV,eAAe;YACf,sBAAsB;SACxB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -23,16 +23,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             renderSlot(_ctx.$slots, "related-tag", mergeProps({ ref_for: true }, { relatedTag, highlightCurated: _ctx.highlightCurated }), () => [
               createVNode(_component_RelatedTag, {
-                highlightCurated: _ctx.highlightCurated,
-                relatedTag,
+                "highlight-curated": _ctx.highlightCurated,
+                "related-tag": relatedTag,
                 class: normalizeClass(_ctx.itemClass)
               }, {
-                default: withCtx(({ relatedTag: relatedTag2, isSelected, shouldHighlightCurated }) => [
-                  renderSlot(_ctx.$slots, "related-tag-content", mergeProps({ ref_for: true }, { relatedTag: relatedTag2, isSelected, shouldHighlightCurated }), void 0, true)
+                default: withCtx(({ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }) => [
+                  renderSlot(_ctx.$slots, "related-tag-content", mergeProps({ ref_for: true }, { relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }), void 0, true)
                 ]),
                 _: 2
                 /* DYNAMIC */
-              }, 1032, ["highlightCurated", "relatedTag", "class"])
+              }, 1032, ["highlight-curated", "related-tag", "class"])
             ], true)
           ]);
         }),

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","_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;;;;;;"}
+{"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          :highlight-curated=\"highlightCurated\"\n          :related-tag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template\n            #default=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n          >\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: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { AnimationProp } from '../../../types/index'\nimport { relatedTagsXModule } from '../x-module'\nimport 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 */\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { ResultsList } from '@empathyco/x-components/search'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport 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","_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,WAsBO,EAAA,kBAAA;AAAA,WAAA,EAAA;AApBF,YAAAG,UAAA,CAAA,IAAA,CAAA,MAAA,EAAmBC,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,CACnC,qBAAuB,EAAA;AAAA,gBACvB,qBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,aAAAA,EAAAA,UAAAA;AAGL,gBAAA,KAAA,EAAOC,eAYN,IAZsB,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;;AA1BpC,kBAAAL,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,iBAAA,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,IAAAI,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,14 +1,14 @@
 import { defineComponent, computed } from 'vue';
-import { relatedTagsXModule } from '../x-module.js';
-import { AnimationProp } from '../../../types/animation-prop.js';
 import { useGetter } from '../../../composables/use-getter.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { relatedTagsXModule } from '../x-module.js';
 import RelatedTag from './related-tag.vue.js';
 
 /**
  * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by
  * default to select from after a query is performed to fine-tune search.
  * For example, if you are searching for *lego*, different related tags could be *city*,
- * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,
+ * friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,
  * or *lego harry potter*.
  *
  * @public
@@ -17,7 +17,7 @@ var _sfc_main = defineComponent({
     name: 'RelatedTags',
     xModule: relatedTagsXModule.name,
     components: {
-        RelatedTag
+        RelatedTag,
     },
     props: {
         /**
@@ -27,7 +27,7 @@ var _sfc_main = defineComponent({
          */
         animation: {
             type: AnimationProp,
-            default: 'ul'
+            default: 'ul',
         },
         /**
          * Number of related tags to be rendered.
@@ -42,20 +42,20 @@ var _sfc_main = defineComponent({
          */
         highlightCurated: {
             type: Boolean,
-            default: false
+            default: false,
         },
         /** Class inherited by content element. */
-        itemClass: String
+        itemClass: String,
     },
     setup(props) {
         const storedRelatedTags = useGetter('relatedTags', [
-            'relatedTags'
+            'relatedTags',
         ]).relatedTags;
         const relatedTags = computed(() => storedRelatedTags.value.slice(0, props.maxItemsToRender));
         return {
-            relatedTags
+            relatedTags,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"related-tags.vue2.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":[],"mappings":";;;;;;AAoDE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AAExB;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;;AAGD,QAAA,SAAS,EAAE,MAAK;AACjB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,iBAAiB,GAAmC,SAAS,CAAC,aAAa,EAAE;YACjF,aAAY;SACb,CAAC,CAAC,WAAW,CAAA;QAEd,MAAM,WAAY,GAAE,QAAQ,CAAC,MAC3B,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAA,CACxD,CAAA;QAED,OAAO;YACL,WAAU;SACX,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"related-tags.vue2.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          :highlight-curated=\"highlightCurated\"\n          :related-tag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template\n            #default=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n          >\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: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { AnimationProp } from '../../../types/index'\nimport { relatedTagsXModule } from '../x-module'\nimport 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 */\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { ResultsList } from '@empathyco/x-components/search'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAuDA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AAExB;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAGD,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,iBAAiB,GAAmC,SAAS,CAAC,aAAa,EAAE;YACjF,aAAa;SACd,CAAC,CAAC,WAAU,CAAA;QAEb,MAAM,WAAY,GAAE,QAAQ,CAAC,MAC3B,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAC1D,CAAA;QAEA,OAAO;YACL,WAAW;SACb,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/related-tags/store/actions/fetch-and-save-related-tags.action.js

@@ -1,13 +1,12 @@
 import { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils.js';
 
-// eslint-disable-next-line max-len
 const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions({
-    fetch({ dispatch }, request) {
+    async fetch({ dispatch }, request) {
         return dispatch('fetchRelatedTags', request);
     },
     onSuccess({ commit }, relatedTags) {
         commit('setRelatedTags', relatedTags);
-    }
+    },
 });
 /**
  * Default implementation for {@link RelatedTagsActions.fetchAndSaveRelatedTags} action.