@empathyco/x-components 3.0.0-alpha.146 → 3.0.0-alpha.147

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/design-system/default-theme.css +73 -73
  3. package/design-system/full-theme.css +4 -5
  4. package/docs/API-reference/api/x-adapter-platform.md +0 -1
  5. package/docs/API-reference/api/x-adapter-platform.searchresponsemapper.md +1 -11
  6. package/docs/API-reference/api/x-components.facetsmutations.md +1 -1
  7. package/docs/API-reference/api/x-components.facetsmutations.mutatefilter.md +24 -0
  8. package/docs/API-reference/api/x-components.flathierarchicalfilters.md +26 -0
  9. package/docs/API-reference/api/x-components.md +2 -0
  10. package/docs/API-reference/api/x-components.mutatefilterpayload.filter.md +13 -0
  11. package/docs/API-reference/api/x-components.mutatefilterpayload.md +21 -0
  12. package/docs/API-reference/api/x-components.mutatefilterpayload.newfilterstate.md +13 -0
  13. package/docs/API-reference/api/x-types.hierarchicalfilter.children.md +2 -2
  14. package/docs/API-reference/api/x-types.hierarchicalfilter.md +2 -2
  15. package/docs/API-reference/api/x-types.hierarchicalfilter.parentid.md +1 -1
  16. package/facets/index.js +1 -1
  17. package/js/index.js +1 -1
  18. package/js/x-modules/facets/components/facets/facets-provider.vue.js +2 -2
  19. package/js/x-modules/facets/components/facets/facets-provider.vue.js.map +1 -1
  20. package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue_script.vue.js +7 -2
  21. package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  22. package/js/x-modules/facets/components/filters/hierarchical-filter.vue.js.map +1 -1
  23. package/js/x-modules/facets/components/filters/hierarchical-filter.vue_rollup-plugin-vue_script.vue.js +2 -130
  24. package/js/x-modules/facets/components/filters/hierarchical-filter.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  25. package/js/x-modules/facets/entities/editable-number-range-filter.entity.js +11 -10
  26. package/js/x-modules/facets/entities/editable-number-range-filter.entity.js.map +1 -1
  27. package/js/x-modules/facets/entities/hierarchical-filter.entity.js +9 -11
  28. package/js/x-modules/facets/entities/hierarchical-filter.entity.js.map +1 -1
  29. package/js/x-modules/facets/entities/number-range-filter.entity.js +2 -2
  30. package/js/x-modules/facets/entities/number-range-filter.entity.js.map +1 -1
  31. package/js/x-modules/facets/entities/raw-filter.entity.js +1 -1
  32. package/js/x-modules/facets/entities/raw-filter.entity.js.map +1 -1
  33. package/js/x-modules/facets/entities/simple-filter.entity.js +2 -2
  34. package/js/x-modules/facets/entities/simple-filter.entity.js.map +1 -1
  35. package/js/x-modules/facets/entities/single-select.modifier.js +1 -1
  36. package/js/x-modules/facets/entities/single-select.modifier.js.map +1 -1
  37. package/js/x-modules/facets/service/facets.service.js +18 -2
  38. package/js/x-modules/facets/service/facets.service.js.map +1 -1
  39. package/js/x-modules/facets/store/module.js +4 -3
  40. package/js/x-modules/facets/store/module.js.map +1 -1
  41. package/js/x-modules/facets/utils.js +16 -1
  42. package/js/x-modules/facets/utils.js.map +1 -1
  43. package/js/x-modules/search-box/components/search-input.vue.js +54 -45
  44. package/js/x-modules/search-box/components/search-input.vue.js.map +1 -1
  45. package/js/x-modules/search-box/components/search-input.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  46. package/package.json +4 -4
  47. package/report/x-adapter-platform.api.json +5 -133
  48. package/report/x-components.api.json +181 -45
  49. package/report/x-components.api.md +14 -5
  50. package/report/x-types.api.json +5 -5
  51. package/types/x-modules/facets/components/facets/facets-provider.vue.d.ts.map +1 -1
  52. package/types/x-modules/facets/components/filters/hierarchical-filter.vue.d.ts +0 -6
  53. package/types/x-modules/facets/components/filters/hierarchical-filter.vue.d.ts.map +1 -1
  54. package/types/x-modules/facets/entities/editable-number-range-filter.entity.d.ts +1 -1
  55. package/types/x-modules/facets/entities/editable-number-range-filter.entity.d.ts.map +1 -1
  56. package/types/x-modules/facets/entities/hierarchical-filter.entity.d.ts +2 -1
  57. package/types/x-modules/facets/entities/hierarchical-filter.entity.d.ts.map +1 -1
  58. package/types/x-modules/facets/entities/single-select.modifier.d.ts.map +1 -1
  59. package/types/x-modules/facets/service/facets.service.d.ts +13 -0
  60. package/types/x-modules/facets/service/facets.service.d.ts.map +1 -1
  61. package/types/x-modules/facets/store/module.d.ts.map +1 -1
  62. package/types/x-modules/facets/store/types.d.ts +22 -6
  63. package/types/x-modules/facets/store/types.d.ts.map +1 -1
  64. package/types/x-modules/facets/utils.d.ts +11 -0
  65. package/types/x-modules/facets/utils.d.ts.map +1 -1
  66. package/types/x-modules/search-box/components/search-input.vue.d.ts.map +1 -1
  67. package/docs/API-reference/api/x-adapter-platform.searchresponsefacetsmapper.md +0 -27
  68. package/docs/API-reference/api/x-components.facetsmutations.setfilter.md +0 -24
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../../../../../src/x-modules/facets/store/module.ts"],"sourcesContent":["import { Facet } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { facets } from './getters/facets.getter';\nimport { selectedFiltersByFacet } from './getters/selected-filters-by-facet.getter';\nimport { selectedFilters } from './getters/selected-filters.getter';\nimport { FacetGroupEntry, FacetsXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the facets module.\n *\n * @internal\n */\nexport const facetsXStoreModule: FacetsXStoreModule = {\n state: () => ({\n filters: {},\n groups: {},\n facets: {},\n preselectedFilters: []\n }),\n getters: {\n selectedFilters,\n selectedFiltersByFacet,\n facets\n },\n mutations: {\n setFilter(state, filter) {\n Vue.set(state.filters, filter.id, Object.freeze(filter));\n },\n setFilters(state, filters) {\n filters.forEach(filter => Vue.set(state.filters, filter.id, Object.freeze(filter)));\n },\n setPreselectedFilters(state, filters) {\n state.preselectedFilters = filters;\n },\n removeFilter(state, { id }) {\n Vue.delete(state.filters, id);\n },\n removeFilters(state, filters) {\n filters.forEach(({ id }) => Vue.delete(state.filters, id));\n },\n setFacetGroup(state, { facetId, groupId }: FacetGroupEntry) {\n Vue.set(state.groups, facetId, groupId);\n },\n removeFacet(state, { id }) {\n Vue.delete(state.facets, id);\n },\n setFacet(state, facet: Facet) {\n Vue.set(state.facets, facet.id, facet);\n }\n },\n actions: {}\n};\n"],"names":[],"mappings":";;;;;AAOA;;;;;MAKa,kBAAkB,GAAuB;IACpD,KAAK,EAAE,OAAO;QACZ,OAAO,EAAE,EAAE;QACX,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,kBAAkB,EAAE,EAAE;KACvB,CAAC;IACF,OAAO,EAAE;QACP,eAAe;QACf,sBAAsB;QACtB,MAAM;KACP;IACD,SAAS,EAAE;QACT,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;SAC1D;QACD,UAAU,CAAC,KAAK,EAAE,OAAO;YACvB,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACrF;QACD,qBAAqB,CAAC,KAAK,EAAE,OAAO;YAClC,KAAK,CAAC,kBAAkB,GAAG,OAAO,CAAC;SACpC;QACD,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE;YACxB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;SAC/B;QACD,aAAa,CAAC,KAAK,EAAE,OAAO;YAC1B,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;SAC5D;QACD,aAAa,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAmB;YACxD,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;SACzC;QACD,WAAW,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE;YACvB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;SAC9B;QACD,QAAQ,CAAC,KAAK,EAAE,KAAY;YAC1B,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;SACxC;KACF;IACD,OAAO,EAAE,EAAE;;;;;"}
1
+ {"version":3,"file":"module.js","sources":["../../../../../src/x-modules/facets/store/module.ts"],"sourcesContent":["import { Facet } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { facets } from './getters/facets.getter';\nimport { selectedFiltersByFacet } from './getters/selected-filters-by-facet.getter';\nimport { selectedFilters } from './getters/selected-filters.getter';\nimport { FacetGroupEntry, FacetsXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the facets module.\n *\n * @internal\n */\nexport const facetsXStoreModule: FacetsXStoreModule = {\n state: () => ({\n filters: {},\n groups: {},\n facets: {},\n preselectedFilters: []\n }),\n getters: {\n selectedFilters,\n selectedFiltersByFacet,\n facets\n },\n mutations: {\n mutateFilter(state, { filter, newFilterState }) {\n const newFilter = Object.assign(filter, newFilterState);\n Vue.set(state.filters, newFilter.id, newFilter);\n },\n setFilters(state, filters) {\n filters.forEach(filter => Vue.set(state.filters, filter.id, filter));\n },\n setPreselectedFilters(state, filters) {\n state.preselectedFilters = filters;\n },\n removeFilter(state, { id }) {\n Vue.delete(state.filters, id);\n },\n removeFilters(state, filters) {\n filters.forEach(({ id }) => Vue.delete(state.filters, id));\n },\n setFacetGroup(state, { facetId, groupId }: FacetGroupEntry) {\n Vue.set(state.groups, facetId, groupId);\n },\n removeFacet(state, { id }) {\n Vue.delete(state.facets, id);\n },\n setFacet(state, facet: Facet) {\n Vue.set(state.facets, facet.id, facet);\n }\n },\n actions: {}\n};\n"],"names":[],"mappings":";;;;;AAOA;;;;;MAKa,kBAAkB,GAAuB;IACpD,KAAK,EAAE,OAAO;QACZ,OAAO,EAAE,EAAE;QACX,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,kBAAkB,EAAE,EAAE;KACvB,CAAC;IACF,OAAO,EAAE;QACP,eAAe;QACf,sBAAsB;QACtB,MAAM;KACP;IACD,SAAS,EAAE;QACT,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;YACxD,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;SACjD;QACD,UAAU,CAAC,KAAK,EAAE,OAAO;YACvB,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;SACtE;QACD,qBAAqB,CAAC,KAAK,EAAE,OAAO;YAClC,KAAK,CAAC,kBAAkB,GAAG,OAAO,CAAC;SACpC;QACD,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE;YACxB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;SAC/B;QACD,aAAa,CAAC,KAAK,EAAE,OAAO;YAC1B,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;SAC5D;QACD,aAAa,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAmB;YACxD,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;SACzC;QACD,WAAW,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE;YACvB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;SAC9B;QACD,QAAQ,CAAC,KAAK,EAAE,KAAY;YAC1B,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;SACxC;KACF;IACD,OAAO,EAAE,EAAE;;;;;"}
@@ -36,7 +36,22 @@ function isNewQuery(newQuery, previousQuery) {
36
36
  return (!previousQueryWords.every(previousQueryWord => newQueryWords.some(newQueryWord => newQueryWord.includes(previousQueryWord) || previousQueryWord.includes(newQueryWord))) ||
37
37
  (isNewQueryEmpty && !isPreviousQueryEmpty) ||
38
38
  (!isNewQueryEmpty && isPreviousQueryEmpty));
39
+ }
40
+ /**
41
+ * This function flattens the Hierarchical Filters, returning an array with all filters including
42
+ * the children.
43
+ *
44
+ * @param hierarchicalFilters - The list of Hierarchical Filters to flatten.
45
+ * @returns An array with all the Hierarchical filters.
46
+ *
47
+ * @public
48
+ */
49
+ function flatHierarchicalFilters(hierarchicalFilters) {
50
+ return hierarchicalFilters.reduce(function flat(flattenedFilters, filter) {
51
+ flattenedFilters.push(filter);
52
+ return filter?.children?.reduce(flat, flattenedFilters) ?? flattenedFilters;
53
+ }, []);
39
54
  }
40
55
 
41
- export { isNewQuery };
56
+ export { flatHierarchicalFilters, isNewQuery };
42
57
  //# sourceMappingURL=utils.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sources":["../../../../src/x-modules/facets/utils.ts"],"sourcesContent":["import { isStringEmpty } from '../../utils/string';\n\n/**\n * Compares two queries to know if the new one is a refined query from the previous one or a new\n * one.\n *\n * A refined query is a query which has the previous query or part of it.\n * Example:\n * - previousQuery = 'lego star'.\n * - newQuery = 'lego star wars'.\n *\n * Example:\n * - previousQuery = 'lego star wars'.\n * - newQuery = 'lego star'.\n *\n * A new query is a query which has not the previous query.\n * Example:\n * - previousQuery = 'lego star'.\n * - newQuery = 'lego wars'.\n *\n * In this case, it is changing the word set, because a word is changed by another one, so\n * this is changing the search intention.\n *\n * @param newQuery - The new query.\n * @param previousQuery - The previous query.\n *\n * @returns A boolean which flags if the query is refined or not.\n *\n * @public\n */\nexport function isNewQuery(newQuery: string, previousQuery: string): boolean {\n const isNewQueryEmpty = isStringEmpty(newQuery);\n const isPreviousQueryEmpty = isStringEmpty(previousQuery);\n const previousQueryWords = previousQuery.split(' ');\n const newQueryWords = newQuery.split(' ');\n return (\n !previousQueryWords.every(previousQueryWord =>\n newQueryWords.some(\n newQueryWord =>\n newQueryWord.includes(previousQueryWord) || previousQueryWord.includes(newQueryWord)\n )\n ) ||\n (isNewQueryEmpty && !isPreviousQueryEmpty) ||\n (!isNewQueryEmpty && isPreviousQueryEmpty)\n );\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA4BgB,UAAU,CAAC,QAAgB,EAAE,aAAqB;IAChE,MAAM,eAAe,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,oBAAoB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IAC1D,MAAM,kBAAkB,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACpD,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1C,QACE,CAAC,kBAAkB,CAAC,KAAK,CAAC,iBAAiB,IACzC,aAAa,CAAC,IAAI,CAChB,YAAY,IACV,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC,IAAI,iBAAiB,CAAC,QAAQ,CAAC,YAAY,CAAC,CACvF,CACF;SACA,eAAe,IAAI,CAAC,oBAAoB,CAAC;SACzC,CAAC,eAAe,IAAI,oBAAoB,CAAC,EAC1C;AACJ;;;;"}
1
+ {"version":3,"file":"utils.js","sources":["../../../../src/x-modules/facets/utils.ts"],"sourcesContent":["import { HierarchicalFilter } from '@empathyco/x-types';\nimport { isStringEmpty } from '../../utils/string';\n\n/**\n * Compares two queries to know if the new one is a refined query from the previous one or a new\n * one.\n *\n * A refined query is a query which has the previous query or part of it.\n * Example:\n * - previousQuery = 'lego star'.\n * - newQuery = 'lego star wars'.\n *\n * Example:\n * - previousQuery = 'lego star wars'.\n * - newQuery = 'lego star'.\n *\n * A new query is a query which has not the previous query.\n * Example:\n * - previousQuery = 'lego star'.\n * - newQuery = 'lego wars'.\n *\n * In this case, it is changing the word set, because a word is changed by another one, so\n * this is changing the search intention.\n *\n * @param newQuery - The new query.\n * @param previousQuery - The previous query.\n *\n * @returns A boolean which flags if the query is refined or not.\n *\n * @public\n */\nexport function isNewQuery(newQuery: string, previousQuery: string): boolean {\n const isNewQueryEmpty = isStringEmpty(newQuery);\n const isPreviousQueryEmpty = isStringEmpty(previousQuery);\n const previousQueryWords = previousQuery.split(' ');\n const newQueryWords = newQuery.split(' ');\n return (\n !previousQueryWords.every(previousQueryWord =>\n newQueryWords.some(\n newQueryWord =>\n newQueryWord.includes(previousQueryWord) || previousQueryWord.includes(newQueryWord)\n )\n ) ||\n (isNewQueryEmpty && !isPreviousQueryEmpty) ||\n (!isNewQueryEmpty && isPreviousQueryEmpty)\n );\n}\n\n/**\n * This function flattens the Hierarchical Filters, returning an array with all filters including\n * the children.\n *\n * @param hierarchicalFilters - The list of Hierarchical Filters to flatten.\n * @returns An array with all the Hierarchical filters.\n *\n * @public\n */\nexport function flatHierarchicalFilters(\n hierarchicalFilters: HierarchicalFilter[]\n): HierarchicalFilter[] {\n return hierarchicalFilters.reduce(function flat(flattenedFilters, filter): HierarchicalFilter[] {\n flattenedFilters.push(filter);\n return filter?.children?.reduce(flat, flattenedFilters) ?? flattenedFilters;\n }, [] as HierarchicalFilter[]);\n}\n"],"names":[],"mappings":";;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA4BgB,UAAU,CAAC,QAAgB,EAAE,aAAqB;IAChE,MAAM,eAAe,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,oBAAoB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IAC1D,MAAM,kBAAkB,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACpD,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1C,QACE,CAAC,kBAAkB,CAAC,KAAK,CAAC,iBAAiB,IACzC,aAAa,CAAC,IAAI,CAChB,YAAY,IACV,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC,IAAI,iBAAiB,CAAC,QAAQ,CAAC,YAAY,CAAC,CACvF,CACF;SACA,eAAe,IAAI,CAAC,oBAAoB,CAAC;SACzC,CAAC,eAAe,IAAI,oBAAoB,CAAC,EAC1C;AACJ,CAAC;AAED;;;;;;;;;SASgB,uBAAuB,CACrC,mBAAyC;IAEzC,OAAO,mBAAmB,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,gBAAgB,EAAE,MAAM;QACtE,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9B,OAAO,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,EAAE,gBAAgB,CAAC,IAAI,gBAAgB,CAAC;KAC7E,EAAE,EAA0B,CAAC,CAAC;AACjC;;;;"}
@@ -10,51 +10,60 @@ var __vue_render__ = function () {
10
10
  var _vm = this;
11
11
  var _h = _vm.$createElement;
12
12
  var _c = _vm._self._c || _h;
13
- return _c("input", {
14
- ref: "input",
15
- staticClass: "x-input x-search-input",
16
- attrs: {
17
- maxlength: _vm.maxLength,
18
- autocomplete: "off",
19
- enterkeyhint: "search",
20
- inputmode: "search",
21
- type: "search",
22
- "data-test": "search-input",
23
- "aria-label": _vm.searchInputMessage,
24
- },
25
- domProps: { value: _vm.query },
26
- on: {
27
- blur: _vm.emitUserBlurredSearchBox,
28
- click: _vm.emitUserClickedSearchBox,
29
- focus: _vm.emitUserFocusedSearchBox,
30
- input: _vm.emitUserIsTypingAQueryEvents,
31
- keydown: [
32
- function ($event) {
33
- if (
34
- !$event.type.indexOf("key") &&
35
- _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
36
- ) {
37
- return null
38
- }
39
- return _vm.emitUserPressedEnterKey.apply(null, arguments)
13
+ return _c(
14
+ "input",
15
+ _vm._g(
16
+ {
17
+ ref: "input",
18
+ staticClass: "x-input x-search-input",
19
+ attrs: {
20
+ maxlength: _vm.maxLength,
21
+ autocomplete: "off",
22
+ enterkeyhint: "search",
23
+ inputmode: "search",
24
+ type: "search",
25
+ "data-test": "search-input",
26
+ "aria-label": _vm.searchInputMessage,
40
27
  },
41
- function ($event) {
42
- if (
43
- !$event.type.indexOf("key") &&
44
- _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]) &&
45
- _vm._k($event.keyCode, "down", 40, $event.key, [
46
- "Down",
47
- "ArrowDown",
48
- ])
49
- ) {
50
- return null
51
- }
52
- $event.preventDefault();
53
- return _vm.emitUserPressedArrowKey.apply(null, arguments)
28
+ domProps: { value: _vm.query },
29
+ on: {
30
+ blur: _vm.emitUserBlurredSearchBox,
31
+ click: _vm.emitUserClickedSearchBox,
32
+ focus: _vm.emitUserFocusedSearchBox,
33
+ input: _vm.emitUserIsTypingAQueryEvents,
34
+ keydown: [
35
+ function ($event) {
36
+ if (
37
+ !$event.type.indexOf("key") &&
38
+ _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
39
+ ) {
40
+ return null
41
+ }
42
+ return _vm.emitUserPressedEnterKey.apply(null, arguments)
43
+ },
44
+ function ($event) {
45
+ if (
46
+ !$event.type.indexOf("key") &&
47
+ _vm._k($event.keyCode, "up", 38, $event.key, [
48
+ "Up",
49
+ "ArrowUp",
50
+ ]) &&
51
+ _vm._k($event.keyCode, "down", 40, $event.key, [
52
+ "Down",
53
+ "ArrowDown",
54
+ ])
55
+ ) {
56
+ return null
57
+ }
58
+ $event.preventDefault();
59
+ return _vm.emitUserPressedArrowKey.apply(null, arguments)
60
+ },
61
+ ],
54
62
  },
55
- ],
56
- },
57
- })
63
+ },
64
+ _vm.$listeners
65
+ )
66
+ )
58
67
  };
59
68
  var __vue_staticRenderFns__ = [];
60
69
  __vue_render__._withStripped = true;
@@ -62,11 +71,11 @@ __vue_render__._withStripped = true;
62
71
  /* style */
63
72
  const __vue_inject_styles__ = function (inject) {
64
73
  if (!inject) return
65
- inject("data-v-d46f5de0_0", { source: ".x-search-input[data-v-d46f5de0]::-webkit-search-decoration,\n.x-search-input[data-v-d46f5de0]::-webkit-search-cancel-button,\n.x-search-input[data-v-d46f5de0]::-webkit-search-results-button,\n.x-search-input[data-v-d46f5de0]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n}", map: undefined, media: undefined });
74
+ inject("data-v-38b09624_0", { source: ".x-search-input[data-v-38b09624]::-webkit-search-decoration,\n.x-search-input[data-v-38b09624]::-webkit-search-cancel-button,\n.x-search-input[data-v-38b09624]::-webkit-search-results-button,\n.x-search-input[data-v-38b09624]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n}", map: undefined, media: undefined });
66
75
 
67
76
  };
68
77
  /* scoped */
69
- const __vue_scope_id__ = "data-v-d46f5de0";
78
+ const __vue_scope_id__ = "data-v-38b09624";
70
79
  /* module identifier */
71
80
  const __vue_module_identifier__ = undefined;
72
81
  /* functional template */
@@ -1 +1 @@
1
- {"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"input\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-input x-search-input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n :aria-label=\"searchInputMessage\"\n />\n</template>\n\n<script lang=\"ts\">\n import { Suggestion } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { ArrowKey, PropsWithType } from '../../../utils';\n import { debounce } from '../../../utils/debounce';\n import { DebouncedFunction } from '../../../utils/types';\n import { XEventsTypes } from '../../../wiring/events.types';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { searchBoxXModule } from '../x-module';\n\n /**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n })\n export default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /**\n * Maximum characters allowed in the input search.\n */\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /**\n * Allows input autofocus when the search field is rendered.\n */\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /**\n * Enables the auto-accept query after debounce.\n */\n @Prop({ default: true })\n protected instant!: boolean;\n\n /**\n * Debounce time for the instant.\n */\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /**\n * Keyboard keys to accept the autocomplete suggestion.\n */\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /**\n * Event that retrieves the autocomplete suggestion.\n */\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /**\n * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search in put is focused.\n *\n * @internal\n */\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /**\n * When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n *\n * @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n *\n * @internal\n * @param query - The query that will be emitted.\n */\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /**\n * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n *\n * @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n */\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n *\n * @internal\n */\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n *\n * @internal\n */\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n *\n * @internal\n */\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n *\n * @internal\n */\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /**\n * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n *\n * @param event - The keyboard event with the arrow key pressed.\n * @internal\n */\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /**\n * Emits multiple events when the user pressed the enter key.\n *\n * @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n *\n * @internal\n */\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n *\n * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n */\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-search-input::-webkit-search-decoration,\n .x-search-input::-webkit-search-cancel-button,\n .x-search-input::-webkit-search-results-button,\n .x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n },\n data() {\n return {\n value: '',\n hasFocus: false\n };\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script>\n import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box';\n import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput,\n ClearSearchInput,\n SearchButton,\n QuerySuggestions\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"input\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n v-on=\"$listeners\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-input x-search-input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n :aria-label=\"searchInputMessage\"\n />\n</template>\n\n<script lang=\"ts\">\n import { Suggestion } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { ArrowKey, PropsWithType } from '../../../utils';\n import { debounce } from '../../../utils/debounce';\n import { DebouncedFunction } from '../../../utils/types';\n import { XEventsTypes } from '../../../wiring/events.types';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { searchBoxXModule } from '../x-module';\n\n /**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n })\n export default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /**\n * Maximum characters allowed in the input search.\n */\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /**\n * Allows input autofocus when the search field is rendered.\n */\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /**\n * Enables the auto-accept query after debounce.\n */\n @Prop({ default: true })\n protected instant!: boolean;\n\n /**\n * Debounce time for the instant.\n */\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /**\n * Keyboard keys to accept the autocomplete suggestion.\n */\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /**\n * Event that retrieves the autocomplete suggestion.\n */\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /**\n * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search in put is focused.\n *\n * @internal\n */\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /**\n * When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n *\n * @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n *\n * @internal\n * @param query - The query that will be emitted.\n */\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /**\n * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n *\n * @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n */\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n *\n * @internal\n */\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n *\n * @internal\n */\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n *\n * @internal\n */\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n *\n * @internal\n */\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /**\n * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n *\n * @param event - The keyboard event with the arrow key pressed.\n * @internal\n */\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /**\n * Emits multiple events when the user pressed the enter key.\n *\n * @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n *\n * @internal\n */\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n *\n * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n */\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-search-input::-webkit-search-decoration,\n .x-search-input::-webkit-search-cancel-button,\n .x-search-input::-webkit-search-results-button,\n .x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n },\n data() {\n return {\n value: '',\n hasFocus: false\n };\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script>\n import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box';\n import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput,\n ClearSearchInput,\n SearchButton,\n QuerySuggestions\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"search-input.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { ArrowKey, PropsWithType } from '../../../utils';\nimport { debounce } from '../../../utils/debounce';\nimport { DebouncedFunction } from '../../../utils/types';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { WireMetadata } from '../../../wiring/wiring.types';\nimport { searchBoxXModule } from '../x-module';\n\n/**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n})\nexport default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /**\n * Maximum characters allowed in the input search.\n */\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /**\n * Allows input autofocus when the search field is rendered.\n */\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /**\n * Enables the auto-accept query after debounce.\n */\n @Prop({ default: true })\n protected instant!: boolean;\n\n /**\n * Debounce time for the instant.\n */\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /**\n * Keyboard keys to accept the autocomplete suggestion.\n */\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /**\n * Event that retrieves the autocomplete suggestion.\n */\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /**\n * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search in put is focused.\n *\n * @internal\n */\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /**\n * When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n *\n * @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n *\n * @internal\n * @param query - The query that will be emitted.\n */\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /**\n * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n *\n * @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n */\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n *\n * @internal\n */\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n *\n * @internal\n */\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n *\n * @internal\n */\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n *\n * @internal\n */\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /**\n * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n *\n * @param event - The keyboard event with the arrow key pressed.\n * @internal\n */\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /**\n * Emits multiple events when the user pressed the enter key.\n *\n * @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n *\n * @internal\n */\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n *\n * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n */\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"search-input.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { ArrowKey, PropsWithType } from '../../../utils';\nimport { debounce } from '../../../utils/debounce';\nimport { DebouncedFunction } from '../../../utils/types';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { WireMetadata } from '../../../wiring/wiring.types';\nimport { searchBoxXModule } from '../x-module';\n\n/**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n})\nexport default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /**\n * Maximum characters allowed in the input search.\n */\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /**\n * Allows input autofocus when the search field is rendered.\n */\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /**\n * Enables the auto-accept query after debounce.\n */\n @Prop({ default: true })\n protected instant!: boolean;\n\n /**\n * Debounce time for the instant.\n */\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /**\n * Keyboard keys to accept the autocomplete suggestion.\n */\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /**\n * Event that retrieves the autocomplete suggestion.\n */\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /**\n * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search in put is focused.\n *\n * @internal\n */\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /**\n * When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n *\n * @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n *\n * @internal\n * @param query - The query that will be emitted.\n */\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /**\n * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n *\n * @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n */\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n *\n * @internal\n */\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n *\n * @internal\n */\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n *\n * @internal\n */\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n *\n * @internal\n */\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /**\n * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n *\n * @param event - The keyboard event with the arrow key pressed.\n * @internal\n */\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /**\n * Emits multiple events when the user pressed the enter key.\n *\n * @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n *\n * @internal\n */\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n *\n * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n */\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n}\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.146",
3
+ "version": "3.0.0-alpha.147",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -63,7 +63,7 @@
63
63
  "@empathyco/x-deep-merge": "^1.3.0-alpha.19",
64
64
  "@empathyco/x-logger": "^1.2.0-alpha.3",
65
65
  "@empathyco/x-storage-service": "^2.0.0-alpha.2",
66
- "@empathyco/x-types": "^10.0.0-alpha.29",
66
+ "@empathyco/x-types": "^10.0.0-alpha.30",
67
67
  "@empathyco/x-utils": "^1.0.0-alpha.5",
68
68
  "@types/resize-observer-browser": "~0.1.5",
69
69
  "rxjs": "~7.4.0",
@@ -78,7 +78,7 @@
78
78
  "devDependencies": {
79
79
  "@cypress/vue": "~2.2.4",
80
80
  "@cypress/webpack-dev-server": "~1.8.4",
81
- "@empathyco/x-adapter-platform": "^1.0.0-alpha.28",
81
+ "@empathyco/x-adapter-platform": "^1.0.0-alpha.29",
82
82
  "@microsoft/api-documenter": "~7.15.3",
83
83
  "@microsoft/api-extractor": "~7.19.4",
84
84
  "@rollup/plugin-commonjs": "~21.0.1",
@@ -125,5 +125,5 @@
125
125
  "access": "public",
126
126
  "directory": "dist"
127
127
  },
128
- "gitHead": "a60a14dfbc744871426d1331892fe2957d8802eb"
128
+ "gitHead": "b92ceb9a163c42a46b54677a2ea269e8031db6c0"
129
129
  }
@@ -5360,80 +5360,6 @@
5360
5360
  "endIndex": 10
5361
5361
  }
