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

package/js/components/suggestions/base-suggestion.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestion.vue2.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" @click=\"emitEvents\" :class=\"dynamicCSSClasses\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n  import { forEach } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType, ref } from 'vue';\n  import { QueryFeature } from '../../types';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import Highlight from '../highlight.vue';\n  import { use$x } from '../../composables/index';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { Highlight },\n    props: {\n      /**\n       * The normalized query of the module using this component.\n       *\n       * @public\n       */\n      query: {\n        type: String,\n        default: ''\n      },\n\n      /**\n       * The suggestion to render and use in the default slot.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<Suggestion>,\n        required: true\n      },\n\n      /**\n       * The feature from which the events will be emitted.\n       *\n       * @public\n       */\n      //TODO: set to true when the suggestions components pass it.\n      feature: {\n        type: String as PropType<QueryFeature>\n      },\n\n      /**\n       * The {@link XEvent} that will be emitted when selecting a suggestion.\n       *\n       * @public\n       */\n      suggestionSelectedEvents: {\n        type: Object as PropType<Partial<XEventsTypes>>,\n        required: true\n      },\n\n      /**\n       * Indicates if the curated suggestion should be highlighted.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean\n      }\n    },\n\n    setup(props) {\n      const el = ref<HTMLElement | null>(null);\n\n      const $x = use$x();\n\n      /**\n       * Returns the suggestion filter object.\n       * It is a BooleanFilter because the label is needed.\n       * It returns only the first element because the facets and filters are being planned\n       * in the BaseSuggestions component.\n       *\n       * @returns The filter.\n       * @public\n       */\n      const filter = computed<BooleanFilter | undefined>(\n        () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter\n      );\n\n      /**\n       * The event handler that will be triggered when clicking on a suggestion.\n       *\n       * @remarks\n       * UserAcceptedAQuery: suggestion.query\n       * UserSelectedASuggestion: suggestion\n       * UserClickedAFilter: suggestion.facets[0].filters[0]\n       * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n       *\n       * @returns The {@link XEvent} to emit.\n       * @public\n       */\n      const events = computed<Partial<XEventsTypes>>(() => {\n        const filterEvent: Partial<XEventsTypes> = filter.value\n          ? { UserClickedAFilter: filter.value }\n          : {};\n        return {\n          UserAcceptedAQuery: props.suggestion.query,\n          UserSelectedASuggestion: props.suggestion,\n          ...props.suggestionSelectedEvents,\n          ...filterEvent\n        };\n      });\n\n      /**\n       * Emits the events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = (): void => {\n        forEach(events.value, (event, payload): void => {\n          $x.emit(event, payload, {\n            target: el.value!,\n            feature: props.feature\n          });\n        });\n      };\n\n      /**\n       * Checks if the suggestion is curated and if it should be highlighted.\n       *\n       * @returns True if the suggestion is curated and should be highlighted.\n       *\n       * @internal\n       */\n      const shouldHighlightCurated = computed<boolean>(\n        () => props.highlightCurated && !!props.suggestion.isCurated\n      );\n\n      /**\n       * Generates css classes dynamically.\n       *\n       * @remarks\n       * 'x-suggestion--matching added when the query should be matched.\n       *\n       * @returns The {@link VueCSSClasses} classes.\n       * @public\n       */\n      const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n        'x-suggestion--is-curated': shouldHighlightCurated.value\n      }));\n\n      return {\n        el,\n        filter,\n        emitEvents,\n        dynamicCSSClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak',\n          facet: {\n            namedModel: 'SimpleFacet',\n            id: 'category',\n            label: 'Category',\n            filters: [\n              {\n                id: 'category:groceries',\n                modelName: 'SimpleFilter',\n                facetId: 'category-facet',\n                label: 'Groceries',\n                selected: false,\n                totalResults: 10\n              }\n            ]\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,WAAW;AACzB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAC;AACX,SAAA;AAED;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AAED;;;;AAIE;;AAEF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAA+B;AACtC,SAAA;AAED;;;;AAIE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAM;AACd,SAAA;AACD,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAG,GAAE,GAAG,CAAqB,IAAI,CAAC,CAAA;AAExC,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB;;;;;;;;AAQE;QACF,MAAM,SAAS,QAAQ,CACrB,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAiB,CAC/D,CAAA;AAED;;;;;;;;;;;AAWE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAM;AACnD,YAAA,MAAM,WAAW,GAA0B,MAAM,CAAC,KAAI;AACpD,kBAAE,EAAE,kBAAkB,EAAE,MAAM,CAAC,KAAM,EAAA;kBACnC,EAAE,CAAA;YACN,OAAO;AACL,gBAAA,kBAAkB,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK;gBAC1C,uBAAuB,EAAE,KAAK,CAAC,UAAU;gBACzC,GAAG,KAAK,CAAC,wBAAwB;AACjC,gBAAA,GAAG,WAAU;aACd,CAAA;AACH,SAAC,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAY;YAC7B,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,KAAW;AAC9C,gBAAA,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;oBACtB,MAAM,EAAE,EAAE,CAAC,KAAM;oBACjB,OAAO,EAAE,KAAK,CAAC,OAAM;AACtB,iBAAA,CAAC,CAAA;AACJ,aAAC,CAAC,CAAA;AACJ,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,sBAAuB,GAAE,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAiB,IAAG,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,SAAQ,CAC5D,CAAA;AAED;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAgB,OAAO;YACvD,0BAA0B,EAAE,sBAAsB,CAAC,KAAI;AACxD,SAAA,CAAC,CAAC,CAAA;QAEH,OAAO;YACL,EAAE;YACF,MAAM;YACN,UAAU;YACV,iBAAgB;SACjB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-suggestion.vue2.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" :class=\"dynamicCSSClasses\" @click=\"emitEvents\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { QueryFeature } from '../../types'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../composables/index'\nimport Highlight from '../highlight.vue'\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\nexport default defineComponent({\n  components: { Highlight },\n  props: {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    //TODO: set to true when the suggestions components pass it.\n    feature: {\n      type: String as PropType<QueryFeature>,\n    },\n\n    /**\n     * The {@link XEvent} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    suggestionSelectedEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n      required: true,\n    },\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n    },\n  },\n\n  setup(props) {\n    const el = ref<HTMLElement | null>(null)\n\n    const $x = use$x()\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    const filter = computed<BooleanFilter | undefined>(\n      () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter,\n    )\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      const filterEvent: Partial<XEventsTypes> = filter.value\n        ? { UserClickedAFilter: filter.value }\n        : {}\n      return {\n        UserAcceptedAQuery: props.suggestion.query,\n        UserSelectedASuggestion: props.suggestion,\n        ...props.suggestionSelectedEvents,\n        ...filterEvent,\n      }\n    })\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = (): void => {\n      forEach(events.value, (event, payload): void => {\n        $x.emit(event, payload, {\n          target: el.value!,\n          feature: props.feature,\n        })\n      })\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    const shouldHighlightCurated = computed<boolean>(\n      () => props.highlightCurated && !!props.suggestion.isCurated,\n    )\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n      'x-suggestion--is-curated': shouldHighlightCurated.value,\n    }))\n\n    return {\n      el,\n      filter,\n      emitEvents,\n      dynamicCSSClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\nimport { BaseSuggestion } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionDemo',\n  components: {\n    BaseSuggestion,\n  },\n  data() {\n    return {\n      query: 'st',\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'steak',\n        facet: {\n          namedModel: 'SimpleFacet',\n          id: 'category',\n          label: 'Category',\n          filters: [\n            {\n              id: 'category:groceries',\n              modelName: 'SimpleFilter',\n              facetId: 'category-facet',\n              label: 'Groceries',\n              selected: false,\n              totalResults: 10,\n            },\n          ],\n        },\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\nimport { BaseSuggestion } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionDemo',\n  components: {\n    BaseSuggestion,\n  },\n  data() {\n    return {\n      query: 'st',\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'steak',\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA0BA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,WAAW;AACzB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AAED;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;;AAEF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAgC;AACvC,SAAA;AAED;;;;AAIE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAG,GAAE,GAAG,CAAqB,IAAI,CAAA,CAAA;AAEvC,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB;;;;;;;;AAQE;QACF,MAAM,SAAS,QAAQ,CACrB,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAkB,CACjE,CAAA;AAEA;;;;;;;;;;;AAWE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAM;AACnD,YAAA,MAAM,WAAW,GAA0B,MAAM,CAAC,KAAI;AACpD,kBAAE,EAAE,kBAAkB,EAAE,MAAM,CAAC,KAAM,EAAA;kBACnC,EAAC,CAAA;YACL,OAAO;AACL,gBAAA,kBAAkB,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK;gBAC1C,uBAAuB,EAAE,KAAK,CAAC,UAAU;gBACzC,GAAG,KAAK,CAAC,wBAAwB;AACjC,gBAAA,GAAG,WAAW;aAChB,CAAA;AACF,SAAC,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAY;YAC7B,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,KAAW;AAC9C,gBAAA,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;oBACtB,MAAM,EAAE,EAAE,CAAC,KAAM;oBACjB,OAAO,EAAE,KAAK,CAAC,OAAO;AACvB,iBAAA,CAAA,CAAA;AACH,aAAC,CAAA,CAAA;AACH,SAAA,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,sBAAuB,GAAE,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAe,IAAK,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAC9D,CAAA;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAgB,OAAO;YACvD,0BAA0B,EAAE,sBAAsB,CAAC,KAAK;AACzD,SAAA,CAAC,CAAA,CAAA;QAEF,OAAO;YACL,EAAE;YACF,MAAM;YACN,UAAU;YACV,iBAAiB;SACnB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/suggestions/base-suggestions.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      :class=\"suggestionItemClass\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { Suggestion, Facet } from '@empathyco/x-types';\n  import { isArrayEmpty } from '../../utils/array';\n  import { AnimationProp } from '../../types';\n\n  /**\n   * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n   * in the default slot for working.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseSuggestions',\n    props: {\n      /**\n       * The list of suggestions to render.\n       *\n       * @public\n       */\n      suggestions: {\n        type: Array as PropType<Suggestion[]>,\n        required: true\n      },\n      /**\n       * Animation component that will be used to animate the suggestion.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /**\n       * Number of suggestions to be rendered.\n       *\n       * @public\n       */\n      maxItemsToRender: Number,\n      /**\n       * Boolean value to indicate if the facets should be rendered.\n       *\n       * @public\n       */\n      showFacets: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n       * filter should be rendered.\n       *\n       * @public\n       */\n      showPlainSuggestion: {\n        type: Boolean,\n        default: false\n      },\n      /** Class inherited by content element. */\n      suggestionItemClass: String\n    },\n    setup: function (props) {\n      /**\n       * Creates a suggestion for each one of the filter inside each facet.\n       *\n       * @param suggestion - Suggestion to expand.\n       * @returns A list of suggestions, each one with a single filter.\n       *\n       * @internal\n       */\n      const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n        return (\n          suggestion.facets?.flatMap(facet =>\n            facet.filters.map(filter => ({\n              ...suggestion,\n              facets: [{ ...facet, filters: [filter] }]\n            }))\n          ) ?? []\n        );\n      };\n\n      /**\n       * Creates a list of suggestions to render based on the configuration of this component.\n       *\n       * @returns - The list of suggestions to be rendered by this component.\n       *\n       * @internal\n       */\n      const suggestionsToRender = computed(() =>\n        props.suggestions\n          .flatMap(suggestion =>\n            props.showFacets && suggestion.facets?.length\n              ? props.showPlainSuggestion\n                ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n                : expandSuggestionFilters(suggestion)\n              : { ...suggestion, facets: [] }\n          )\n          .slice(0, props.maxItemsToRender)\n      );\n\n      /**\n       * Generates a string from the given facet.\n       *\n       * @param facet - The facet to reduce to a string.\n       * @returns - A string representing the facet.\n       * @internal\n       */\n      const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&');\n\n      /**\n       * Generates a string from the given facets.\n       *\n       * @param facets - The list of facets to reduce to a string.\n       * @returns - A string representing the list of facets.\n       * @internal\n       */\n      const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&');\n\n      /**\n       * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n       *\n       * @returns An array with the unique keys of the suggestions.\n       * @internal\n       */\n      const suggestionsKeys = computed(() =>\n        suggestionsToRender.value.map(suggestion =>\n          isArrayEmpty(suggestion.facets)\n            ? suggestion.query\n            : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`\n        )\n      );\n\n      /**\n       * Returns the filter contained by the suggestion.\n       *\n       * @param suggestion - Suggestion containing the filter.\n       * @returns The suggestion filter.\n       * @internal\n       */\n      const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0];\n\n      return { suggestionsToRender, suggestionsKeys, getSuggestionFilter };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n  }\n\n  .x-suggestions,\n  .x-suggestions__item {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n    }\n  }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [\n              {\n                id: 'exampleFacet',\n                label: 'exampleFacet',\n                modelName: 'SimpleFacet',\n                filters: [\n                  {\n                    facetId: 'exampleFacet',\n                    id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                    label: 'EXAMPLE',\n                    selected: false,\n                    totalResults: 10,\n                    modelName: 'SimpleFilter'\n                  }\n                ]\n              }\n            ],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","suggestionsKeys","_Fragment","_renderList","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MACkBA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SADlB,IAC+D,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAK,EAAA,CAAA;AAAA,IAAA,GAAA,EAAA,IAAA;AADrE,IAAA,KAAA,EAAA,eAAA;AAAA,GAAA,EAAA;;AAIYC,OAAAA,SAAAA,CAAAA,IAAAA,CAAAA,EAAAA,kBAAAA;AAAAA,QAAqBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,mBAAA,EAAA,CAAA,UAAA,EAAA,KAAA,KAAA;iBACtBL,SALX,EAAA,EAAAM,kBAAA;AAAA,YAKY,IAAA;AAAA,YAAqB;AAAA,cAE3B,0BAAU,KAAiB,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,mBAAA,CAAA,CAAA;cAQ3B,WAAgF,EAAA,iBAAA;AAAA,aAAA;;;;;;;AAftF,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      :class=\"suggestionItemClass\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { isArrayEmpty } from '../../utils/array'\n\n/**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseSuggestions',\n  props: {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    suggestions: {\n      type: Array as PropType<Suggestion[]>,\n      required: true,\n    },\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    showFacets: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    showPlainSuggestion: {\n      type: Boolean,\n      default: false,\n    },\n    /** Class inherited by content element. */\n    suggestionItemClass: String,\n  },\n  setup(props) {\n    /**\n     * Creates a suggestion for each one of the filter inside each facet.\n     *\n     * @param suggestion - Suggestion to expand.\n     * @returns A list of suggestions, each one with a single filter.\n     *\n     * @internal\n     */\n    const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n      return (\n        suggestion.facets?.flatMap(facet =>\n          facet.filters.map(filter => ({\n            ...suggestion,\n            facets: [{ ...facet, filters: [filter] }],\n          })),\n        ) ?? []\n      )\n    }\n\n    /**\n     * Creates a list of suggestions to render based on the configuration of this component.\n     *\n     * @returns - The list of suggestions to be rendered by this component.\n     *\n     * @internal\n     */\n    const suggestionsToRender = computed(() =>\n      props.suggestions\n        .flatMap(suggestion =>\n          props.showFacets && suggestion.facets?.length\n            ? props.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n              : expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] },\n        )\n        .slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&')\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&')\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    const suggestionsKeys = computed(() =>\n      suggestionsToRender.value.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`,\n      ),\n    )\n\n    /**\n     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0]\n\n    return { suggestionsToRender, suggestionsKeys, getSuggestionFilter }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-suggestions {\n  list-style-type: none;\n}\n\n.x-suggestions,\n.x-suggestions__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' }),\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })\n    },\n  },\n}\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [\n            {\n              id: 'exampleFacet',\n              label: 'exampleFacet',\n              modelName: 'SimpleFacet',\n              filters: [\n                {\n                  facetId: 'exampleFacet',\n                  id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                  label: 'EXAMPLE',\n                  selected: false,\n                  totalResults: 10,\n                  modelName: 'SimpleFilter',\n                },\n              ],\n            },\n          ],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","suggestionsKeys","_Fragment","_renderList","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MACkBA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SADlB,IAC+D,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAK,EAAA,CAAA;AAAA,IAAA,GAAA,EAAA,IAAA;AADrE,IAAA,KAAA,EAAA,eAAA;AAAA,GAAA,EAAA;;AAIYC,OAAAA,SAAAA,CAAAA,IAAAA,CAAAA,EAAAA,kBAAAA;AAAAA,QAAqBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,mBAAA,EAAA,CAAA,UAAA,EAAA,KAAA,KAAA;iBACtBL,SALX,EAAA,EAAAM,kBAAA;AAAA,YAKY,IAAA;AAAA,YAAqB;AAAA,cAE3B,0BAAU,KAAiB,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,mBAAA,CAAA,CAAA;cAQ3B,WAAgF,EAAA,iBAAA;AAAA,aAAA;;;;;;;AAftF,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/components/suggestions/base-suggestions.vue2.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed } from 'vue';
-import { isArrayEmpty } from '../../utils/array.js';
 import { AnimationProp } from '../../types/animation-prop.js';
