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

package/js/composables/use-alias-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-alias-api.js","sources":["../../../src/composables/use-alias-api.ts"],"sourcesContent":["import {\n  Facet,\n  Filter,\n  HistoryQuery,\n  NextQuery,\n  PartialResult,\n  Redirection,\n  RelatedTag,\n  Result,\n  SemanticQuery,\n  Suggestion\n} from '@empathyco/x-types';\nimport { ScrollComponentState } from '../x-modules/scroll/store/types';\nimport { InputStatus } from '../x-modules/search-box/store/types';\nimport { RequestStatus } from '../store/utils/status-store.utils';\nimport { getGetterPath } from '../plugins/index';\nimport { useStore } from './use-store';\n\n/**\n * Creates an object containing the alias part of {@link XComponentAPI}.\n *\n * @returns An object containing the alias part of the {@link XComponentAPI}.\n *\n * @internal\n */\nexport function useAliasApi(): UseAliasAPI {\n  const queryModules = [\n    'facets',\n    'searchBox',\n    'nextQueries',\n    'querySuggestions',\n    'relatedTags',\n    'search'\n  ] as const;\n  const statusModules = [\n    'identifierResults',\n    'nextQueries',\n    'popularSearches',\n    'querySuggestions',\n    'recommendations',\n    'relatedTags',\n    'search'\n  ] as const;\n\n  const store = useStore();\n\n  const query = queryModules.reduce((acc, moduleName) => {\n    return Object.defineProperty(acc, moduleName, {\n      get(): string {\n        return store.state.x[moduleName]?.query ?? '';\n      },\n      enumerable: true\n    });\n  }, {} as UseAliasQueryAPI);\n\n  const status = statusModules.reduce((acc, moduleName) => {\n    return Object.defineProperty(acc, moduleName, {\n      get(): RequestStatus | undefined {\n        return store.state.x[moduleName]?.status;\n      },\n      enumerable: true\n    });\n  }, {} as UseAliasStatusAPI);\n\n  return {\n    query,\n    status,\n    get device() {\n      return store.state.x.device?.name ?? null;\n    },\n    get facets() {\n      return store.getters[getGetterPath('facets', 'facets')] ?? {};\n    },\n    get historyQueries() {\n      return store.getters[getGetterPath('historyQueries', 'historyQueries')] ?? [];\n    },\n    get historyQueriesWithResults() {\n      return store.getters[getGetterPath('historyQueries', 'historyQueriesWithResults')] ?? [];\n    },\n    get fullHistoryQueries() {\n      return store.state.x.historyQueries?.historyQueries ?? [];\n    },\n    get isHistoryQueriesEnabled() {\n      return store.state.x.historyQueries?.isEnabled ?? false;\n    },\n    get fromNoResultsWithFilters() {\n      return store.state.x.search?.fromNoResultsWithFilters ?? false;\n    },\n    get identifierResults() {\n      return store.state.x.identifierResults?.identifierResults ?? [];\n    },\n    get searchBoxStatus() {\n      return store.state.x.searchBox?.inputStatus ?? undefined;\n    },\n    get isEmpathizeOpen() {\n      return store.state.x.empathize?.isOpen ?? false;\n    },\n    get nextQueries() {\n      return store.getters[getGetterPath('nextQueries', 'nextQueries')] ?? [];\n    },\n    get noResults() {\n      return store.state.x.search?.isNoResults ?? false;\n    },\n    get partialResults() {\n      return store.state.x.search?.partialResults ?? [];\n    },\n    get popularSearches() {\n      return store.state.x.popularSearches?.popularSearches ?? [];\n    },\n    get querySuggestions() {\n      return store.getters[getGetterPath('querySuggestions', 'querySuggestions')] ?? [];\n    },\n    get fullQuerySuggestions() {\n      return store.state.x.querySuggestions?.suggestions ?? [];\n    },\n    get recommendations() {\n      return store.state.x.recommendations?.recommendations ?? [];\n    },\n    get redirections() {\n      return store.state.x.search?.redirections ?? [];\n    },\n    get relatedTags() {\n      return store.getters[getGetterPath('relatedTags', 'relatedTags')] ?? [];\n    },\n    get results() {\n      return store.state.x.search?.results ?? [];\n    },\n    get scroll() {\n      return store.state.x.scroll?.data ?? {};\n    },\n    get selectedFilters() {\n      return store.getters[getGetterPath('facets', 'selectedFilters')] ?? [];\n    },\n    get selectedRelatedTags() {\n      return store.state.x.relatedTags?.selectedRelatedTags ?? [];\n    },\n    get semanticQueries() {\n      return store.state.x.semanticQueries?.semanticQueries ?? [];\n    },\n    get spellcheckedQuery() {\n      return store.state.x.search?.spellcheckedQuery ?? null;\n    },\n    get totalResults() {\n      return store.state.x.search?.totalResults ?? 0;\n    },\n    get selectedSort() {\n      return store.state.x.search?.sort ?? '';\n    }\n  };\n}\n\n/**\n * Alias to facilitate retrieving values from the store.\n *\n * @public\n */\nexport interface UseAliasAPI {\n  /** The {@link DeviceXModule} detected device. */\n  readonly device: string | null;\n  /** The {@link FacetsXModule} facets. */\n  readonly facets: Record<Facet['id'], Facet>;\n  /** The {@link HistoryQueriesXModule} history queries matching the query. */\n  readonly historyQueries: ReadonlyArray<HistoryQuery>;\n  /** The {@link HistoryQueriesXModule} history queries with 1 or more results. */\n  readonly historyQueriesWithResults: ReadonlyArray<HistoryQuery>;\n  /** The {@link HistoryQueriesXModule} history queries. */\n  readonly fullHistoryQueries: ReadonlyArray<HistoryQuery>;\n  /** The {@link HistoryQueriesXModule} history queries enabled flag. */\n  readonly isHistoryQueriesEnabled: Readonly<boolean>;\n  /** The {@link SearchXModule} no results with filters flag. */\n  readonly fromNoResultsWithFilters: Readonly<boolean>;\n  /** The {@link IdentifierResultsXModule} results. */\n  readonly identifierResults: ReadonlyArray<Result>;\n  /** The {@link SearchBoxXModule } input status. */\n  readonly searchBoxStatus: InputStatus | undefined;\n  /** The {@link Empathize} is open state. */\n  readonly isEmpathizeOpen: boolean;\n  /** The {@link NextQueriesXModule} next queries. */\n  readonly nextQueries: ReadonlyArray<NextQuery>;\n  /** The {@link SearchXModule} no results situation. */\n  readonly noResults: boolean;\n  /** The {@link SearchXModule} partial results. */\n  readonly partialResults: ReadonlyArray<PartialResult>;\n  /** The {@link PopularSearchesXModule} popular searches. */\n  readonly popularSearches: ReadonlyArray<Suggestion>;\n  /** The query value of the different modules. */\n  readonly query: UseAliasQueryAPI;\n  /** The {@link QuerySuggestionsXModule} query suggestions that should be displayed. */\n  readonly querySuggestions: ReadonlyArray<Suggestion>;\n  /** The {@link QuerySuggestionsXModule} query suggestions. */\n  readonly fullQuerySuggestions: ReadonlyArray<Suggestion>;\n  /** The {@link RecommendationsXModule} recommendations. */\n  readonly recommendations: ReadonlyArray<Result>;\n  /** The {@link SearchXModule} redirections. */\n  readonly redirections: ReadonlyArray<Redirection>;\n  /** The {@link RelatedTagsXModule} related tags (Both selected and deselected). */\n  readonly relatedTags: ReadonlyArray<RelatedTag>;\n  /** The {@link SearchXModule} search results. */\n  readonly results: ReadonlyArray<Result>;\n  /** The {@link ScrollXModule} data state. */\n  readonly scroll: Record<string, ScrollComponentState>;\n  /** The {@link FacetsXModule} selected filters. */\n  readonly selectedFilters: Filter[];\n  /** The {@link RelatedTagsXModule} selected related tags. */\n  readonly selectedRelatedTags: ReadonlyArray<RelatedTag>;\n  /** The {@link SemanticQueriesXModule} queries. */\n  readonly semanticQueries: ReadonlyArray<SemanticQuery>;\n  /** The {@link SearchXModule} spellchecked query. */\n  readonly spellcheckedQuery: string | null;\n  /** The status value of the different modules. */\n  readonly status: UseAliasStatusAPI;\n  /** The {@link SearchXModule} total results. */\n  readonly totalResults: number;\n  /** The {@link SearchXModule} selected sort. */\n  readonly selectedSort: string;\n}\n\n/**\n * Alias to facilitate retrieving the modules with query.\n *\n * @public\n */\nexport interface UseAliasQueryAPI {\n  /** The {@link FacetsXModule} query. */\n  readonly facets: string;\n  /** The {@link SearchBoxXModule} query. */\n  readonly searchBox: string;\n  /** The {@link NextQueriesXModule} query. */\n  readonly nextQueries: string;\n  /** The {@link QuerySuggestionsXModule} query. */\n  readonly querySuggestions: string;\n  /** The {@link RelatedTagsXModule} query. */\n  readonly relatedTags: string;\n  /** The {@link SearchXModule} query. */\n  readonly search: string;\n}\n\n/**\n * Alias to facilitate retrieving the modules with status.\n *\n * @public\n */\nexport interface UseAliasStatusAPI {\n  /** The {@link IdentifierResultsXModule} status. */\n  readonly identifierResults: RequestStatus | undefined;\n  /** The {@link NextQueriesXModule} status. */\n  readonly nextQueries: RequestStatus | undefined;\n  /** The {@link PopularSearchesXModule} status. */\n  readonly popularSearches: RequestStatus | undefined;\n  /** The {@link QuerySuggestionsXModule} status. */\n  readonly querySuggestions: RequestStatus | undefined;\n  /** The {@link RecommendationsXModule} status. */\n  readonly recommendations: RequestStatus | undefined;\n  /** The {@link RelatedTagsXModule} status. */\n  readonly relatedTags: RequestStatus | undefined;\n  /** The {@link SearchXModule} status. */\n  readonly search: RequestStatus | undefined;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-alias-api.js","sources":["../../../src/composables/use-alias-api.ts"],"sourcesContent":["import {\n  Facet,\n  Filter,\n  HistoryQuery,\n  NextQuery,\n  PartialResult,\n  Redirection,\n  RelatedTag,\n  Result,\n  SemanticQuery,\n  Suggestion\n} from '@empathyco/x-types';\nimport { ScrollComponentState } from '../x-modules/scroll/store/types';\nimport { InputStatus } from '../x-modules/search-box/store/types';\nimport { RequestStatus } from '../store/utils/status-store.utils';\nimport { getGetterPath } from '../plugins/index';\nimport { useStore } from './use-store';\n\n/**\n * Creates an object containing the alias part of {@link XComponentAPI}.\n *\n * @returns An object containing the alias part of the {@link XComponentAPI}.\n *\n * @internal\n */\nexport function useAliasApi(): UseAliasAPI {\n  const queryModules = [\n    'facets',\n    'searchBox',\n    'nextQueries',\n    'querySuggestions',\n    'relatedTags',\n    'search'\n  ] as const;\n  const statusModules = [\n    'identifierResults',\n    'nextQueries',\n    'popularSearches',\n    'querySuggestions',\n    'recommendations',\n    'relatedTags',\n    'search'\n  ] as const;\n\n  const store = useStore();\n\n  const query = queryModules.reduce((acc, moduleName) => {\n    return Object.defineProperty(acc, moduleName, {\n      get(): string {\n        return store.state.x[moduleName]?.query ?? '';\n      },\n      enumerable: true\n    });\n  }, {} as UseAliasQueryAPI);\n\n  const status = statusModules.reduce((acc, moduleName) => {\n    return Object.defineProperty(acc, moduleName, {\n      get(): RequestStatus | undefined {\n        return store.state.x[moduleName]?.status;\n      },\n      enumerable: true\n    });\n  }, {} as UseAliasStatusAPI);\n\n  return {\n    query,\n    status,\n    get device() {\n      return store.state.x.device?.name ?? null;\n    },\n    get facets() {\n      return store.getters[getGetterPath('facets', 'facets')] ?? {};\n    },\n    get historyQueries() {\n      return store.getters[getGetterPath('historyQueries', 'historyQueries')] ?? [];\n    },\n    get historyQueriesWithResults() {\n      return store.getters[getGetterPath('historyQueries', 'historyQueriesWithResults')] ?? [];\n    },\n    get fullHistoryQueries() {\n      return store.state.x.historyQueries?.historyQueries ?? [];\n    },\n    get isHistoryQueriesEnabled() {\n      return store.state.x.historyQueries?.isEnabled ?? false;\n    },\n    get fromNoResultsWithFilters() {\n      return store.state.x.search?.fromNoResultsWithFilters ?? false;\n    },\n    get identifierResults() {\n      return store.state.x.identifierResults?.identifierResults ?? [];\n    },\n    get searchBoxStatus() {\n      return store.state.x.searchBox?.inputStatus ?? undefined;\n    },\n    get isEmpathizeOpen() {\n      return store.state.x.empathize?.isOpen ?? false;\n    },\n    get nextQueries() {\n      return store.getters[getGetterPath('nextQueries', 'nextQueries')] ?? [];\n    },\n    get noResults() {\n      return store.state.x.search?.isNoResults ?? false;\n    },\n    get partialResults() {\n      return store.state.x.search?.partialResults ?? [];\n    },\n    get popularSearches() {\n      return store.state.x.popularSearches?.popularSearches ?? [];\n    },\n    get querySuggestions() {\n      return store.getters[getGetterPath('querySuggestions', 'querySuggestions')] ?? [];\n    },\n    get fullQuerySuggestions() {\n      return store.state.x.querySuggestions?.suggestions ?? [];\n    },\n    get recommendations() {\n      return store.state.x.recommendations?.recommendations ?? [];\n    },\n    get redirections() {\n      return store.state.x.search?.redirections ?? [];\n    },\n    get relatedTags() {\n      return store.getters[getGetterPath('relatedTags', 'relatedTags')] ?? [];\n    },\n    get results() {\n      return store.state.x.search?.results ?? [];\n    },\n    get scroll() {\n      return store.state.x.scroll?.data ?? {};\n    },\n    get selectedFilters() {\n      return store.getters[getGetterPath('facets', 'selectedFilters')] ?? [];\n    },\n    get selectedRelatedTags() {\n      return store.state.x.relatedTags?.selectedRelatedTags ?? [];\n    },\n    get semanticQueries() {\n      return store.state.x.semanticQueries?.semanticQueries ?? [];\n    },\n    get spellcheckedQuery() {\n      return store.state.x.search?.spellcheckedQuery ?? null;\n    },\n    get totalResults() {\n      return store.state.x.search?.totalResults ?? 0;\n    },\n    get selectedSort() {\n      return store.state.x.search?.sort ?? '';\n    },\n    get priceStats() {\n      return store.state.x.search?.stats?.price ?? {};\n    }\n  };\n}\n\n/**\n * Alias to facilitate retrieving values from the store.\n *\n * @public\n */\nexport interface UseAliasAPI {\n  /** The {@link DeviceXModule} detected device. */\n  readonly device: string | null;\n  /** The {@link FacetsXModule} facets. */\n  readonly facets: Record<Facet['id'], Facet>;\n  /** The {@link HistoryQueriesXModule} history queries matching the query. */\n  readonly historyQueries: ReadonlyArray<HistoryQuery>;\n  /** The {@link HistoryQueriesXModule} history queries with 1 or more results. */\n  readonly historyQueriesWithResults: ReadonlyArray<HistoryQuery>;\n  /** The {@link HistoryQueriesXModule} history queries. */\n  readonly fullHistoryQueries: ReadonlyArray<HistoryQuery>;\n  /** The {@link HistoryQueriesXModule} history queries enabled flag. */\n  readonly isHistoryQueriesEnabled: Readonly<boolean>;\n  /** The {@link SearchXModule} no results with filters flag. */\n  readonly fromNoResultsWithFilters: Readonly<boolean>;\n  /** The {@link IdentifierResultsXModule} results. */\n  readonly identifierResults: ReadonlyArray<Result>;\n  /** The {@link SearchBoxXModule } input status. */\n  readonly searchBoxStatus: InputStatus | undefined;\n  /** The {@link Empathize} is open state. */\n  readonly isEmpathizeOpen: boolean;\n  /** The {@link NextQueriesXModule} next queries. */\n  readonly nextQueries: ReadonlyArray<NextQuery>;\n  /** The {@link SearchXModule} no results situation. */\n  readonly noResults: boolean;\n  /** The {@link SearchXModule} partial results. */\n  readonly partialResults: ReadonlyArray<PartialResult>;\n  /** The {@link PopularSearchesXModule} popular searches. */\n  readonly popularSearches: ReadonlyArray<Suggestion>;\n  /** The query value of the different modules. */\n  readonly query: UseAliasQueryAPI;\n  /** The {@link QuerySuggestionsXModule} query suggestions that should be displayed. */\n  readonly querySuggestions: ReadonlyArray<Suggestion>;\n  /** The {@link QuerySuggestionsXModule} query suggestions. */\n  readonly fullQuerySuggestions: ReadonlyArray<Suggestion>;\n  /** The {@link RecommendationsXModule} recommendations. */\n  readonly recommendations: ReadonlyArray<Result>;\n  /** The {@link SearchXModule} redirections. */\n  readonly redirections: ReadonlyArray<Redirection>;\n  /** The {@link RelatedTagsXModule} related tags (Both selected and deselected). */\n  readonly relatedTags: ReadonlyArray<RelatedTag>;\n  /** The {@link SearchXModule} search results. */\n  readonly results: ReadonlyArray<Result>;\n  /** The {@link ScrollXModule} data state. */\n  readonly scroll: Record<string, ScrollComponentState>;\n  /** The {@link FacetsXModule} selected filters. */\n  readonly selectedFilters: Filter[];\n  /** The {@link RelatedTagsXModule} selected related tags. */\n  readonly selectedRelatedTags: ReadonlyArray<RelatedTag>;\n  /** The {@link SemanticQueriesXModule} queries. */\n  readonly semanticQueries: ReadonlyArray<SemanticQuery>;\n  /** The {@link SearchXModule} spellchecked query. */\n  readonly spellcheckedQuery: string | null;\n  /** The status value of the different modules. */\n  readonly status: UseAliasStatusAPI;\n  /** The {@link SearchXModule} total results. */\n  readonly totalResults: number;\n  /** The {@link SearchXModule} selected sort. */\n  readonly selectedSort: string;\n  /** The {@link SearchXModule} price specific stats. */\n  readonly priceStats: { min: number; max: number };\n}\n\n/**\n * Alias to facilitate retrieving the modules with query.\n *\n * @public\n */\nexport interface UseAliasQueryAPI {\n  /** The {@link FacetsXModule} query. */\n  readonly facets: string;\n  /** The {@link SearchBoxXModule} query. */\n  readonly searchBox: string;\n  /** The {@link NextQueriesXModule} query. */\n  readonly nextQueries: string;\n  /** The {@link QuerySuggestionsXModule} query. */\n  readonly querySuggestions: string;\n  /** The {@link RelatedTagsXModule} query. */\n  readonly relatedTags: string;\n  /** The {@link SearchXModule} query. */\n  readonly search: string;\n}\n\n/**\n * Alias to facilitate retrieving the modules with status.\n *\n * @public\n */\nexport interface UseAliasStatusAPI {\n  /** The {@link IdentifierResultsXModule} status. */\n  readonly identifierResults: RequestStatus | undefined;\n  /** The {@link NextQueriesXModule} status. */\n  readonly nextQueries: RequestStatus | undefined;\n  /** The {@link PopularSearchesXModule} status. */\n  readonly popularSearches: RequestStatus | undefined;\n  /** The {@link QuerySuggestionsXModule} status. */\n  readonly querySuggestions: RequestStatus | undefined;\n  /** The {@link RecommendationsXModule} status. */\n  readonly recommendations: RequestStatus | undefined;\n  /** The {@link RelatedTagsXModule} status. */\n  readonly relatedTags: RequestStatus | undefined;\n  /** The {@link SearchXModule} status. */\n  readonly search: RequestStatus | undefined;\n}\n"],"names":[],"mappings":"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"}

package/js/composables/use-getter.js

@@ -8,7 +8,7 @@ import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
 import '../plugins/x-plugin.js';
 import { getGetterPath } from '../plugins/x-plugin.utils.js';
-import { useStore } from './use-store.js';
+import { useStore } from 'vuex';
 
 /**
  * Function which returns the requested getters as a dictionary of getters.

package/js/composables/use-state.js

@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import { useStore } from './use-store.js';
+import { useStore } from 'vuex';
 
 /**
  * Function which returns the requested state's properties as a dictionary.

package/js/directives/typing.js

@@ -0,0 +1,58 @@
+/**
+ * Typing directive.
+ *
+ * @public
+ */
+const typing = {
+    mounted(el, binding) {
+        execute(el, binding.value);
+    },
+    updated(el, binding) {
+        if (binding.value.text !== binding.oldValue?.text) {
+            clearTimeout(el.__timeoutId);
+            execute(el, binding.value);
+        }
+    },
+    unmounted(el) {
+        clearTimeout(el.__timeoutId);
+    }
+};
+/**
+ * Execute a typing animation in an HTML element.
+ *
+ * @param el - The HTML element where the typing animation will be displayed.
+ * @param options - Options for the behavior of the animation.
+ */
+function execute(el, options) {
+    const { text, speed = 1, targetAttr = '' } = options;
+    if (!text) {
+        // eslint-disable-next-line no-console
+        console.error('v-typing: "text" is required.');
+        return;
+    }
+    let index = 0;
+    const updateContent = (value) => {
+        if (targetAttr) {
+            el.setAttribute(targetAttr, value);
+        }
+        else {
+            el.innerHTML = value;
+        }
+    };
+    const type = () => {
+        if (index < text.length) {
+            updateContent(text.slice(0, index + 1));
+            index++;
+            el.__timeoutId = setTimeout(type, speed);
+        }
+        else {
+            updateContent(text);
+            clearTimeout(el.__timeoutId);
+            el.__timeoutId = undefined;
+        }
+    };
+    type();
+}
+
+export { typing };
+//# sourceMappingURL=typing.js.map

package/js/directives/typing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typing.js","sources":["../../../src/directives/typing.ts"],"sourcesContent":["import type { Directive } from 'vue';\n\n/**\n * TypingOptions interface.\n *\n * @public\n */\nexport interface TypingOptions {\n  /**\n   * The text (plain or html) that will be typed into the target element.\n   */\n  text: string;\n  /**\n   * The typing speed in milliseconds per character.\n   *\n   */\n  speed?: number;\n  /**\n   * The attribute of the HTML element where the typed text will be placed.\n   * If not specified, the text will be set as content (innerHTML).\n   *\n   * @example 'placeholder'\n   */\n  targetAttr?: string;\n}\n\ninterface TypingHTMLElement extends HTMLElement {\n  __timeoutId?: number;\n}\n\n/**\n * Typing directive.\n *\n * @public\n */\nexport const typing: Directive<TypingHTMLElement, TypingOptions> = {\n  mounted(el, binding) {\n    execute(el, binding.value);\n  },\n\n  updated(el, binding) {\n    if (binding.value.text !== binding.oldValue?.text) {\n      clearTimeout(el.__timeoutId);\n      execute(el, binding.value);\n    }\n  },\n\n  unmounted(el) {\n    clearTimeout(el.__timeoutId);\n  }\n};\n\n/**\n * Execute a typing animation in an HTML element.\n *\n * @param el - The HTML element where the typing animation will be displayed.\n * @param options - Options for the behavior of the animation.\n */\nfunction execute(el: TypingHTMLElement, options: TypingOptions) {\n  const { text, speed = 1, targetAttr = '' } = options;\n\n  if (!text) {\n    // eslint-disable-next-line no-console\n    console.error('v-typing: \"text\" is required.');\n    return;\n  }\n\n  let index = 0;\n\n  const updateContent = (value: string) => {\n    if (targetAttr) {\n      el.setAttribute(targetAttr, value);\n    } else {\n      el.innerHTML = value;\n    }\n  };\n\n  const type = () => {\n    if (index < text.length) {\n      updateContent(text.slice(0, index + 1));\n      index++;\n      el.__timeoutId = setTimeout(type, speed) as unknown as number;\n    } else {\n      updateContent(text);\n      clearTimeout(el.__timeoutId);\n      el.__timeoutId = undefined;\n    }\n  };\n\n  type();\n}\n"],"names":[],"mappings":"AA8BA;;;;AAIG;AACU,MAAA,MAAM,GAAgD;IACjE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;AACjB,QAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;KAC5B;IAED,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;QACjB,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,QAAQ,EAAE,IAAI,EAAE;AACjD,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAC7B,YAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;AAC5B,SAAA;KACF;AAED,IAAA,SAAS,CAAC,EAAE,EAAA;AACV,QAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;KAC9B;EACD;AAEF;;;;;AAKG;AACH,SAAS,OAAO,CAAC,EAAqB,EAAE,OAAsB,EAAA;AAC5D,IAAA,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,OAAO,CAAC;IAErD,IAAI,CAAC,IAAI,EAAE;;AAET,QAAA,OAAO,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC/C,OAAO;AACR,KAAA;IAED,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,IAAA,MAAM,aAAa,GAAG,CAAC,KAAa,KAAI;AACtC,QAAA,IAAI,UAAU,EAAE;AACd,YAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AACpC,SAAA;AAAM,aAAA;AACL,YAAA,EAAE,CAAC,SAAS,GAAG,KAAK,CAAC;AACtB,SAAA;AACH,KAAC,CAAC;IAEF,MAAM,IAAI,GAAG,MAAK;AAChB,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,YAAA,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;AACxC,YAAA,KAAK,EAAE,CAAC;YACR,EAAE,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAsB,CAAC;AAC/D,SAAA;AAAM,aAAA;YACL,aAAa,CAAC,IAAI,CAAC,CAAC;AACpB,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAC7B,YAAA,EAAE,CAAC,WAAW,GAAG,SAAS,CAAC;AAC5B,SAAA;AACH,KAAC,CAAC;AAEF,IAAA,IAAI,EAAE,CAAC;AACT;;;;"}

package/js/index.js

@@ -128,6 +128,7 @@ export { default as BaseEventButton } from './components/base-event-button.vue.j
 export { default as BaseGrid } from './components/base-grid.vue.js';
 export { default as BaseKeyboardNavigation } from './components/base-keyboard-navigation.vue.js';
 export { default as BaseRating } from './components/base-rating.vue.js';
+export { default as BaseSlider } from './components/base-slider.vue.js';
 export { default as BaseSwitch } from './components/base-switch.vue.js';
 export { default as BaseVariableColumnGrid } from './components/base-variable-column-grid.vue.js';
 export { default as DisplayEmitter } from './components/display-emitter.vue.js';
@@ -138,6 +139,8 @@ export { default as LocationProvider } from './components/location-provider.vue.
 export { default as SlidingPanel } from './components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from './components/snippet-callbacks.vue.js';
 export { default as PageLoaderButton } from './components/page-loader-button.vue.js';
+export { default as PageSelector } from './components/page-selector.vue.js';
+export { default as DisplayClickProvider } from './components/display-click-provider.vue.js';
 export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from './components/decorators/injection.consts.js';
 export { getRootXComponent, getXComponentXModuleName, isXComponent } from './components/x-component.utils.js';
 export { createUseDevice } from './composables/create-use-device.js';
@@ -147,16 +150,20 @@ export { useDebounce } from './composables/use-debounce.js';
 export { useGetter } from './composables/use-getter.js';
 export { useEmitDisplayEvent, useOnDisplay } from './composables/use-on-display.js';
 export { useState } from './composables/use-state.js';
-export { useStore } from './composables/use-store.js';
+export { useStore } from 'vuex';
 export { useXBus } from './composables/use-x-bus.js';
 export { infiniteScroll } from './directives/infinite-scroll.js';
+export { typing } from './directives/typing.js';
 export { setupDevtools } from './plugins/devtools/devtools.plugin.js';
 export { bus } from './plugins/x-bus.js';
 export { isSimpleSelector, registerStoreEmitters } from './plugins/x-emitters.js';
 export { XPlugin, xPlugin } from './plugins/x-plugin.js';
 export { assertXPluginOptionsAreValid, getGetterPath } from './plugins/x-plugin.utils.js';
 export { DirectionalFocusNavigationService } from './services/directional-focus-navigation.service.js';
+export { mergeConfig, setConfig } from './store/utils/config-store.utils.js';
 export { createFetchAndSaveActions } from './store/utils/fetch-and-save-action.utils.js';
+export { cleanGettersProxyCache, getGettersProxy, getGettersProxyFromModule } from './store/utils/getters-proxy.utils.js';
+export { createRelatedTagsQueryGetter, setQuery } from './store/utils/query.utils.js';
 export { setStatus } from './store/utils/status-store.utils.js';
 export { createStoreEmitters } from './store/utils/store-emitters.utils.js';
 export { RootXStoreModule } from './store/x.module.js';
@@ -325,6 +332,15 @@ export { request as recommendationsRequest } from './x-modules/recommendations/s
 export { recommendationsXStoreModule } from './x-modules/recommendations/store/module.js';
 export { recommendationsWiring, setRecommendationsExtraParams } from './x-modules/recommendations/wiring.js';
 export { recommendationsXModule } from './x-modules/recommendations/x-module.js';
+export { default as RelatedPrompt } from './x-modules/related-prompts/components/related-prompt.vue.js';
+export { default as RelatedPromptsList } from './x-modules/related-prompts/components/related-prompts-list.vue.js';
+export { default as RelatedPromptsTagList } from './x-modules/related-prompts/components/related-prompts-tag-list.vue.js';
+export { cancelFetchAndSaveRelatedPrompts, fetchAndSaveRelatedPrompts } from './x-modules/related-prompts/store/actions/fetch-and-save-related-prompts.action.js';
+export { fetchRelatedPrompts } from './x-modules/related-prompts/store/actions/fetch-related-prompts.action.js';
+export { relatedPromptsStoreEmitters } from './x-modules/related-prompts/store/emitters.js';
+export { relatedPromptsXStoreModule } from './x-modules/related-prompts/store/module.js';
+export { relatedPromptsWiring } from './x-modules/related-prompts/wiring.js';
+export { relatedPromptsXModule } from './x-modules/related-prompts/x-module.js';
 export { default as RelatedTag } from './x-modules/related-tags/components/related-tag.vue.js';
 export { default as RelatedTags } from './x-modules/related-tags/components/related-tags.vue.js';
 export { cancelFetchAndSaveRelatedTags, fetchAndSaveRelatedTags } from './x-modules/related-tags/store/actions/fetch-and-save-related-tags.action.js';
@@ -390,16 +406,16 @@ export { semanticQueriesXStoreModule } from './x-modules/semantic-queries/store/
 export { semanticQueriesXModule } from './x-modules/semantic-queries/x-module.js';
 export { clearQueryWire, fetchAndSaveSemanticQueryWire, semanticQueriesWiring, setQueryFromSearchResponseChangedWire, setQueryWire, setSemanticQueriesExtraParamsWire, setTotalResultsFromSearchResponseChangedWire, setTotalResultsWire } from './x-modules/semantic-queries/wiring.js';
 export { default as Tagging } from './x-modules/tagging/components/tagging.vue.js';
-export { DefaultPDPAddToCartService } from './x-modules/tagging/service/pdp-add-to-cart.service.js';
+export { DefaultExternalTaggingService } from './x-modules/tagging/service/external-tagging.service.js';
 export { track } from './x-modules/tagging/store/actions/track.action.js';
 export { taggingEmitters } from './x-modules/tagging/store/emitters.js';
 export { taggingXStoreModule } from './x-modules/tagging/store/module.js';
-export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackResultClickedWire } from './x-modules/tagging/wiring.js';
+export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire } from './x-modules/tagging/wiring.js';
 export { taggingXModule } from './x-modules/tagging/x-module.js';
 export { default as UrlHandler } from './x-modules/url/components/url-handler.vue.js';
 export { replaceableParams, urlEmitters } from './x-modules/url/store/emitters.js';
 export { urlXStoreModule } from './x-modules/url/store/module.js';
-export { setInitialExtraParams, setParams, setUrlFilters, setUrlPage, setUrlParamsFromPreview, setUrlQuery, setUrlQueryFromPreview, setUrlRelatedTags, setUrlScroll, setUrlSelectedFiltersFromPreview, setUrlSort, urlWiring } from './x-modules/url/wiring.js';
+export { setInitialExtraParams, setParams, setUrlFilters, setUrlPage, setUrlParamsFromPreview, setUrlPrompt, setUrlQuery, setUrlQueryFromPreview, setUrlRelatedTags, setUrlScroll, setUrlSelectedFiltersFromPreview, setUrlSort, urlWiring } from './x-modules/url/wiring.js';
 export { urlXModule } from './x-modules/url/x-module.js';
 export { default as ExperienceControls } from './x-modules/experience-controls/components/experience-controls.vue.js';
 export { cancelFetchAndSaveControls, fetchAndSaveExperienceControlsResponse } from './x-modules/experience-controls/store/actions/fetch-and-save-experience-controls.action.js';

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/types/animation-prop.js

@@ -1,6 +1,11 @@
 /**
  * Type for animations props.
  *
+ * @remarks
+ * String for 'ul'
+ * Object for `DefineComponent` type
+ * Function for `() => NoElement`
+ *
  * @public
  */
 const AnimationProp = [String, Object, Function];

package/js/types/animation-prop.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation-prop.js","sources":["../../../src/types/animation-prop.ts"],"sourcesContent":["import { DefineComponent, PropType } from 'vue';\n\n/**\n * Type for animations props.\n *\n * @public\n */\nexport const AnimationProp = [String, Object, Function] as PropType<DefineComponent | string>;\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,aAAa,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ;;;;"}
+{"version":3,"file":"animation-prop.js","sources":["../../../src/types/animation-prop.ts"],"sourcesContent":["/**\n * Type for animations props.\n *\n * @remarks\n * String for 'ul'\n * Object for `DefineComponent` type\n * Function for `() => NoElement`\n *\n * @public\n */\nexport const AnimationProp = [String, Object, Function];\n"],"names":[],"mappings":"AAAA;;;;;;;;;AASG;AACU,MAAA,aAAa,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ;;;;"}

package/js/x-installer/x-installer/x-installer.js

@@ -234,10 +234,10 @@ class XInstaller {
      * returns an Element or element selector to use.
      * If it is not present, a new <div> Element is created and appended to the body.
      *
-     * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used
-     * to mount the Vue Application.
+     * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function
+     * used to mount the Vue Application.
      *
-     * @returns The Element to use as mounting target for the Vue Application.
+     * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.
      * @internal
      */
     getMountingTarget(domElement) {

package/js/x-installer/x-installer/x-installer.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach, isFunction } from '@empathyco/x-utils';\nimport { App, createApp, reactive, Plugin } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { bus } from '../../plugins/x-bus';\nimport { InitWrapper, InstallXOptions } from './types';\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI;\n    initX?: (() => SnippetConfig) | SnippetConfig;\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private app!: App;\n  private api?: XAPI;\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI();\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options;\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI();\n      this.api.setInitCallback(this.init.bind(this));\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n      this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));\n      window.InterfaceX = this.api;\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX();\n    } else if (typeof window.initX === 'object') {\n      return window.initX;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the {@link @empathyco/x-bus#XBus}, the {@link XPlugin}\n   * and the Vue application instance. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n  init(): Promise<InitWrapper | void>;\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));\n      this.createApp();\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      await this.installExtraPlugins(bus);\n      this.api?.setBus(bus);\n      this.app.mount(this.getMountingTarget(this.options.domElement));\n\n      return {\n        api: this.api,\n        app: this.app,\n        bus,\n        plugin\n      };\n    }\n\n    return Promise.resolve();\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules\n    };\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus<XEventsTypes, WireMetadata> {\n    return this.options.bus ?? bus;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.\n   *\n   * @returns Plugin<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(\n    pluginOptions: XPluginOptions,\n    bus: XBus<XEventsTypes, WireMetadata>\n  ): Plugin<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    this.app.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n   * to allow the user to install more plugins to the App.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns An empty promise.\n   * @internal\n   */\n  protected installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus })\n    );\n  }\n\n  /**\n   * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n   * then a new Vue application is created using that component as root.\n   *\n   * @internal\n   */\n  protected createApp(): void {\n    if (this.options.rootComponent !== undefined) {\n      this.app = createApp(this.options.rootComponent);\n      this.app.provide('snippetConfig', this.snippetConfig);\n      this.options.onCreateApp?.(this.app);\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang;\n    }\n    return snippetConfig;\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n   * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n   * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n   * returns an Element or element selector to use.\n   * If it is not present, a new <div> Element is created and appended to the body.\n   *\n   * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used\n   * to mount the Vue Application.\n   *\n   * @returns The Element to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element {\n    if (isFunction(domElement)) {\n      domElement = domElement(this.snippetConfig!);\n    }\n    if (typeof domElement === 'string') {\n      const target = document.querySelector(domElement);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n        );\n      }\n      return target;\n    }\n    return domElement ?? document.body.appendChild(document.createElement('div'));\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return;\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.snippetConfig![name] = value;\n    });\n  }\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  protected getSnippetConfig(): NormalisedSnippetConfig {\n    return this.snippetConfig!;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach, isFunction } from '@empathyco/x-utils';\nimport { App, createApp, reactive, Plugin } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { bus } from '../../plugins/x-bus';\nimport { InitWrapper, InstallXOptions } from './types';\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI;\n    initX?: (() => SnippetConfig) | SnippetConfig;\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private app!: App;\n  private api?: XAPI;\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI();\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options;\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI();\n      this.api.setInitCallback(this.init.bind(this));\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n      this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));\n      window.InterfaceX = this.api;\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX();\n    } else if (typeof window.initX === 'object') {\n      return window.initX;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the {@link @empathyco/x-bus#XBus}, the {@link XPlugin}\n   * and the Vue application instance. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n  init(): Promise<InitWrapper | void>;\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));\n      this.createApp();\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      await this.installExtraPlugins(bus);\n      this.api?.setBus(bus);\n      this.app.mount(this.getMountingTarget(this.options.domElement));\n\n      return {\n        api: this.api,\n        app: this.app,\n        bus,\n        plugin\n      };\n    }\n\n    return Promise.resolve();\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules\n    };\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus<XEventsTypes, WireMetadata> {\n    return this.options.bus ?? bus;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.\n   *\n   * @returns Plugin<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(\n    pluginOptions: XPluginOptions,\n    bus: XBus<XEventsTypes, WireMetadata>\n  ): Plugin<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    this.app.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n   * to allow the user to install more plugins to the App.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns An empty promise.\n   * @internal\n   */\n  protected installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus })\n    );\n  }\n\n  /**\n   * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n   * then a new Vue application is created using that component as root.\n   *\n   * @internal\n   */\n  protected createApp(): void {\n    if (this.options.rootComponent !== undefined) {\n      this.app = createApp(this.options.rootComponent);\n      this.app.provide('snippetConfig', this.snippetConfig);\n      this.options.onCreateApp?.(this.app);\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang;\n    }\n    return snippetConfig;\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n   * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n   * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n   * returns an Element or element selector to use.\n   * If it is not present, a new <div> Element is created and appended to the body.\n   *\n   * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function\n   * used to mount the Vue Application.\n   *\n   * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element | ShadowRoot {\n    if (isFunction(domElement)) {\n      domElement = domElement(this.snippetConfig!);\n    }\n    if (typeof domElement === 'string') {\n      const target = document.querySelector(domElement);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n        );\n      }\n      return target;\n    }\n    return domElement ?? document.body.appendChild(document.createElement('div'));\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return;\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.snippetConfig![name] = value;\n    });\n  }\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  protected getSnippetConfig(): NormalisedSnippetConfig {\n    return this.snippetConfig!;\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/device/store/emitters.js

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

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

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

package/js/x-modules/empathize/components/empathize.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './empathize.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, withDirectives, createElementVNode, withModifiers, createCommentVNode, renderSlot, vShow } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, withDirectives, createElementVNode, withModifiers, renderSlot, vShow } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -17,7 +17,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "data-test": "empathize"
         },
         [
-          createCommentVNode(" @slot (Required) Modal container content "),
           renderSlot(_ctx.$slots, "default")
         ],
         544

package/js/x-modules/empathize/components/empathize.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpen && hasContent\"\n      ref=\"empathizeRef\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref } from 'vue';\n  import { NoAnimation } from '../../../components';\n  import { use$x, useDebounce } from '../../../composables';\n  import { AnimationProp } from '../../../types';\n  import { XEvent } from '../../../wiring';\n  import { empathizeXModule } from '../x-module';\n  import { getActiveElement } from '../../../utils/html';\n\n  /**\n   * Component containing the empathize. It has a required slot to define its content and two props\n   * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Empathize',\n    xModule: empathizeXModule.name,\n    props: {\n      /** Array of {@link XEvent} to open the empathize. */\n      eventsToOpenEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n      },\n      /** Array of {@link XEvent} to close the empathize. */\n      eventsToCloseEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => [\n          'UserClosedEmpathize',\n          'UserSelectedASuggestion',\n          'UserPressedEnterKey',\n          'UserBlurredSearchBox'\n        ]\n      },\n      /** Animation component that will be used to animate the empathize. */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const empathizeRef = ref<HTMLDivElement>();\n\n      const isOpen = ref(false);\n      const hasContent = ref(!!empathizeRef.value?.children.length);\n\n      /**\n       * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n       * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n       * the state really changes.\n       *\n       * @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n       */\n      const changeOpen = useDebounce((newOpen: boolean) => {\n        if (isOpen.value !== newOpen) {\n          isOpen.value = newOpen;\n          const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n          $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n        }\n      }, 0);\n\n      /**\n       * Open empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n       * element.\n       */\n      function open() {\n        hasContent.value = !!empathizeRef.value?.children.length;\n        if (hasContent.value) {\n          changeOpen(true);\n        }\n      }\n\n      /**\n       * Close empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n       * element.\n       */\n      function close() {\n        const activeElement = getActiveElement();\n        if (!empathizeRef.value?.contains(activeElement)) {\n          changeOpen(false);\n        }\n      }\n\n      props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n      props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n      return {\n        close,\n        empathizeRef,\n        hasContent,\n        isOpen,\n        open\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n  'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n</docs>\n"],"names":["_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","_createCommentVNode","isOpen","hasContent"],"mappings":";;;;SAAA,WAaU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;sBAXNA,WAWM,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EATAC,OAAc,CAAA,MAAA;AAAA,MACRC,cAAA,CAAAC,kBAAA;AAAA,QAAA,KAAA;AAAA,QALhB;AAAA,UAMO,GAAA,EAAA,cAAA;AAAA,UACA,aAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACX,WAAM,MAAa,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACnB,UAAA,EAAS,OAAC,CAAW,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAA,aAAA;AAErB,UAAA,WAAA,EAAA,WAAA;AAAA,SAAA;AACA,QAAA;AAAA,UAAAC,kBAAA,CAAA,4CAAA,CAAA;qBATQC,IAAUC,CAAAA,MAAAA,EAAAA,SAAAA,CAAAA;AAAAA,SAAAA;;;;;AAHxB,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpen && hasContent\"\n      ref=\"empathizeRef\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref, computed } from 'vue';\n  import { NoAnimation } from '../../../components';\n  import { use$x, useDebounce } from '../../../composables';\n  import { AnimationProp } from '../../../types';\n  import { XEvent } from '../../../wiring';\n  import { empathizeXModule } from '../x-module';\n  import { getActiveElement } from '../../../utils/html';\n\n  /**\n   * Component containing the empathize. It has a required slot to define its content and two props\n   * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Empathize',\n    xModule: empathizeXModule.name,\n    props: {\n      /** Array of {@link XEvent} to open the empathize. */\n      eventsToOpenEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n      },\n      /** Array of {@link XEvent} to close the empathize. */\n      eventsToCloseEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => [\n          'UserClosedEmpathize',\n          'UserSelectedASuggestion',\n          'UserPressedEnterKey',\n          'UserBlurredSearchBox'\n        ]\n      },\n      /** Animation component that will be used to animate the empathize. */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const empathizeRef = ref<HTMLDivElement>();\n\n      const isOpen = ref(false);\n      const hasContent = computed(() => !!empathizeRef.value?.children?.length);\n\n      /**\n       * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n       * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n       * the state really changes.\n       *\n       * @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n       */\n      const changeOpen = useDebounce((newOpen: boolean) => {\n        if (isOpen.value !== newOpen) {\n          isOpen.value = newOpen;\n          const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n          $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n        }\n      }, 0);\n\n      /**\n       * Open empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n       * element.\n       */\n      function open() {\n        if (hasContent.value) {\n          changeOpen(true);\n        }\n      }\n\n      /**\n       * Close empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n       * element.\n       */\n      function close() {\n        const activeElement = getActiveElement();\n        if (!empathizeRef.value?.contains(activeElement)) {\n          changeOpen(false);\n        }\n      }\n\n      props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n      props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n      return {\n        close,\n        empathizeRef,\n        hasContent,\n        isOpen,\n        open\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n  'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n</docs>\n"],"names":["_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","isOpen","hasContent"],"mappings":";;;;SAAA,WAaU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;sBAXNA,WAWM,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EATAC,OAAc,CAAA,MAAA;AAAA,MACRC,cAAA,CAAAC,kBAAA;AAAA,QAAA,KAAA;AAAA,QALhB;AAAA,UAMO,GAAA,EAAA,cAAA;AAAA,UACA,aAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACX,WAAM,MAAa,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACnB,UAAA,EAAS,OAAC,CAAW,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAA,aAAA;UAGrB,WAAQ,EAAA,WAAA;AAAA,SAAA;;qBATAC,IAAUC,CAAAA,MAAAA,EAAAA,SAAAA,CAAAA;AAAAA,SAAAA;;;;;AAHxB,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/empathize/components/empathize.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, computed } from 'vue';
 import '../../../components/animations/animate-width.vue2.js';
 import '../../../components/animations/animate-width.vue3.js';
 import '../../../components/animations/collapse-height.vue2.js';