5362
5362
  },
5363
- {
5364
- "kind": "Function",
5365
- "canonicalReference": "@empathyco/x-adapter-platform!searchResponseFacetsMapper:function(1)",
5366
- "docComment": "/**\n * Mapper to flatten hierarchical facet filters.\n *\n * @param from - The Platform search response.\n *\n * @param context - The context from the mapper.\n *\n * @returns The mapped facets.\n */\n",
5367
- "excerptTokens": [
5368
- {
5369
- "kind": "Content",
5370
- "text": "export declare function searchResponseFacetsMapper(from: "
5371
- },
5372
- {
5373
- "kind": "Reference",
5374
- "text": "PlatformSearchResponse",
5375
- "canonicalReference": "@empathyco/x-adapter-platform!PlatformSearchResponse:interface"
5376
- },
5377
- {
5378
- "kind": "Content",
5379
- "text": ", { mappedValue }: "
5380
- },
5381
- {
5382
- "kind": "Reference",
5383
- "text": "MapperContext",
5384
- "canonicalReference": "@empathyco/x-adapter!MapperContext:interface"
5385
- },
5386
- {
5387
- "kind": "Content",
5388
- "text": "): "
5389
- },
5390
- {
5391
- "kind": "Reference",
5392
- "text": "Partial",
5393
- "canonicalReference": "!Partial:type"
5394
- },
5395
- {
5396
- "kind": "Content",
5397
- "text": "<"
5398
- },
5399
- {
5400
- "kind": "Reference",
5401
- "text": "SearchResponse",
5402
- "canonicalReference": "@empathyco/x-adapter-platform!SearchResponse:interface"
5403
- },
5404
- {
5405
- "kind": "Content",
5406
- "text": ">"
5407
- },
5408
- {
5409
- "kind": "Content",
5410
- "text": ";"
5411
- }
5412
- ],
5413
- "returnTypeTokenRange": {
5414
- "startIndex": 5,
5415
- "endIndex": 9
5416
- },
5417
- "releaseTag": "Public",
5418
- "overloadIndex": 1,
5419
- "parameters": [
5420
- {
5421
- "parameterName": "from",
5422
- "parameterTypeTokenRange": {
5423
- "startIndex": 1,
5424
- "endIndex": 2
5425
- }
5426
- },
5427
- {
5428
- "parameterName": "{ mappedValue }",
5429
- "parameterTypeTokenRange": {
5430
- "startIndex": 3,
5431
- "endIndex": 4
5432
- }
5433
- }
5434
- ],
5435
- "name": "searchResponseFacetsMapper"
5436
- },
5437
5363
  {
5438
5364
  "kind": "Variable",
5439
5365
  "canonicalReference": "@empathyco/x-adapter-platform!searchResponseMapper:var",
@@ -5463,77 +5389,23 @@
5463
5389
  },