+import { isArrayEmpty } from '../../utils/array.js';
 
 /**
  * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion
@@ -18,7 +18,7 @@ var _sfc_main = defineComponent({
          */
         suggestions: {
             type: Array,
-            required: true
+            required: true,
         },
         /**
          * Animation component that will be used to animate the suggestion.
@@ -27,7 +27,7 @@ var _sfc_main = defineComponent({
          */
         animation: {
             type: AnimationProp,
-            default: 'ul'
+            default: 'ul',
         },
         /**
          * Number of suggestions to be rendered.
@@ -42,7 +42,7 @@ var _sfc_main = defineComponent({
          */
         showFacets: {
             type: Boolean,
-            default: false
+            default: false,
         },
         /**
          * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without
@@ -52,12 +52,12 @@ var _sfc_main = defineComponent({
          */
         showPlainSuggestion: {
             type: Boolean,
-            default: false
+            default: false,
         },
         /** Class inherited by content element. */
-        suggestionItemClass: String
+        suggestionItemClass: String,
     },
-    setup: function (props) {
+    setup(props) {
         /**
          * Creates a suggestion for each one of the filter inside each facet.
          *
@@ -69,7 +69,7 @@ var _sfc_main = defineComponent({
         const expandSuggestionFilters = (suggestion) => {
             return (suggestion.facets?.flatMap(facet => facet.filters.map(filter => ({
                 ...suggestion,
-                facets: [{ ...facet, filters: [filter] }]
+                facets: [{ ...facet, filters: [filter] }],
             }))) ?? []);
         };
         /**
@@ -120,7 +120,7 @@ var _sfc_main = defineComponent({
          */
         const getSuggestionFilter = (suggestion) => suggestion.facets?.[0]?.filters[0];
         return { suggestionsToRender, suggestionsKeys, getSuggestionFilter };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/suggestions/base-suggestions.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestions.vue2.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      :class=\"suggestionItemClass\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { Suggestion, Facet } from '@empathyco/x-types';\n  import { isArrayEmpty } from '../../utils/array';\n  import { AnimationProp } from '../../types';\n\n  /**\n   * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n   * in the default slot for working.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseSuggestions',\n    props: {\n      /**\n       * The list of suggestions to render.\n       *\n       * @public\n       */\n      suggestions: {\n        type: Array as PropType<Suggestion[]>,\n        required: true\n      },\n      /**\n       * Animation component that will be used to animate the suggestion.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /**\n       * Number of suggestions to be rendered.\n       *\n       * @public\n       */\n      maxItemsToRender: Number,\n      /**\n       * Boolean value to indicate if the facets should be rendered.\n       *\n       * @public\n       */\n      showFacets: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n       * filter should be rendered.\n       *\n       * @public\n       */\n      showPlainSuggestion: {\n        type: Boolean,\n        default: false\n      },\n      /** Class inherited by content element. */\n      suggestionItemClass: String\n    },\n    setup: function (props) {\n      /**\n       * Creates a suggestion for each one of the filter inside each facet.\n       *\n       * @param suggestion - Suggestion to expand.\n       * @returns A list of suggestions, each one with a single filter.\n       *\n       * @internal\n       */\n      const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n        return (\n          suggestion.facets?.flatMap(facet =>\n            facet.filters.map(filter => ({\n              ...suggestion,\n              facets: [{ ...facet, filters: [filter] }]\n            }))\n          ) ?? []\n        );\n      };\n\n      /**\n       * Creates a list of suggestions to render based on the configuration of this component.\n       *\n       * @returns - The list of suggestions to be rendered by this component.\n       *\n       * @internal\n       */\n      const suggestionsToRender = computed(() =>\n        props.suggestions\n          .flatMap(suggestion =>\n            props.showFacets && suggestion.facets?.length\n              ? props.showPlainSuggestion\n                ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n                : expandSuggestionFilters(suggestion)\n              : { ...suggestion, facets: [] }\n          )\n          .slice(0, props.maxItemsToRender)\n      );\n\n      /**\n       * Generates a string from the given facet.\n       *\n       * @param facet - The facet to reduce to a string.\n       * @returns - A string representing the facet.\n       * @internal\n       */\n      const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&');\n\n      /**\n       * Generates a string from the given facets.\n       *\n       * @param facets - The list of facets to reduce to a string.\n       * @returns - A string representing the list of facets.\n       * @internal\n       */\n      const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&');\n\n      /**\n       * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n       *\n       * @returns An array with the unique keys of the suggestions.\n       * @internal\n       */\n      const suggestionsKeys = computed(() =>\n        suggestionsToRender.value.map(suggestion =>\n          isArrayEmpty(suggestion.facets)\n            ? suggestion.query\n            : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`\n        )\n      );\n\n      /**\n       * Returns the filter contained by the suggestion.\n       *\n       * @param suggestion - Suggestion containing the filter.\n       * @returns The suggestion filter.\n       * @internal\n       */\n      const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0];\n\n      return { suggestionsToRender, suggestionsKeys, getSuggestionFilter };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n  }\n\n  .x-suggestions,\n  .x-suggestions__item {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n    }\n  }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [\n              {\n                id: 'exampleFacet',\n                label: 'exampleFacet',\n                modelName: 'SimpleFacet',\n                filters: [\n                  {\n                    facetId: 'exampleFacet',\n                    id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                    label: 'EXAMPLE',\n                    selected: false,\n                    totalResults: 10,\n                    modelName: 'SimpleFilter'\n                  }\n                ]\n              }\n            ],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA0BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,KAA+B;AACrC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACxB;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;;;AAKE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;;AAED,QAAA,mBAAmB,EAAE,MAAK;AAC3B,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB;;;;;;;AAOE;AACF,QAAA,MAAM,uBAAsB,GAAI,CAAC,UAAsB,KAAmB;YACxE,QACE,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,SACzB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAK,KAAM;AAC3B,gBAAA,GAAG,UAAU;AACb,gBAAA,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,CAAC,MAAM,GAAG,CAAA;AACzC,aAAA,CAAC,CAAA,CACF,IAAG,EAAC,EACP;AACH,SAAC,CAAA;AAED;;;;;;AAME;QACF,MAAM,mBAAoB,GAAE,QAAQ,CAAC,MACnC,KAAK,CAAC,WAAU;AACb,aAAA,OAAO,CAAC,cACP,KAAK,CAAC,cAAc,UAAU,CAAC,MAAM,EAAE,MAAK;cACxC,KAAK,CAAC,mBAAkB;AACxB,kBAAE,CAAC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAC,EAAG,EAAE,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAA;AACxE,kBAAE,uBAAuB,CAAC,UAAU,CAAA;cACpC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAG,EAAA,CAClC;aACC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAA,CACnC,CAAA;AAED;;;;;;AAME;QACF,MAAM,WAAU,GAAI,CAAC,KAAY,KAAK,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAK,IAAK,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEtF;;;;;;AAME;AACF,QAAA,MAAM,YAAa,GAAE,CAAC,MAAe,KAAK,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAE3E;;;;;AAKE;QACF,MAAM,eAAc,GAAI,QAAQ,CAAC,MAC/B,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,cAC5B,YAAY,CAAC,UAAU,CAAC,MAAM,CAAA;cAC1B,UAAU,CAAC,KAAI;AACjB,cAAE,CAAA,EAAG,UAAU,CAAC,KAAK,CAAO,IAAA,EAAA,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAA,CAChE,CACD,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,mBAAoB,GAAE,CAAC,UAAsB,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;AAE1F,QAAA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,qBAAqB,CAAA;KACtE;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-suggestions.vue2.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      :class=\"suggestionItemClass\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { isArrayEmpty } from '../../utils/array'\n\n/**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseSuggestions',\n  props: {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    suggestions: {\n      type: Array as PropType<Suggestion[]>,\n      required: true,\n    },\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    showFacets: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    showPlainSuggestion: {\n      type: Boolean,\n      default: false,\n    },\n    /** Class inherited by content element. */\n    suggestionItemClass: String,\n  },\n  setup(props) {\n    /**\n     * Creates a suggestion for each one of the filter inside each facet.\n     *\n     * @param suggestion - Suggestion to expand.\n     * @returns A list of suggestions, each one with a single filter.\n     *\n     * @internal\n     */\n    const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n      return (\n        suggestion.facets?.flatMap(facet =>\n          facet.filters.map(filter => ({\n            ...suggestion,\n            facets: [{ ...facet, filters: [filter] }],\n          })),\n        ) ?? []\n      )\n    }\n\n    /**\n     * Creates a list of suggestions to render based on the configuration of this component.\n     *\n     * @returns - The list of suggestions to be rendered by this component.\n     *\n     * @internal\n     */\n    const suggestionsToRender = computed(() =>\n      props.suggestions\n        .flatMap(suggestion =>\n          props.showFacets && suggestion.facets?.length\n            ? props.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n              : expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] },\n        )\n        .slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&')\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&')\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    const suggestionsKeys = computed(() =>\n      suggestionsToRender.value.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`,\n      ),\n    )\n\n    /**\n     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0]\n\n    return { suggestionsToRender, suggestionsKeys, getSuggestionFilter }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-suggestions {\n  list-style-type: none;\n}\n\n.x-suggestions,\n.x-suggestions__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' }),\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })\n    },\n  },\n}\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [\n            {\n              id: 'exampleFacet',\n              label: 'exampleFacet',\n              modelName: 'SimpleFacet',\n              filters: [\n                {\n                  facetId: 'exampleFacet',\n                  id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                  label: 'EXAMPLE',\n                  selected: false,\n                  totalResults: 10,\n                  modelName: 'SimpleFilter',\n                },\n              ],\n            },\n          ],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA2BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,KAA+B;AACrC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACxB;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD;;;;;AAKE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAED,QAAA,mBAAmB,EAAE,MAAM;AAC5B,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;;AAOE;AACF,QAAA,MAAM,uBAAsB,GAAI,CAAC,UAAsB,KAAmB;YACxE,QACE,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,SACzB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAK,KAAM;AAC3B,gBAAA,GAAG,UAAU;AACb,gBAAA,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,CAAC,MAAM,CAAA,EAAG,CAAC;AAC1C,aAAA,CAAC,CAAC,CACH,IAAG,EAAC,EACR;AACF,SAAA,CAAA;AAEA;;;;;;AAME;QACF,MAAM,mBAAoB,GAAE,QAAQ,CAAC,MACnC,KAAK,CAAC,WAAU;AACb,aAAA,OAAO,CAAC,cACP,KAAK,CAAC,cAAc,UAAU,CAAC,MAAM,EAAE,MAAK;cACxC,KAAK,CAAC,mBAAkB;AACxB,kBAAE,CAAC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAC,EAAG,EAAE,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAA;AACxE,kBAAE,uBAAuB,CAAC,UAAU,CAAA;cACpC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAC,EAAG,CACnC;aACC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CACrC,CAAA;AAEA;;;;;;AAME;QACF,MAAM,cAAc,CAAC,KAAY,KAAK,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA,CAAA;AAErF;;;;;;AAME;AACF,QAAA,MAAM,YAAa,GAAE,CAAC,MAAe,KAAK,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA,CAAA;AAE1E;;;;;AAKE;QACF,MAAM,eAAc,GAAI,QAAQ,CAAC,MAC/B,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,cAC5B,YAAY,CAAC,UAAU,CAAC,MAAM,CAAA;cAC1B,UAAU,CAAC,KAAI;AACjB,cAAE,CAAA,EAAG,UAAU,CAAC,KAAK,CAAO,IAAA,EAAA,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAE,CAAA,CAChE,CACH,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,mBAAoB,GAAE,CAAC,UAAsB,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAA,CAAA;AAEzF,QAAA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,mBAAoB,EAAA,CAAA;KACpE;AACF,CAAA,CAAA;;;;"}

package/js/components/x-component.utils.js

@@ -7,6 +7,7 @@
  * @internal
  */
 function getXComponentXModuleName(component) {
+    // eslint-disable-next-line ts/no-unsafe-return
     return component?.$options.xModule ?? null;
 }
 /**

package/js/components/x-component.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-component.utils.js","sources":["../../../src/components/x-component.utils.ts"],"sourcesContent":["import { ComponentPublicInstance } from 'vue';\nimport { XModuleName } from '../x-modules/x-modules.types';\n\n/**\n * Gets the X-Component name.\n *\n * @param component - The x-component to get its name.\n * @returns The x-module name if the component is an x-component, or `null` if it is not an\n * x-component.\n * @internal\n */\nexport function getXComponentXModuleName(\n  component: ComponentPublicInstance | undefined\n): XModuleName | null {\n  return component?.$options.xModule ?? null;\n}\n\n/**\n * Returns if the component is an X-Component. An X-Component is a component that has an\n * {@link XModule} associated to it.\n *\n * @param component - The component to check if it is an X-Component.\n * @returns A boolean which flags if a component is a X-Component.\n * @public\n */\nexport function isXComponent(component: ComponentPublicInstance): boolean {\n  return !!getXComponentXModuleName(component);\n}\n\n/**\n * Given a component, finds the root XComponent in the ancestors hierarchy.\n *\n * @param component - The component to find its root XComponent.\n * @returns The root XComponent or undefined if it has not.\n * @public\n */\nexport function getRootXComponent(\n  component: ComponentPublicInstance | null\n): ComponentPublicInstance | undefined {\n  let xComponent: ComponentPublicInstance | undefined;\n  let currentComponent = component;\n  while (currentComponent != null) {\n    if (isXComponent(currentComponent)) {\n      xComponent = currentComponent;\n    }\n    currentComponent = currentComponent.$parent;\n  }\n  return xComponent;\n}\n"],"names":[],"mappings":"AAGA;;;;;;;AAOG;AACG,SAAU,wBAAwB,CACtC,SAA8C,EAAA;AAE9C,IAAA,OAAO,SAAS,EAAE,QAAQ,CAAC,OAAO,IAAI,IAAI,CAAC;AAC7C,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,YAAY,CAAC,SAAkC,EAAA;AAC7D,IAAA,OAAO,CAAC,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;AAC/C,CAAC;AAED;;;;;;AAMG;AACG,SAAU,iBAAiB,CAC/B,SAAyC,EAAA;AAEzC,IAAA,IAAI,UAA+C,CAAC;IACpD,IAAI,gBAAgB,GAAG,SAAS,CAAC;IACjC,OAAO,gBAAgB,IAAI,IAAI,EAAE;AAC/B,QAAA,IAAI,YAAY,CAAC,gBAAgB,CAAC,EAAE;YAClC,UAAU,GAAG,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAC7C,KAAA;AACD,IAAA,OAAO,UAAU,CAAC;AACpB;;;;"}
+{"version":3,"file":"x-component.utils.js","sources":["../../../src/components/x-component.utils.ts"],"sourcesContent":["import type { ComponentPublicInstance } from 'vue'\nimport type { XModuleName } from '../x-modules/x-modules.types'\n\n/**\n * Gets the X-Component name.\n *\n * @param component - The x-component to get its name.\n * @returns The x-module name if the component is an x-component, or `null` if it is not an\n * x-component.\n * @internal\n */\nexport function getXComponentXModuleName(\n  component: ComponentPublicInstance | undefined,\n): XModuleName | null {\n  // eslint-disable-next-line ts/no-unsafe-return\n  return component?.$options.xModule ?? null\n}\n\n/**\n * Returns if the component is an X-Component. An X-Component is a component that has an\n * {@link XModule} associated to it.\n *\n * @param component - The component to check if it is an X-Component.\n * @returns A boolean which flags if a component is a X-Component.\n * @public\n */\nexport function isXComponent(component: ComponentPublicInstance): boolean {\n  return !!getXComponentXModuleName(component)\n}\n\n/**\n * Given a component, finds the root XComponent in the ancestors hierarchy.\n *\n * @param component - The component to find its root XComponent.\n * @returns The root XComponent or undefined if it has not.\n * @public\n */\nexport function getRootXComponent(\n  component: ComponentPublicInstance | null,\n): ComponentPublicInstance | undefined {\n  let xComponent: ComponentPublicInstance | undefined\n  let currentComponent = component\n  while (currentComponent != null) {\n    if (isXComponent(currentComponent)) {\n      xComponent = currentComponent\n    }\n    currentComponent = currentComponent.$parent\n  }\n  return xComponent\n}\n"],"names":[],"mappings":"AAGA;;;;;;;AAOG;AACG,SAAU,wBAAwB,CACtC,SAA8C,EAAA;;AAG9C,IAAA,OAAO,SAAS,EAAE,QAAQ,CAAC,OAAO,IAAI,IAAI,CAAA;AAC5C,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,YAAY,CAAC,SAAkC,EAAA;AAC7D,IAAA,OAAO,CAAC,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAA;AAC9C,CAAC;AAED;;;;;;AAMG;AACG,SAAU,iBAAiB,CAC/B,SAAyC,EAAA;AAEzC,IAAA,IAAI,UAA+C,CAAA;IACnD,IAAI,gBAAgB,GAAG,SAAS,CAAA;IAChC,OAAO,gBAAgB,IAAI,IAAI,EAAE;AAC/B,QAAA,IAAI,YAAY,CAAC,gBAAgB,CAAC,EAAE;YAClC,UAAU,GAAG,gBAAgB,CAAA;AAC9B,SAAA;AACD,QAAA,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAA;AAC5C,KAAA;AACD,IAAA,OAAO,UAAU,CAAA;AACnB;;;;"}

package/js/composables/create-use-device.js

@@ -53,7 +53,7 @@ function createUseDevice(devices) {
         ...devicesFlags,
         orientation,
         isTouchable,
-        deviceName
+        deviceName,
     });
 }
 /**
@@ -125,7 +125,7 @@ function getIsTouchable() {
     const isTouchableRef = ref(detectTouchable());
     if (window) {
         useEventListener(window, 'resize', () => (isTouchableRef.value = detectTouchable()), {
-            passive: true
+            passive: true,
         });
     }
     return isTouchableRef;

package/js/composables/create-use-device.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-use-device.js","sources":["../../../src/composables/create-use-device.ts"],"sourcesContent":["import { reduce } from '@empathyco/x-utils';\nimport { useWindowSize, useScreenOrientation, useEventListener, useMemoize } from '@vueuse/core';\nimport { computed, effectScope, ref, Ref } from 'vue';\nimport { capitalize } from '../utils';\n\n/**\n * The Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\nexport type UseDeviceReturn<Device extends string = string> = {\n  orientation: Ref<'landscape' | 'portrait' | undefined>;\n  isTouchable: Ref<boolean>;\n  deviceName: Ref<string>;\n} & UseDeviceFlags<Device>;\n\n/**\n * The device flags type of the Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\nexport type UseDeviceFlags<Device extends string> = Record<\n  `is${Capitalize<Device>}`,\n  Ref<boolean>\n> &\n  Record<`is${Capitalize<Device>}OrGreater`, Ref<boolean>> &\n  Record<`is${Capitalize<Device>}OrLess`, Ref<boolean>>;\n\n/**\n * Factory function that creates a composable for device detection using the devices parameter\n * to configure breakpoints.\n *\n * @param devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @returns A composable which provides multiple reactive flags and values for detecting the\n * current device. The flags names depends on the names passed in the `devices` parameter.\n * @remarks The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If\n * in a desktop, the height of the window is larger than the width, the orientation will be\n * `landscape`.\n *\n * @example\n * ´´´typescript\n * const useDevice = createUseDevice(\\{ mobile: 0, tablet: 744, desktop: 1024 \\});\n * const \\{\n *   isMobile,\n *   isMobileOrLess,\n *   isMobileOrGreater,\n *   isTablet,\n *   isTabletOrLess,\n *   isTabletOrGreater,\n *   isDesktop,\n *   isDesktopOrLess,\n *   isDesktopOrGreater,\n *   deviceName,\n *   orientation,\n *   istTouchable\n * \\} = useDevice();\n *\n * @public\n */\nexport function createUseDevice<Device extends string>(\n  devices: Record<Device, number>\n): () => UseDeviceReturn<Device> {\n  let devicesFlags: UseDeviceFlags<Device>;\n  let orientation: UseDeviceReturn['orientation'];\n  let isTouchable: UseDeviceReturn['isTouchable'];\n  let deviceName: UseDeviceReturn['deviceName'];\n  // The `effectScope` group all the changes in one to avoid multiple re-renderings.\n  const scope = effectScope();\n  scope.run(() => {\n    devicesFlags = getDeviceFlags(devices);\n    orientation = getOrientation();\n    isTouchable = getIsTouchable();\n    deviceName = getDeviceName(devices, devicesFlags);\n  });\n  return () => ({\n    ...devicesFlags,\n    orientation,\n    isTouchable,\n    deviceName\n  });\n}\n\n/**\n * A function that returns reactive flags to detect the current device based on provided\n * breakpoints.\n *\n * @param devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @returns A object containing the multiple reactive flags.\n *\n * @internal\n */\nfunction getDeviceFlags<Device extends string>(\n  devices: Record<Device, number>\n): UseDeviceFlags<Device> {\n  const { width: windowSize } = useWindowSize();\n  return reduce(\n    devices,\n    (accumulator, device, deviceWidth) => {\n      const isDevice = computed(() => isCurrentDevice(device, devices, windowSize.value));\n      accumulator[`is${capitalize(device)}`] = isDevice;\n      accumulator[`is${capitalize(device)}OrLess`] = computed(\n        () => deviceWidth >= windowSize.value || isDevice.value\n      );\n      accumulator[`is${capitalize(device)}OrGreater`] = computed(\n        () => deviceWidth <= windowSize.value\n      );\n      return accumulator;\n    },\n    {} as Record<string, Ref<boolean>>\n  );\n}\n\n/**\n * To get the devices sorted by size and not run this calculation on every check.\n */\nconst getSortedByWidthDevices = useMemoize((devices: Record<string, number>) =>\n  Object.entries(devices).sort(([, aWidth], [, bWidth]) => bWidth - aWidth)\n);\n\n/**\n * Checks if the current device satisfies the criteria of being a valid device.\n *\n * @param device - The name of the current device.\n * @param devices - An object containing device names and their\n * respective widths.\n * @param windowSize - The width of the window.\n * @returns A boolean value indicating whether the current device satisfies the\n * criteria of being a valid device.\n *\n * @internal\n */\nfunction isCurrentDevice(\n  device: string,\n  devices: Record<string, number>,\n  windowSize: number\n): boolean {\n  const deviceWidth = devices[device];\n  return (\n    deviceWidth <= windowSize &&\n    !getSortedByWidthDevices(devices).some(\n      ([, otherDeviceWidth]) => otherDeviceWidth <= windowSize && otherDeviceWidth > deviceWidth\n    )\n  );\n}\n\n/**\n * A function that returns the current device orientation as a reactive value.\n *\n * @returns A reactive value indicating the current device\n * orientation.\n *\n * @internal\n */\nfunction getOrientation(): UseDeviceReturn['orientation'] {\n  const { orientation } = useScreenOrientation();\n  return computed(() =>\n    orientation.value?.includes('landscape')\n      ? 'landscape'\n      : orientation.value?.includes('portrait')\n      ? 'portrait'\n      : undefined\n  );\n}\n\n/**\n * A function that returns a reactive boolean indicating whether the current device is\n * touch-enabled.\n *\n * @returns A reactive boolean indicating whether the current device is touch-enabled.\n *\n * @internal\n */\nfunction getIsTouchable(): Ref<boolean> {\n  const isTouchableRef = ref(detectTouchable());\n  if (window) {\n    useEventListener(window, 'resize', () => (isTouchableRef.value = detectTouchable()), {\n      passive: true\n    });\n  }\n  return isTouchableRef;\n}\n\n/**\n * A function that returns a reactive string indicating the name of the currently detected device\n * based on the provided devices and device flags.\n *\n * @param  devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @param devicesFlags - An object containing multiple reactive flags and values for detecting\n * the current device.\n * @returns A reactive string indicating the name of the currently detected device.\n *\n * @internal\n */\nfunction getDeviceName(\n  devices: Record<string, number>,\n  devicesFlags: UseDeviceFlags<string>\n): Ref<string> {\n  return computed(\n    () => Object.keys(devices).find(device => devicesFlags[`is${capitalize(device)}`]?.value) ?? ''\n  );\n}\n\n/**\n * A utility function that detects whether the current device is touch-enabled.\n *\n * @returns A boolean indicating whether the current device is touch-enabled.\n *\n * @internal\n */\nfunction detectTouchable(): boolean {\n  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"create-use-device.js","sources":["../../../src/composables/create-use-device.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { reduce } from '@empathyco/x-utils'\nimport { useEventListener, useMemoize, useScreenOrientation, useWindowSize } from '@vueuse/core'\nimport { computed, effectScope, ref } from 'vue'\nimport { capitalize } from '../utils'\n\n/**\n * The Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\nexport type UseDeviceReturn<Device extends string = string> = {\n  orientation: Ref<'landscape' | 'portrait' | undefined>\n  isTouchable: Ref<boolean>\n  deviceName: Ref<string>\n} & UseDeviceFlags<Device>\n\n/**\n * The device flags type of the Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\nexport type UseDeviceFlags<Device extends string> = Record<\n  `is${Capitalize<Device>}`,\n  Ref<boolean>\n> &\n  Record<`is${Capitalize<Device>}OrGreater`, Ref<boolean>> &\n  Record<`is${Capitalize<Device>}OrLess`, Ref<boolean>>\n\n/**\n * Factory function that creates a composable for device detection using the devices parameter\n * to configure breakpoints.\n *\n * @param devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @returns A composable which provides multiple reactive flags and values for detecting the\n * current device. The flags names depends on the names passed in the `devices` parameter.\n * @remarks The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If\n * in a desktop, the height of the window is larger than the width, the orientation will be\n * `landscape`.\n *\n * @example\n * ´´´typescript\n * const useDevice = createUseDevice(\\{ mobile: 0, tablet: 744, desktop: 1024 \\});\n * const \\{\n *   isMobile,\n *   isMobileOrLess,\n *   isMobileOrGreater,\n *   isTablet,\n *   isTabletOrLess,\n *   isTabletOrGreater,\n *   isDesktop,\n *   isDesktopOrLess,\n *   isDesktopOrGreater,\n *   deviceName,\n *   orientation,\n *   istTouchable\n * \\} = useDevice();\n *\n * @public\n */\nexport function createUseDevice<Device extends string>(\n  devices: Record<Device, number>,\n): () => UseDeviceReturn<Device> {\n  let devicesFlags: UseDeviceFlags<Device>\n  let orientation: UseDeviceReturn['orientation']\n  let isTouchable: UseDeviceReturn['isTouchable']\n  let deviceName: UseDeviceReturn['deviceName']\n  // The `effectScope` group all the changes in one to avoid multiple re-renderings.\n  const scope = effectScope()\n  scope.run(() => {\n    devicesFlags = getDeviceFlags(devices)\n    orientation = getOrientation()\n    isTouchable = getIsTouchable()\n    deviceName = getDeviceName(devices, devicesFlags)\n  })\n  return () => ({\n    ...devicesFlags,\n    orientation,\n    isTouchable,\n    deviceName,\n  })\n}\n\n/**\n * A function that returns reactive flags to detect the current device based on provided\n * breakpoints.\n *\n * @param devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @returns A object containing the multiple reactive flags.\n *\n * @internal\n */\nfunction getDeviceFlags<Device extends string>(\n  devices: Record<Device, number>,\n): UseDeviceFlags<Device> {\n  const { width: windowSize } = useWindowSize()\n  return reduce(\n    devices,\n    (accumulator, device, deviceWidth) => {\n      const isDevice = computed(() => isCurrentDevice(device, devices, windowSize.value))\n      accumulator[`is${capitalize(device)}`] = isDevice\n      accumulator[`is${capitalize(device)}OrLess`] = computed(\n        () => deviceWidth >= windowSize.value || isDevice.value,\n      )\n      accumulator[`is${capitalize(device)}OrGreater`] = computed(\n        () => deviceWidth <= windowSize.value,\n      )\n      return accumulator\n    },\n    {} as Record<string, Ref<boolean>>,\n  )\n}\n\n/**\n * To get the devices sorted by size and not run this calculation on every check.\n */\nconst getSortedByWidthDevices = useMemoize((devices: Record<string, number>) =>\n  Object.entries(devices).sort(([, aWidth], [, bWidth]) => bWidth - aWidth),\n)\n\n/**\n * Checks if the current device satisfies the criteria of being a valid device.\n *\n * @param device - The name of the current device.\n * @param devices - An object containing device names and their\n * respective widths.\n * @param windowSize - The width of the window.\n * @returns A boolean value indicating whether the current device satisfies the\n * criteria of being a valid device.\n *\n * @internal\n */\nfunction isCurrentDevice(\n  device: string,\n  devices: Record<string, number>,\n  windowSize: number,\n): boolean {\n  const deviceWidth = devices[device]\n  return (\n    deviceWidth <= windowSize &&\n    !getSortedByWidthDevices(devices).some(\n      ([, otherDeviceWidth]) => otherDeviceWidth <= windowSize && otherDeviceWidth > deviceWidth,\n    )\n  )\n}\n\n/**\n * A function that returns the current device orientation as a reactive value.\n *\n * @returns A reactive value indicating the current device\n * orientation.\n *\n * @internal\n */\nfunction getOrientation(): UseDeviceReturn['orientation'] {\n  const { orientation } = useScreenOrientation()\n  return computed(() =>\n    orientation.value?.includes('landscape')\n      ? 'landscape'\n      : orientation.value?.includes('portrait')\n        ? 'portrait'\n        : undefined,\n  )\n}\n\n/**\n * A function that returns a reactive boolean indicating whether the current device is\n * touch-enabled.\n *\n * @returns A reactive boolean indicating whether the current device is touch-enabled.\n *\n * @internal\n */\nfunction getIsTouchable(): Ref<boolean> {\n  const isTouchableRef = ref(detectTouchable())\n  if (window) {\n    useEventListener(window, 'resize', () => (isTouchableRef.value = detectTouchable()), {\n      passive: true,\n    })\n  }\n  return isTouchableRef\n}\n\n/**\n * A function that returns a reactive string indicating the name of the currently detected device\n * based on the provided devices and device flags.\n *\n * @param  devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @param devicesFlags - An object containing multiple reactive flags and values for detecting\n * the current device.\n * @returns A reactive string indicating the name of the currently detected device.\n *\n * @internal\n */\nfunction getDeviceName(\n  devices: Record<string, number>,\n  devicesFlags: UseDeviceFlags<string>,\n): Ref<string> {\n  return computed(\n    () => Object.keys(devices).find(device => devicesFlags[`is${capitalize(device)}`]?.value) ?? '',\n  )\n}\n\n/**\n * A utility function that detects whether the current device is touch-enabled.\n *\n * @returns A boolean indicating whether the current device is touch-enabled.\n *\n * @internal\n */\nfunction detectTouchable(): boolean {\n  return 'ontouchstart' in window || navigator.maxTouchPoints > 0\n}\n"],"names":[],"mappings":"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"}

package/js/composables/use-_x.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-_x.js","sources":["../../../src/composables/use-$x.ts"],"sourcesContent":["import { useAliasApi } from './use-alias-api';\nimport { useXBus } from './use-x-bus';\n\n/**\n * Function which returns the `$x` object from the current component instance.\n *\n * @returns The `$x` object from the current component instance.\n *\n * @public\n */\nexport function use$x() {\n  const xAliasAPI = useAliasApi();\n  const xBusAPI = useXBus();\n  return Object.assign(xAliasAPI, xBusAPI);\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;AAMG;SACa,KAAK,GAAA;AACnB,IAAA,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;AAChC,IAAA,MAAM,OAAO,GAAG,OAAO,EAAE,CAAC;IAC1B,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAC3C;;;;"}
+{"version":3,"file":"use-_x.js","sources":["../../../src/composables/use-$x.ts"],"sourcesContent":["import { useAliasApi } from './use-alias-api'\nimport { useXBus } from './use-x-bus'\n\n/**\n * Function which returns the `$x` object from the current component instance.\n *\n * @returns The `$x` object from the current component instance.\n *\n * @public\n */\nexport function use$x() {\n  const xAliasAPI = useAliasApi()\n  const xBusAPI = useXBus()\n  return Object.assign(xAliasAPI, xBusAPI)\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;AAMG;SACa,KAAK,GAAA;AACnB,IAAA,MAAM,SAAS,GAAG,WAAW,EAAE,CAAA;AAC/B,IAAA,MAAM,OAAO,GAAG,OAAO,EAAE,CAAA;IACzB,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;AAC1C;;;;"}

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

@@ -9,6 +9,7 @@ import '../plugins/x-plugin.js';
 import { getGetterPath } from '../plugins/x-plugin.utils.js';
 import { useStore } from 'vuex';
 
+/* eslint-disable ts/no-unsafe-return,ts/no-unsafe-member-access,ts/no-unsafe-assignment */
 /**
  * Creates an object containing the alias part of {@link XComponentAPI}.
  *
@@ -23,7 +24,7 @@ function useAliasApi() {
         'nextQueries',
         'querySuggestions',
         'relatedTags',
-        'search'
+        'search',
     ];
     const statusModules = [
         'identifierResults',
@@ -32,7 +33,7 @@ function useAliasApi() {
         'querySuggestions',
         'recommendations',
         'relatedTags',
-        'search'
+        'search',
     ];
     const store = useStore();
     const query = queryModules.reduce((acc, moduleName) => {
@@ -40,7 +41,7 @@ function useAliasApi() {
             get() {
                 return store.state.x[moduleName]?.query ?? '';
             },
-            enumerable: true
+            enumerable: true,
         });
     }, {});
     const status = statusModules.reduce((acc, moduleName) => {
@@ -48,7 +49,7 @@ function useAliasApi() {
             get() {
                 return store.state.x[moduleName]?.status;
             },
-            enumerable: true
+            enumerable: true,
         });
     }, {});
     return {
@@ -137,9 +138,10 @@ function useAliasApi() {
         },
         get priceStats() {
             return store.state.x.search?.stats?.price ?? {};
-        }
+        },
     };
-}
+}
+/* eslint-enable ts/no-unsafe-return,ts/no-unsafe-member-access,ts/no-unsafe-assignment */
 
 export { useAliasApi };
 //# sourceMappingURL=use-alias-api.js.map

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    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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"}
+{"version":3,"file":"use-alias-api.js","sources":["../../../src/composables/use-alias-api.ts"],"sourcesContent":["import type {\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 type { RequestStatus } from '../store/utils/status-store.utils'\nimport type { ScrollComponentState } from '../x-modules/scroll/store/types'\nimport type { InputStatus } from '../x-modules/search-box/store/types'\nimport { getGetterPath } from '../plugins/index'\nimport { useStore } from './use-store'\n\n/* eslint-disable ts/no-unsafe-return,ts/no-unsafe-member-access,ts/no-unsafe-assignment */\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\n/* eslint-enable ts/no-unsafe-return,ts/no-unsafe-member-access,ts/no-unsafe-assignment */\n"],"names":[],"mappings":"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"}

package/js/composables/use-debounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-debounce.js","sources":["../../../src/composables/use-debounce.ts"],"sourcesContent":["import { onBeforeUnmount } from 'vue';\nimport { debounce } from '../utils/debounce';\nimport { DebounceOptions } from '../utils/types';\n\n/**\n * Composable which wraps the function passed as parameter into a debounced function and returns it.\n * It also cancels the debounced function when component is unmounted.\n *\n * @param fn - Function to be debounced.\n * @param debounceTimeInMs - Time of debounce in ms.\n * @param debounceOptions - The options for the debounce strategy.\n * @returns Debounced function obtained from `fn` parameter.\n * @public\n */\nexport function useDebounce<Params extends any[]>(\n  fn: (...args: Params) => void,\n  debounceTimeInMs: number,\n  debounceOptions: DebounceOptions = {}\n) {\n  const debouncedFn = debounce(fn, debounceTimeInMs, debounceOptions);\n\n  onBeforeUnmount(() => {\n    debouncedFn.cancel();\n  });\n\n  return debouncedFn;\n}\n"],"names":[],"mappings":";;;AAIA;;;;;;;;;AASG;AACG,SAAU,WAAW,CACzB,EAA6B,EAC7B,gBAAwB,EACxB,kBAAmC,EAAE,EAAA;IAErC,MAAM,WAAW,GAAG,QAAQ,CAAC,EAAE,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC;IAEpE,eAAe,CAAC,MAAK;QACnB,WAAW,CAAC,MAAM,EAAE,CAAC;AACvB,KAAC,CAAC,CAAC;AAEH,IAAA,OAAO,WAAW,CAAC;AACrB;;;;"}
+{"version":3,"file":"use-debounce.js","sources":["../../../src/composables/use-debounce.ts"],"sourcesContent":["import type { DebounceOptions } from '../utils/types'\nimport { onBeforeUnmount } from 'vue'\nimport { debounce } from '../utils/debounce'\n\n/**\n * Composable which wraps the function passed as parameter into a debounced function and returns it.\n * It also cancels the debounced function when component is unmounted.\n *\n * @param fn - Function to be debounced.\n * @param debounceTimeInMs - Time of debounce in ms.\n * @param debounceOptions - The options for the debounce strategy.\n * @returns Debounced function obtained from `fn` parameter.\n * @public\n */\nexport function useDebounce<Params extends any[]>(\n  fn: (...args: Params) => void,\n  debounceTimeInMs: number,\n  debounceOptions: DebounceOptions = {},\n) {\n  const debouncedFn = debounce(fn, debounceTimeInMs, debounceOptions)\n\n  onBeforeUnmount(() => {\n    debouncedFn.cancel()\n  })\n\n  return debouncedFn\n}\n"],"names":[],"mappings":";;;AAIA;;;;;;;;;AASG;AACG,SAAU,WAAW,CACzB,EAA6B,EAC7B,gBAAwB,EACxB,kBAAmC,EAAE,EAAA;IAErC,MAAM,WAAW,GAAG,QAAQ,CAAC,EAAE,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAA;IAEnE,eAAe,CAAC,MAAK;QACnB,WAAW,CAAC,MAAM,EAAE,CAAA;AACtB,KAAC,CAAC,CAAA;AAEF,IAAA,OAAO,WAAW,CAAA;AACpB;;;;"}

package/js/composables/use-getter.js

@@ -22,6 +22,7 @@ function useGetter(module, getters) {
     const store = useStore();
     return getters.reduce((getterDictionary, getterName) => {
         const getterPath = getGetterPath(module, getterName);
+        // eslint-disable-next-line ts/no-unsafe-return,ts/no-unsafe-member-access
         getterDictionary[getterName] = computed(() => store.getters[getterPath]);
         return getterDictionary;
     }, {});

package/js/composables/use-getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-getter.js","sources":["../../../src/composables/use-getter.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { computed, ComputedRef } from 'vue';\nimport { ExtractGetters, XModuleName } from '../x-modules/x-modules.types';\nimport { getGetterPath } from '../plugins/index';\nimport { useStore } from './use-store';\n\n/**\n * Function which returns the requested getters as a dictionary of getters.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param getters - List of getters names.\n * @returns The requested getters from the module.\n * @public\n */\nexport function useGetter<\n  Module extends XModuleName,\n  GetterName extends keyof ExtractGetters<Module> & string\n>(module: Module, getters: GetterName[]): Dictionary<ComputedRef> {\n  const store = useStore();\n\n  return getters.reduce<Dictionary<ComputedRef>>((getterDictionary, getterName) => {\n    const getterPath = getGetterPath(module, getterName);\n    getterDictionary[getterName] = computed(() => store.getters[getterPath]);\n    return getterDictionary;\n  }, {});\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAMA;;;;;;;AAOG;AACa,SAAA,SAAS,CAGvB,MAAc,EAAE,OAAqB,EAAA;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,OAAO,CAAC,MAAM,CAA0B,CAAC,gBAAgB,EAAE,UAAU,KAAI;QAC9E,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AACrD,QAAA,gBAAgB,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;AACzE,QAAA,OAAO,gBAAgB,CAAC;KACzB,EAAE,EAAE,CAAC,CAAC;AACT;;;;"}
+{"version":3,"file":"use-getter.js","sources":["../../../src/composables/use-getter.ts"],"sourcesContent":["import type { Dictionary } from '@empathyco/x-utils'\nimport type { ComputedRef } from 'vue'\nimport type { ExtractGetters, XModuleName } from '../x-modules/x-modules.types'\nimport { computed } from 'vue'\nimport { getGetterPath } from '../plugins/index'\nimport { useStore } from './use-store'\n\n/**\n * Function which returns the requested getters as a dictionary of getters.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param getters - List of getters names.\n * @returns The requested getters from the module.\n * @public\n */\nexport function useGetter<\n  Module extends XModuleName,\n  GetterName extends keyof ExtractGetters<Module> & string,\n>(module: Module, getters: GetterName[]): Dictionary<ComputedRef> {\n  const store = useStore()\n\n  return getters.reduce<Dictionary<ComputedRef>>((getterDictionary, getterName) => {\n    const getterPath = getGetterPath(module, getterName)\n    // eslint-disable-next-line ts/no-unsafe-return,ts/no-unsafe-member-access\n    getterDictionary[getterName] = computed(() => store.getters[getterPath])\n    return getterDictionary\n  }, {})\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAOA;;;;;;;AAOG;AACa,SAAA,SAAS,CAGvB,MAAc,EAAE,OAAqB,EAAA;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,OAAO,CAAC,MAAM,CAA0B,CAAC,gBAAgB,EAAE,UAAU,KAAI;QAC9E,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;;AAEpD,QAAA,gBAAgB,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAA;AACxE,QAAA,OAAO,gBAAgB,CAAA;KACxB,EAAE,EAAE,CAAC,CAAA;AACR;;;;"}

package/js/composables/use-on-display.js

@@ -1,5 +1,5 @@
-import { watch } from 'vue';
 import { useElementVisibility } from '@vueuse/core';
+import { watch } from 'vue';
 import { useXBus } from './use-x-bus.js';
 
 /**
@@ -9,12 +9,10 @@ import { useXBus } from './use-x-bus.js';
  * @param options - The options to customize the behavior of the composable. The element that
  * will be watched, the callback to trigger and if the callback should be triggered only once
  * or every time the element appears in the viewport, true by default.
- *
  * @returns If the element is currently visible in the viewport or not and the watcher stop handle.
- *
  * @public
  */
-function useOnDisplay({ element, callback, triggerOnce = true }) {
+function useOnDisplay({ element, callback, triggerOnce = true, }) {
     const isElementVisible = useElementVisibility(element);
     const unwatchDisplay = watch(isElementVisible, newValue => {
         if (newValue) {
@@ -26,7 +24,7 @@ function useOnDisplay({ element, callback, triggerOnce = true }) {
     });
     return {
         isElementVisible,
-        unwatchDisplay
+        unwatchDisplay,
     };
 }
 /**
@@ -35,22 +33,20 @@ function useOnDisplay({ element, callback, triggerOnce = true }) {
  *
  * @param options - The options to customize the behavior of the composable. The element that
  * will be watched and the tagging request to emit.
- *
  * @returns If the element is currently visible in the viewport or not and the watcher stop handle.
- *
  * @public
  */
-function useEmitDisplayEvent({ element, taggingRequest, eventMetadata = {} }) {
+function useEmitDisplayEvent({ element, taggingRequest, eventMetadata = {}, }) {
     const bus = useXBus();
     const { isElementVisible, unwatchDisplay } = useOnDisplay({
         element,
         callback: () => {
-            bus.emit('TrackableElementDisplayed', { tagging: { display: taggingRequest } }, eventMetadata);
-        }
+            void bus.emit('TrackableElementDisplayed', { tagging: { display: taggingRequest } }, eventMetadata);
+        },
     });
     return {
         isElementVisible,
-        unwatchDisplay
+        unwatchDisplay,
     };
 }
 

package/js/composables/use-on-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-on-display.js","sources":["../../../src/composables/use-on-display.ts"],"sourcesContent":["import { Ref, watch, WatchStopHandle } from 'vue';\nimport { useElementVisibility } from '@vueuse/core';\nimport { TaggingRequest } from '@empathyco/x-types';\nimport { WireMetadata } from '../wiring';\nimport { useXBus } from './use-x-bus';\n\n/**\n * Composable that triggers a callback whenever the provided element appears in the viewport.\n * It can trigger the first time only or every time the element appears in the viewport.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched, the callback to trigger and if the callback should be triggered only once\n * or every time the element appears in the viewport, true by default.\n *\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n *\n * @public\n */\nexport function useOnDisplay({\n  element,\n  callback,\n  triggerOnce = true\n}: UseOnDisplayOptions): UseOnDisplayReturn {\n  const isElementVisible = useElementVisibility(element);\n\n  const unwatchDisplay = watch(isElementVisible, newValue => {\n    if (newValue) {\n      callback();\n      if (triggerOnce) {\n        unwatchDisplay();\n      }\n    }\n  });\n\n  return {\n    isElementVisible,\n    unwatchDisplay\n  };\n}\n\n/**\n * Composable that emits a `TrackableElementDisplayed` event whenever the provided element\n * appears in the viewport for the first time.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched and the tagging request to emit.\n *\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n *\n * @public\n */\nexport function useEmitDisplayEvent({\n  element,\n  taggingRequest,\n  eventMetadata = {}\n}: UseEmitDisplayEventOptions): UseOnDisplayReturn {\n  const bus = useXBus();\n\n  const { isElementVisible, unwatchDisplay } = useOnDisplay({\n    element,\n    callback: () => {\n      bus.emit(\n        'TrackableElementDisplayed',\n        { tagging: { display: taggingRequest } },\n        eventMetadata\n      );\n    }\n  });\n\n  return {\n    isElementVisible,\n    unwatchDisplay\n  };\n}\n\n/**\n * Options for the {@link useOnDisplay} composable.\n */\ntype UseOnDisplayOptions = {\n  element: HTMLElement | Ref<HTMLElement | null>;\n  callback: () => void;\n  triggerOnce?: boolean;\n};\n\n/**\n * Return type of the {@link useOnDisplay} composable.\n */\ntype UseOnDisplayReturn = {\n  isElementVisible: Ref<boolean>;\n  unwatchDisplay: WatchStopHandle;\n};\n\n/**\n * Options for the {@link useEmitDisplayEvent} composable.\n */\ntype UseEmitDisplayEventOptions = {\n  element: UseOnDisplayOptions['element'];\n  taggingRequest: TaggingRequest;\n  eventMetadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>;\n};\n"],"names":[],"mappings":";;;;AAMA;;;;;;;;;;;AAWG;AACG,SAAU,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,IAAI,EACE,EAAA;AACpB,IAAA,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,EAAE,QAAQ,IAAG;AACxD,QAAA,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,IAAI,WAAW,EAAE;AACf,gBAAA,cAAc,EAAE,CAAC;AAClB,aAAA;AACF,SAAA;AACH,KAAC,CAAC,CAAC;IAEH,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAC;AACJ,CAAC;AAED;;;;;;;;;;AAUG;AACG,SAAU,mBAAmB,CAAC,EAClC,OAAO,EACP,cAAc,EACd,aAAa,GAAG,EAAE,EACS,EAAA;AAC3B,IAAA,MAAM,GAAG,GAAG,OAAO,EAAE,CAAC;AAEtB,IAAA,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC;QACxD,OAAO;QACP,QAAQ,EAAE,MAAK;AACb,YAAA,GAAG,CAAC,IAAI,CACN,2BAA2B,EAC3B,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EACxC,aAAa,CACd,CAAC;SACH;AACF,KAAA,CAAC,CAAC;IAEH,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-on-display.js","sources":["../../../src/composables/use-on-display.ts"],"sourcesContent":["import type { TaggingRequest } from '@empathyco/x-types'\nimport type { Ref, WatchStopHandle } from 'vue'\nimport type { WireMetadata } from '../wiring'\nimport { useElementVisibility } from '@vueuse/core'\nimport { watch } from 'vue'\nimport { useXBus } from './use-x-bus'\n\n/**\n * Composable that triggers a callback whenever the provided element appears in the viewport.\n * It can trigger the first time only or every time the element appears in the viewport.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched, the callback to trigger and if the callback should be triggered only once\n * or every time the element appears in the viewport, true by default.\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n * @public\n */\nexport function useOnDisplay({\n  element,\n  callback,\n  triggerOnce = true,\n}: UseOnDisplayOptions): UseOnDisplayReturn {\n  const isElementVisible = useElementVisibility(element)\n\n  const unwatchDisplay = watch(isElementVisible, newValue => {\n    if (newValue) {\n      callback()\n      if (triggerOnce) {\n        unwatchDisplay()\n      }\n    }\n  })\n\n  return {\n    isElementVisible,\n    unwatchDisplay,\n  }\n}\n\n/**\n * Composable that emits a `TrackableElementDisplayed` event whenever the provided element\n * appears in the viewport for the first time.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched and the tagging request to emit.\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n * @public\n */\nexport function useEmitDisplayEvent({\n  element,\n  taggingRequest,\n  eventMetadata = {},\n}: UseEmitDisplayEventOptions): UseOnDisplayReturn {\n  const bus = useXBus()\n\n  const { isElementVisible, unwatchDisplay } = useOnDisplay({\n    element,\n    callback: () => {\n      void bus.emit(\n        'TrackableElementDisplayed',\n        { tagging: { display: taggingRequest } },\n        eventMetadata,\n      )\n    },\n  })\n\n  return {\n    isElementVisible,\n    unwatchDisplay,\n  }\n}\n\n/**\n * Options for the {@link useOnDisplay} composable.\n */\ninterface UseOnDisplayOptions {\n  element: HTMLElement | Ref<HTMLElement | null>\n  callback: () => void\n  triggerOnce?: boolean\n}\n\n/**\n * Return type of the {@link useOnDisplay} composable.\n */\ninterface UseOnDisplayReturn {\n  isElementVisible: Ref<boolean>\n  unwatchDisplay: WatchStopHandle\n}\n\n/**\n * Options for the {@link useEmitDisplayEvent} composable.\n */\ninterface UseEmitDisplayEventOptions {\n  element: UseOnDisplayOptions['element']\n  taggingRequest: TaggingRequest\n  eventMetadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n}\n"],"names":[],"mappings":";;;;AAOA;;;;;;;;;AASG;AACG,SAAU,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,IAAI,GACE,EAAA;AACpB,IAAA,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAA;IAEtD,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,EAAE,QAAQ,IAAG;AACxD,QAAA,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,EAAE,CAAA;AACV,YAAA,IAAI,WAAW,EAAE;AACf,gBAAA,cAAc,EAAE,CAAA;AACjB,aAAA;AACF,SAAA;AACH,KAAC,CAAC,CAAA;IAEF,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAA;AACH,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,mBAAmB,CAAC,EAClC,OAAO,EACP,cAAc,EACd,aAAa,GAAG,EAAE,GACS,EAAA;AAC3B,IAAA,MAAM,GAAG,GAAG,OAAO,EAAE,CAAA;AAErB,IAAA,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC;QACxD,OAAO;QACP,QAAQ,EAAE,MAAK;AACb,YAAA,KAAK,GAAG,CAAC,IAAI,CACX,2BAA2B,EAC3B,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EACxC,aAAa,CACd,CAAA;SACF;AACF,KAAA,CAAC,CAAA;IAEF,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAA;AACH;;;;"}

package/js/composables/use-state.js

@@ -13,6 +13,7 @@ import { useStore } from 'vuex';
 function useState(module, paths) {
     const store = useStore();
     return paths.reduce((stateDictionary, path) => {
+        // eslint-disable-next-line ts/no-unsafe-return,ts/no-unsafe-member-access
         stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);
         return stateDictionary;
     }, {});

package/js/composables/use-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import { computed, ComputedRef } from 'vue';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { ExtractState, XModuleName } from '../x-modules/x-modules.types';\nimport { useStore } from './use-store';\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param paths - List of state paths.\n * @returns The requested state properties of the module.\n *\n * @public\n */\nexport function useState<\n  Module extends XModuleName,\n  Path extends keyof ExtractState<Module> & string\n>(module: Module, paths: Path[]): Dictionary<ComputedRef> {\n  const store = useStore();\n\n  return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {\n    stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);\n    return stateDictionary;\n  }, {});\n}\n"],"names":[],"mappings":";;;AAKA;;;;;;;;AAQG;AACa,SAAA,QAAQ,CAGtB,MAAc,EAAE,KAAa,EAAA;AAC7B,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,KAAK,CAAC,MAAM,CAA0B,CAAC,eAAe,EAAE,IAAI,KAAI;QACrE,eAAe,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;AACvE,QAAA,OAAO,eAAe,CAAC;KACxB,EAAE,EAAE,CAAC,CAAC;AACT;;;;"}
+{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import type { Dictionary } from '@empathyco/x-utils'\nimport type { ComputedRef } from 'vue'\nimport type { ExtractState, XModuleName } from '../x-modules/x-modules.types'\nimport { computed } from 'vue'\nimport { useStore } from './use-store'\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param paths - List of state paths.\n * @returns The requested state properties of the module.\n *\n * @public\n */\nexport function useState<\n  Module extends XModuleName,\n  Path extends keyof ExtractState<Module> & string,\n>(module: Module, paths: Path[]): Dictionary<ComputedRef> {\n  const store = useStore()\n\n  return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {\n    // eslint-disable-next-line ts/no-unsafe-return,ts/no-unsafe-member-access\n    stateDictionary[path] = computed(() => store?.state.x[module]?.[path])\n    return stateDictionary\n  }, {})\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;;;AAQG;AACa,SAAA,QAAQ,CAGtB,MAAc,EAAE,KAAa,EAAA;AAC7B,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,KAAK,CAAC,MAAM,CAA0B,CAAC,eAAe,EAAE,IAAI,KAAI;;QAErE,eAAe,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;AACtE,QAAA,OAAO,eAAe,CAAA;KACvB,EAAE,EAAE,CAAC,CAAA;AACR;;;;"}