@@ -75,6 +75,8 @@ import '../../../components/base-grid.vue3.js';
 import '../../../components/base-keyboard-navigation.vue2.js';
 import '../../../components/base-rating.vue2.js';
 import '../../../components/base-rating.vue3.js';
+import '../../../components/base-slider.vue2.js';
+import '../../../components/base-slider.vue3.js';
 import '../../../components/base-switch.vue2.js';
 import '../../../components/base-switch.vue3.js';
 import '../../../components/base-variable-column-grid.vue2.js';
@@ -87,6 +89,10 @@ import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
 import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-loader-button.vue3.js';
+import '../../../components/page-selector.vue2.js';
+import '../../../components/page-selector.vue3.js';
+import '../../../components/display-click-provider.vue.js';
 import '../../../composables/create-use-device.js';
 import '@vue/devtools-api';
 import '../../../plugins/devtools/timeline.devtools.js';
@@ -137,7 +143,7 @@ var _sfc_main = defineComponent({
         const $x = use$x();
         const empathizeRef = ref();
         const isOpen = ref(false);
-        const hasContent = ref(!!empathizeRef.value?.children.length);
+        const hasContent = computed(() => !!empathizeRef.value?.children?.length);
         /**
          * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`
          * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if
@@ -158,7 +164,6 @@ var _sfc_main = defineComponent({
          * element.
          */
         function open() {
-            hasContent.value = !!empathizeRef.value?.children.length;
             if (hasContent.value) {
                 changeOpen(true);
             }

package/js/x-modules/empathize/components/empathize.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpen && hasContent\"\n      ref=\"empathizeRef\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref } from 'vue';\n  import { NoAnimation } from '../../../components';\n  import { use$x, useDebounce } from '../../../composables';\n  import { AnimationProp } from '../../../types';\n  import { XEvent } from '../../../wiring';\n  import { empathizeXModule } from '../x-module';\n  import { getActiveElement } from '../../../utils/html';\n\n  /**\n   * Component containing the empathize. It has a required slot to define its content and two props\n   * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Empathize',\n    xModule: empathizeXModule.name,\n    props: {\n      /** Array of {@link XEvent} to open the empathize. */\n      eventsToOpenEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n      },\n      /** Array of {@link XEvent} to close the empathize. */\n      eventsToCloseEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => [\n          'UserClosedEmpathize',\n          'UserSelectedASuggestion',\n          'UserPressedEnterKey',\n          'UserBlurredSearchBox'\n        ]\n      },\n      /** Animation component that will be used to animate the empathize. */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const empathizeRef = ref<HTMLDivElement>();\n\n      const isOpen = ref(false);\n      const hasContent = ref(!!empathizeRef.value?.children.length);\n\n      /**\n       * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n       * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n       * the state really changes.\n       *\n       * @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n       */\n      const changeOpen = useDebounce((newOpen: boolean) => {\n        if (isOpen.value !== newOpen) {\n          isOpen.value = newOpen;\n          const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n          $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n        }\n      }, 0);\n\n      /**\n       * Open empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n       * element.\n       */\n      function open() {\n        hasContent.value = !!empathizeRef.value?.children.length;\n        if (hasContent.value) {\n          changeOpen(true);\n        }\n      }\n\n      /**\n       * Close empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n       * element.\n       */\n      function close() {\n        const activeElement = getActiveElement();\n        if (!empathizeRef.value?.contains(activeElement)) {\n          changeOpen(false);\n        }\n      }\n\n      props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n      props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n      return {\n        close,\n        empathizeRef,\n        hasContent,\n        isOpen,\n        open\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n  'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAA;AACrF,SAAA;;AAED,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM;gBACb,qBAAqB;gBACrB,yBAAyB;gBACzB,qBAAqB;gBACrB,sBAAqB;AACvB,aAAA;AACD,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC3B,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,eAAe,GAAG,EAAkB,CAAA;AAE1C,QAAA,MAAM,MAAK,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;AACzB,QAAA,MAAM,aAAa,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;AAE7D;;;;;;AAME;AACF,QAAA,MAAM,aAAa,WAAW,CAAC,CAAC,OAAgB,KAAK;AACnD,YAAA,IAAI,MAAM,CAAC,KAAM,KAAI,OAAO,EAAE;AAC5B,gBAAA,MAAM,CAAC,KAAI,GAAI,OAAO,CAAA;AACtB,gBAAA,MAAM,cAAe,GAAE,MAAM,CAAC,QAAQ,iBAAkB,GAAE,iBAAiB,CAAA;AAC3E,gBAAA,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,KAAM,EAAC,CAAC,CAAA;AACpE,aAAA;SACD,EAAE,CAAC,CAAC,CAAA;AAEL;;;;AAIE;AACF,QAAA,SAAS,IAAI,GAAA;AACX,YAAA,UAAU,CAAC,KAAI,GAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAA;YACxD,IAAI,UAAU,CAAC,KAAK,EAAE;gBACpB,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,aAAA;SACF;AAEA;;;;AAIE;AACF,QAAA,SAAS,KAAK,GAAA;AACZ,YAAA,MAAM,aAAY,GAAI,gBAAgB,EAAE,CAAA;YACxC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAChD,UAAU,CAAC,KAAK,CAAC,CAAA;AACnB,aAAA;SACF;QAEA,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,KAAI,IAAK,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAA;QACjF,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,KAAI,IAAK,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;QAEnF,OAAO;YACL,KAAK;YACL,YAAY;YACZ,UAAU;YACV,MAAM;YACN,IAAG;SACJ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpen && hasContent\"\n      ref=\"empathizeRef\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref, computed } from 'vue';\n  import { NoAnimation } from '../../../components';\n  import { use$x, useDebounce } from '../../../composables';\n  import { AnimationProp } from '../../../types';\n  import { XEvent } from '../../../wiring';\n  import { empathizeXModule } from '../x-module';\n  import { getActiveElement } from '../../../utils/html';\n\n  /**\n   * Component containing the empathize. It has a required slot to define its content and two props\n   * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Empathize',\n    xModule: empathizeXModule.name,\n    props: {\n      /** Array of {@link XEvent} to open the empathize. */\n      eventsToOpenEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n      },\n      /** Array of {@link XEvent} to close the empathize. */\n      eventsToCloseEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => [\n          'UserClosedEmpathize',\n          'UserSelectedASuggestion',\n          'UserPressedEnterKey',\n          'UserBlurredSearchBox'\n        ]\n      },\n      /** Animation component that will be used to animate the empathize. */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const empathizeRef = ref<HTMLDivElement>();\n\n      const isOpen = ref(false);\n      const hasContent = computed(() => !!empathizeRef.value?.children?.length);\n\n      /**\n       * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n       * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n       * the state really changes.\n       *\n       * @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n       */\n      const changeOpen = useDebounce((newOpen: boolean) => {\n        if (isOpen.value !== newOpen) {\n          isOpen.value = newOpen;\n          const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n          $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n        }\n      }, 0);\n\n      /**\n       * Open empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n       * element.\n       */\n      function open() {\n        if (hasContent.value) {\n          changeOpen(true);\n        }\n      }\n\n      /**\n       * Close empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n       * element.\n       */\n      function close() {\n        const activeElement = getActiveElement();\n        if (!empathizeRef.value?.contains(activeElement)) {\n          changeOpen(false);\n        }\n      }\n\n      props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n      props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n      return {\n        close,\n        empathizeRef,\n        hasContent,\n        isOpen,\n        open\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n  'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAA;AACrF,SAAA;;AAED,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM;gBACb,qBAAqB;gBACrB,yBAAyB;gBACzB,qBAAqB;gBACrB,sBAAqB;AACvB,aAAA;AACD,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC3B,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,eAAe,GAAG,EAAkB,CAAA;AAE1C,QAAA,MAAM,MAAK,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;AACzB,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;AAEzE;;;;;;AAME;AACF,QAAA,MAAM,aAAa,WAAW,CAAC,CAAC,OAAgB,KAAK;AACnD,YAAA,IAAI,MAAM,CAAC,KAAM,KAAI,OAAO,EAAE;AAC5B,gBAAA,MAAM,CAAC,KAAI,GAAI,OAAO,CAAA;AACtB,gBAAA,MAAM,cAAe,GAAE,MAAM,CAAC,QAAQ,iBAAkB,GAAE,iBAAiB,CAAA;AAC3E,gBAAA,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,KAAM,EAAC,CAAC,CAAA;AACpE,aAAA;SACD,EAAE,CAAC,CAAC,CAAA;AAEL;;;;AAIE;AACF,QAAA,SAAS,IAAI,GAAA;YACX,IAAI,UAAU,CAAC,KAAK,EAAE;gBACpB,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,aAAA;SACF;AAEA;;;;AAIE;AACF,QAAA,SAAS,KAAK,GAAA;AACZ,YAAA,MAAM,aAAY,GAAI,gBAAgB,EAAE,CAAA;YACxC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAChD,UAAU,CAAC,KAAK,CAAC,CAAA;AACnB,aAAA;SACF;QAEA,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,KAAI,IAAK,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAA;QACjF,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,KAAI,IAAK,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;QAEnF,OAAO;YACL,KAAK;YACL,YAAY;YACZ,UAAU;YACV,MAAM;YACN,IAAG;SACJ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/empathize/store/emitters.js

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

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

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

package/js/x-modules/experience-controls/store/emitters.js

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

package/js/x-modules/experience-controls/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/experience-controls/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { experienceControlsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the {@link ExperienceControlsXModule}.\n *\n * @internal\n */\nexport const experienceControlsEmitters = createStoreEmitters(experienceControlsXStoreModule, {\n  ExperienceControlsEventsChanged: {\n    selector: state => state.events\n  },\n  ExperienceControlsRequestUpdated: (_, getters) => getters.experienceControlsRequest\n});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACU,MAAA,0BAA0B,GAAG,mBAAmB,CAAC,8BAA8B,EAAE;AAC5F,IAAA,+BAA+B,EAAE;AAC/B,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM;AAChC,KAAA;IACD,gCAAgC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,yBAAyB;AACpF,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/experience-controls/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { experienceControlsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the {@link ExperienceControlsXModule}.\n *\n * @internal\n */\nexport const experienceControlsEmitters = createStoreEmitters(experienceControlsXStoreModule, {\n  ExperienceControlsEventsChanged: {\n    selector: state => state.events\n  },\n  ExperienceControlsRequestUpdated: (_, getters) => getters.experienceControlsRequest\n});\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,0BAA0B,GAAG,mBAAmB,CAAC,8BAA8B,EAAE;AAC5F,IAAA,+BAA+B,EAAE;AAC/B,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM;AAChC,KAAA;IACD,gCAAgC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,yBAAyB;AACpF,CAAA;;;;"}

package/js/x-modules/extra-params/components/extra-params.vue.js

@@ -22,7 +22,7 @@ var _sfc_main = defineComponent({
         const params = useState('extraParams', ['params']).params;
         const $x = use$x();
         $x.emit('ExtraParamsInitialized', { ...props.values });
-        $x.emit('ExtraParamsProvided', { ...props.values, ...params.value });
+        $x.emit('ExtraParamsProvided', { ...params.value, ...props.values });
         watch(() => props.values, values => {
             $x.emit('ExtraParamsProvided', { ...values });
         }, { deep: true });

package/js/x-modules/extra-params/components/extra-params.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Dictionary } from '@empathyco/x-utils';\n  import { ComputedRef, defineComponent, PropType, watch } from 'vue';\n  import { extraParamsXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n   * received as a prop.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'ExtraParams',\n    xModule: extraParamsXModule.name,\n    props: {\n      values: {\n        type: Object as PropType<Dictionary<unknown>>,\n        required: true\n      }\n    },\n    setup(props) {\n      const params: ComputedRef<Dictionary> = useState('extraParams', ['params']).params;\n      const $x = use$x();\n\n      $x.emit('ExtraParamsInitialized', { ...props.values });\n      $x.emit('ExtraParamsProvided', { ...props.values, ...params.value });\n\n      watch(\n        () => props.values,\n        values => {\n          $x.emit('ExtraParamsProvided', { ...values });\n        },\n        { deep: true }\n      );\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      return () => {};\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\n- [`ExtraParamsProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n  <ExtraParams :values=\"values\" />\n</template>\n\n<script>\n  import { ExtraParams } from '@empathyco/x-components/extra-params';\n\n  export default {\n    name: 'ExtraParamsDemo',\n    components: {\n      ExtraParams\n    },\n    data() {\n      return {\n        values: {\n          warehouse: 1234\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAOE;;;;;AAKE;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC7C,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAM,GAA4B,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;AAClF,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,KAAK,CAAC,MAAO,EAAC,CAAC,CAAA;AACtD,QAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,KAAI,EAAG,CAAC,CAAA;QAEpE,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,MAAK,IAAK;YACR,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAK,EAAG,CAAC,CAAA;AAC/C,SAAC,EACD,EAAE,IAAI,EAAE,IAAK,EAAA,CACd,CAAA;;AAED,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Dictionary } from '@empathyco/x-utils';\n  import { ComputedRef, defineComponent, PropType, watch } from 'vue';\n  import { extraParamsXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n   * received as a prop.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'ExtraParams',\n    xModule: extraParamsXModule.name,\n    props: {\n      values: {\n        type: Object as PropType<Dictionary<unknown>>,\n        required: true\n      }\n    },\n    setup(props) {\n      const params: ComputedRef<Dictionary> = useState('extraParams', ['params']).params;\n      const $x = use$x();\n\n      $x.emit('ExtraParamsInitialized', { ...props.values });\n      $x.emit('ExtraParamsProvided', { ...params.value, ...props.values });\n\n      watch(\n        () => props.values,\n        values => {\n          $x.emit('ExtraParamsProvided', { ...values });\n        },\n        { deep: true }\n      );\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      return () => {};\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\n- [`ExtraParamsProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n  <ExtraParams :values=\"values\" />\n</template>\n\n<script>\n  import { ExtraParams } from '@empathyco/x-components/extra-params';\n\n  export default {\n    name: 'ExtraParamsDemo',\n    components: {\n      ExtraParams\n    },\n    data() {\n      return {\n        values: {\n          warehouse: 1234\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAOE;;;;;AAKE;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC7C,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAM,GAA4B,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;AAClF,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,KAAK,CAAC,MAAO,EAAC,CAAC,CAAA;AACtD,QAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,MAAK,EAAG,CAAC,CAAA;QAEpE,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,MAAK,IAAK;YACR,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAK,EAAG,CAAC,CAAA;AAC/C,SAAC,EACD,EAAE,IAAI,EAAE,IAAK,EAAA,CACd,CAAA;;AAED,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/extra-params/store/emitters.js

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

package/js/x-modules/extra-params/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/extra-params/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { extraParamsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the {@link ExtraParamsXModule}.\n *\n * @internal\n */\nexport const extraParamsEmitters = createStoreEmitters(extraParamsXStoreModule, {\n  ExtraParamsChanged: {\n    selector: state => state.params,\n    metadata: { priority: 9 }\n  }\n});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE;AAClB,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM;AAC/B,QAAA,QAAQ,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;AAC1B,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/extra-params/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { extraParamsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the {@link ExtraParamsXModule}.\n *\n * @internal\n */\nexport const extraParamsEmitters = createStoreEmitters(extraParamsXStoreModule, {\n  ExtraParamsChanged: {\n    selector: state => state.params,\n    metadata: { priority: 9 }\n  }\n});\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE;AAClB,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM;AAC/B,QAAA,QAAQ,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;AAC1B,KAAA;AACF,CAAA;;;;"}