5464
5390
  {
5465
5391
  "kind": "Content",
5466
- "text": ", {\n banners: import(\"@empathyco/x-types\")."
5467
- },
5468
- {
5469
- "kind": "Reference",
5470
- "text": "Banner",
5471
- "canonicalReference": "@empathyco/x-adapter-platform!Banner:interface"
5472
- },
5473
- {
5474
- "kind": "Content",
5475
- "text": "[];\n facets: import(\"@empathyco/x-types\")."
5476
- },
5477
- {
5478
- "kind": "Reference",
5479
- "text": "Facet",
5480
- "canonicalReference": "@empathyco/x-adapter-platform!Facet:interface"
5481
- },
5482
- {
5483
- "kind": "Content",
5484
- "text": "[];\n partialResults: import(\"@empathyco/x-types\")."
5485
- },
5486
- {
5487
- "kind": "Reference",
5488
- "text": "PartialResult",
5489
- "canonicalReference": "@empathyco/x-adapter-platform!PartialResult:interface"
5490
- },
5491
- {
5492
- "kind": "Content",
5493
- "text": "[];\n promoteds: import(\"@empathyco/x-types\")."
5494
- },
5495
- {
5496
- "kind": "Reference",
5497
- "text": "Promoted",
5498
- "canonicalReference": "@empathyco/x-adapter-platform!Promoted:interface"
5499
- },
5500
- {
5501
- "kind": "Content",
5502
- "text": "[];\n queryTagging: import(\"@empathyco/x-types\")."
5503
- },
5504
- {
5505
- "kind": "Reference",
5506
- "text": "TaggingRequest",
5507
- "canonicalReference": "@empathyco/x-adapter-platform!TaggingRequest:interface"
5508
- },
5509
- {
5510
- "kind": "Content",
5511
- "text": ";\n redirections: import(\"@empathyco/x-types\")."
5512
- },
5513
- {
5514
- "kind": "Reference",
5515
- "text": "Redirection",
5516
- "canonicalReference": "@empathyco/x-adapter-platform!Redirection:interface"
5517
- },
5518
- {
5519
- "kind": "Content",
5520
- "text": "[];\n results: import(\"@empathyco/x-types\")."
5392
+ "text": ", "
5521
5393
  },
5522
5394
  {
5523
5395
  "kind": "Reference",
5524
- "text": "Result",
5525
- "canonicalReference": "@empathyco/x-adapter-platform!Result:interface"
5396
+ "text": "SearchResponse",
5397
+ "canonicalReference": "@empathyco/x-adapter-platform!SearchResponse:interface"
5526
5398
  },
5527
5399
  {
5528
5400
  "kind": "Content",
5529
- "text": "[];\n spellcheck: string;\n totalResults: number;\n}>"
5401
+ "text": ">"
5530
5402
  }
5531
5403
  ],
5532
5404
  "releaseTag": "Public",
5533
5405
  "name": "searchResponseMapper",
5534
5406
  "variableTypeTokenRange": {
5535
5407
  "startIndex": 1,
5536
- "endIndex": 20
5408
+ "endIndex": 8
5537
5409
  }
5538
5410
  },
5539
5411
  {