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

package/js/x-modules/history-queries/components/history-queries-switch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @update:modelValue=\"toggle\" :modelValue=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueriesSwitch',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSwitch\n    },\n    setup() {\n      const $x = use$x();\n\n      /**\n       * An object with the isEnabled value and the history queries coming from the store state.\n       *\n       * @internal\n       */\n      const { isEnabled, historyQueries } = useState('historyQueries', [\n        'isEnabled',\n        'historyQueries'\n      ]);\n\n      /**\n       * Checks if there are history queries.\n       *\n       * @returns True if there are history queries; false otherwise.\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])\n      );\n\n      const disableEvent = computed(() =>\n        hasHistoryQueries.value\n          ? 'UserClickedDisableHistoryQueries'\n          : 'UserClickedConfirmDisableHistoryQueries'\n      );\n\n      /**\n       * Emits an event based on the switch state.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');\n      };\n\n      return {\n        toggle,\n        isEnabled\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;gCACEA,gBAAgG,CAAA,YAAA,CAAA,CAAA;AAAvD,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,qBAAW,EAAA,IAAA,CAAA,MAAA;AAAA,IAAA,UAAA,EAAA,IAAA,CAAA,SAAA;;;;;;;;"}
+{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch :model-value=\"isEnabled\" aria-label=\"Queries' history\" @update:model-value=\"toggle\" />\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery } from '@empathyco/x-types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSwitch from '../../../components/base-switch.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * History Queries Switch is a component to activate or deactivate the history queries.\n * This component emits events depending on the `isEnabled` value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQueriesSwitch',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSwitch,\n  },\n  setup() {\n    const $x = use$x()\n\n    /**\n     * An object with the isEnabled value and the history queries coming from the store state.\n     *\n     * @internal\n     */\n    const { isEnabled, historyQueries } = useState('historyQueries', [\n      'isEnabled',\n      'historyQueries',\n    ])\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value as HistoryQuery[]))\n\n    const disableEvent = computed(() =>\n      hasHistoryQueries.value\n        ? 'UserClickedDisableHistoryQueries'\n        : 'UserClickedConfirmDisableHistoryQueries',\n    )\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries')\n    }\n\n    return {\n      toggle,\n      isEnabled,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\nimport { HistoryQueriesSwitch } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueriesSwitchDemo',\n  components: {\n    HistoryQueriesSwitch,\n  },\n}\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\nimport { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'\nimport { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search'\nexport default {\n  name: 'HistoryQueriesSwitchDemo',\n  components: {\n    BaseEventButton,\n    BaseEventsModal,\n    HistoryQueriesSwitch,\n    HistoryQueries,\n    SearchInput,\n    SearchButton,\n  },\n  data() {\n    return {\n      eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n      disableEvents: {\n        UserClickedConfirmDisableHistoryQueries: undefined,\n        UserClickedCloseEventsModal: undefined,\n      },\n      cancelEvents: {\n        UserClickedCloseEventsModal: undefined,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;gCACEA,gBAAkG,CAAA,YAAA,CAAA,CAAA;AAA7D,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,aAAA,EAAA,IAAA,CAAA,SAAA;AAAA,IAAA,YAAA,EAAA,kBAAA;;;;;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue2.js

@@ -1,9 +1,9 @@
 import { defineComponent, computed } from 'vue';
 import BaseSwitch from '../../../components/base-switch.vue.js';
-import { historyQueriesXModule } from '../x-module.js';
-import { isArrayEmpty } from '../../../utils/array.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
+import { isArrayEmpty } from '../../../utils/array.js';
+import { historyQueriesXModule } from '../x-module.js';
 
 /**
  * History Queries Switch is a component to activate or deactivate the history queries.
@@ -15,7 +15,7 @@ var _sfc_main = defineComponent({
     name: 'HistoryQueriesSwitch',
     xModule: historyQueriesXModule.name,
     components: {
-        BaseSwitch
+        BaseSwitch,
     },
     setup() {
         const $x = use$x();
@@ -26,7 +26,7 @@ var _sfc_main = defineComponent({
          */
         const { isEnabled, historyQueries } = useState('historyQueries', [
             'isEnabled',
-            'historyQueries'
+            'historyQueries',
         ]);
         /**
          * Checks if there are history queries.
@@ -47,9 +47,9 @@ var _sfc_main = defineComponent({
         };
         return {
             toggle,
-            isEnabled
+            isEnabled,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/history-queries/components/history-queries-switch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @update:modelValue=\"toggle\" :modelValue=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueriesSwitch',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSwitch\n    },\n    setup() {\n      const $x = use$x();\n\n      /**\n       * An object with the isEnabled value and the history queries coming from the store state.\n       *\n       * @internal\n       */\n      const { isEnabled, historyQueries } = useState('historyQueries', [\n        'isEnabled',\n        'historyQueries'\n      ]);\n\n      /**\n       * Checks if there are history queries.\n       *\n       * @returns True if there are history queries; false otherwise.\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])\n      );\n\n      const disableEvent = computed(() =>\n        hasHistoryQueries.value\n          ? 'UserClickedDisableHistoryQueries'\n          : 'UserClickedConfirmDisableHistoryQueries'\n      );\n\n      /**\n       * Emits an event based on the switch state.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');\n      };\n\n      return {\n        toggle,\n        isEnabled\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAaE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB;;;;AAIE;QACF,MAAM,EAAE,SAAS,EAAE,gBAAiB,GAAE,QAAQ,CAAC,gBAAgB,EAAE;YAC/D,WAAW;YACX,gBAAe;AAChB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAChC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAAuB,CAAA,CAC3D,CAAA;QAED,MAAM,YAAW,GAAI,QAAQ,CAAC,MAC5B,iBAAiB,CAAC,KAAI;AACpB,cAAE,kCAAiC;cACjC,yCAAwC,CAC7C,CAAA;AAED;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAI,GAAI,YAAY,CAAC,KAAM,GAAE,iCAAiC,CAAC,CAAA;AACnF,SAAC,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch :model-value=\"isEnabled\" aria-label=\"Queries' history\" @update:model-value=\"toggle\" />\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery } from '@empathyco/x-types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSwitch from '../../../components/base-switch.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * History Queries Switch is a component to activate or deactivate the history queries.\n * This component emits events depending on the `isEnabled` value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQueriesSwitch',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSwitch,\n  },\n  setup() {\n    const $x = use$x()\n\n    /**\n     * An object with the isEnabled value and the history queries coming from the store state.\n     *\n     * @internal\n     */\n    const { isEnabled, historyQueries } = useState('historyQueries', [\n      'isEnabled',\n      'historyQueries',\n    ])\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value as HistoryQuery[]))\n\n    const disableEvent = computed(() =>\n      hasHistoryQueries.value\n        ? 'UserClickedDisableHistoryQueries'\n        : 'UserClickedConfirmDisableHistoryQueries',\n    )\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries')\n    }\n\n    return {\n      toggle,\n      isEnabled,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\nimport { HistoryQueriesSwitch } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueriesSwitchDemo',\n  components: {\n    HistoryQueriesSwitch,\n  },\n}\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\nimport { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'\nimport { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search'\nexport default {\n  name: 'HistoryQueriesSwitchDemo',\n  components: {\n    BaseEventButton,\n    BaseEventsModal,\n    HistoryQueriesSwitch,\n    HistoryQueries,\n    SearchInput,\n    SearchButton,\n  },\n  data() {\n    return {\n      eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n      disableEvents: {\n        UserClickedConfirmDisableHistoryQueries: undefined,\n        UserClickedCloseEventsModal: undefined,\n      },\n      cancelEvents: {\n        UserClickedCloseEventsModal: undefined,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAaA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB;;;;AAIE;QACF,MAAM,EAAE,SAAS,EAAE,gBAAiB,GAAE,QAAQ,CAAC,gBAAgB,EAAE;YAC/D,WAAW;YACX,gBAAgB;AACjB,SAAA,CAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAAuB,CAAC,CAAA,CAAA;QAE9F,MAAM,YAAW,GAAI,QAAQ,CAAC,MAC5B,iBAAiB,CAAC,KAAI;AACpB,cAAE,kCAAiC;cACjC,yCAAyC,CAC/C,CAAA;AAEA;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAI,GAAI,YAAY,CAAC,KAAI,GAAI,iCAAiC,CAAA,CAAA;AAClF,SAAA,CAAA;QAEA,OAAO;YACL,MAAM;YACN,SAAS;SACX,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/history-queries.vue.js

@@ -16,7 +16,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           suggestion: baseScope.suggestion,
           "data-test": "history-query-item",
           class: "x-history-queries__item",
-          suggestionClass: "x-suggestion"
+          "suggestion-class": "x-suggestion"
         }, {
           default: withCtx((historyQueryScope) => [
             renderSlot(_ctx.$slots, "suggestion-content", normalizeProps(guardReactiveProps({ ...baseScope, ...historyQueryScope })))

package/js/x-modules/history-queries/components/history-queries.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"historyQueriesWithResults\"\n    class=\"x-history-queries\"\n    data-test=\"history-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot History Query item\n            @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <HistoryQuery\n          :suggestion=\"baseScope.suggestion\"\n          data-test=\"history-query-item\"\n          class=\"x-history-queries__item\"\n          suggestionClass=\"x-suggestion\"\n        >\n          <template #default=\"historyQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...historyQueryScope }\" />\n          </template>\n          <template #remove-button-content=\"removeHistoryQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query remove button content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot\n              name=\"suggestion-remove-content\"\n              v-bind=\"{ ...baseScope, ...removeHistoryQueryScope }\"\n            />\n          </template>\n        </HistoryQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * This component renders a list of suggestions coming from the user queries history.\n   * Allows the user to select one of them, emitting the needed events. A history query is just\n   * another type of suggestion that contains a query that the user has made in the past.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueries',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSuggestions,\n      HistoryQuery\n    },\n    setup() {\n      /**\n       * The filtered list of history queries.\n       *\n       * @internal\n       */\n      const { historyQueriesWithResults } = useGetter('historyQueries', [\n        'historyQueriesWithResults'\n      ]);\n\n      return {\n        historyQueriesWithResults\n      };\n    }\n  });\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :animation=\"'FadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion=\"{ suggestion }\">\n      <HistoryQuery :suggestion=\"suggestion\" />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-content=\"{ suggestion }\">\n      <span>{{ suggestion.query }}</span>\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-remove-content=\"{ suggestion }\">\n      <CrossIcon />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      CrossIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":";;;;;;AA4CoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAzCX,EAAA,OAAAC,SAAA,EAAoB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACzB,WAAU,EAAA,IAAA,CAAA,yBAAA;AAAA,IAAA,KAAA,EAAA,mBAAA;IAEC,WAAO,EAAA,iBAAA;AAAA,GAAA,EAAA;aAQdC,OA2Be,CAAA,CAAA,SAAA,KAAA;AAAA,MA1BZC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CACxB,uBAAqB,EAAA;AAAA,UAC9B,UAAM,EAAA,SAAA,CAAA,UAAA;AAAA,UACN,WAAA,EAAA,oBAAA;AAAA,UAAA,KAAA,EAAA,yBAAA;UAEW,eAAO,EAAA,cAAA;AAAA,SAAA,EAAA;;AASP,YAAAH,UAAA,CAAA,IAAA,CAAA,MAAA,EAAqB,sBAAEC,cAAuB,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,iBAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;AA7BnE,YAAAF,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,uBAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"historyQueriesWithResults\"\n    class=\"x-history-queries\"\n    data-test=\"history-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot History Query item\n            @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <HistoryQuery\n          :suggestion=\"baseScope.suggestion\"\n          data-test=\"history-query-item\"\n          class=\"x-history-queries__item\"\n          suggestion-class=\"x-suggestion\"\n        >\n          <template #default=\"historyQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...historyQueryScope }\" />\n          </template>\n          <template #remove-button-content=\"removeHistoryQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query remove button content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot\n              name=\"suggestion-remove-content\"\n              v-bind=\"{ ...baseScope, ...removeHistoryQueryScope }\"\n            />\n          </template>\n        </HistoryQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * This component renders a list of suggestions coming from the user queries history.\n * Allows the user to select one of them, emitting the needed events. A history query is just\n * another type of suggestion that contains a query that the user has made in the past.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSuggestions,\n    HistoryQuery,\n  },\n  setup() {\n    /**\n     * The filtered list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueriesWithResults } = useGetter('historyQueries', ['historyQueriesWithResults'])\n\n    return {\n      historyQueriesWithResults,\n    }\n  },\n})\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :animation=\"'FadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion=\"{ suggestion }\">\n      <HistoryQuery :suggestion=\"suggestion\" />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-content=\"{ suggestion }\">\n      <span>{{ suggestion.query }}</span>\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-remove-content=\"{ suggestion }\">\n      <CrossIcon />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    CrossIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":";;;;;;AA4CoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAzCX,EAAA,OAAAC,SAAA,EAAoB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACzB,WAAU,EAAA,IAAA,CAAA,yBAAA;AAAA,IAAA,KAAA,EAAA,mBAAA;IAEC,WAAO,EAAA,iBAAA;AAAA,GAAA,EAAA;aAQdC,OA2Be,CAAA,CAAA,SAAA,KAAA;AAAA,MA1BZC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CACxB,uBAAqB,EAAA;AAAA,UAC9B,UAAM,EAAA,SAAA,CAAA,UAAA;AAAA,UACN,WAAA,EAAA,oBAAA;AAAA,UAAA,KAAA,EAAA,yBAAA;UAEW,kBAAS,EAAA,cAAA;AAAA,SAAA,EAAA;;AAST,YAAAH,UAAA,CAAA,IAAA,CAAA,MAAA,EAAqB,sBAAEC,cAAuB,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,iBAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;AA7BnE,YAAAF,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,uBAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/history-queries/components/history-queries.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
-import { historyQueriesXModule } from '../x-module.js';
 import { useGetter } from '../../../composables/use-getter.js';
+import { historyQueriesXModule } from '../x-module.js';
 import HistoryQuery from './history-query.vue.js';
 
 /**
@@ -16,7 +16,7 @@ var _sfc_main = defineComponent({
     xModule: historyQueriesXModule.name,
     components: {
         BaseSuggestions,
-        HistoryQuery
+        HistoryQuery,
     },
     setup() {
         /**
@@ -24,13 +24,11 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { historyQueriesWithResults } = useGetter('historyQueries', [
-            'historyQueriesWithResults'
-        ]);
+        const { historyQueriesWithResults } = useGetter('historyQueries', ['historyQueriesWithResults']);
         return {
-            historyQueriesWithResults
+            historyQueriesWithResults,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/history-queries/components/history-queries.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"historyQueriesWithResults\"\n    class=\"x-history-queries\"\n    data-test=\"history-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot History Query item\n            @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <HistoryQuery\n          :suggestion=\"baseScope.suggestion\"\n          data-test=\"history-query-item\"\n          class=\"x-history-queries__item\"\n          suggestionClass=\"x-suggestion\"\n        >\n          <template #default=\"historyQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...historyQueryScope }\" />\n          </template>\n          <template #remove-button-content=\"removeHistoryQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query remove button content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot\n              name=\"suggestion-remove-content\"\n              v-bind=\"{ ...baseScope, ...removeHistoryQueryScope }\"\n            />\n          </template>\n        </HistoryQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * This component renders a list of suggestions coming from the user queries history.\n   * Allows the user to select one of them, emitting the needed events. A history query is just\n   * another type of suggestion that contains a query that the user has made in the past.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueries',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSuggestions,\n      HistoryQuery\n    },\n    setup() {\n      /**\n       * The filtered list of history queries.\n       *\n       * @internal\n       */\n      const { historyQueriesWithResults } = useGetter('historyQueries', [\n        'historyQueriesWithResults'\n      ]);\n\n      return {\n        historyQueriesWithResults\n      };\n    }\n  });\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :animation=\"'FadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion=\"{ suggestion }\">\n      <HistoryQuery :suggestion=\"suggestion\" />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-content=\"{ suggestion }\">\n      <span>{{ suggestion.query }}</span>\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-remove-content=\"{ suggestion }\">\n      <CrossIcon />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      CrossIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAsDE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;QACf,YAAW;AACZ,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;AACF,QAAA,MAAM,EAAE,2BAA4B,GAAE,SAAS,CAAC,gBAAgB,EAAE;YAChE,2BAA0B;AAC3B,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"historyQueriesWithResults\"\n    class=\"x-history-queries\"\n    data-test=\"history-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot History Query item\n            @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <HistoryQuery\n          :suggestion=\"baseScope.suggestion\"\n          data-test=\"history-query-item\"\n          class=\"x-history-queries__item\"\n          suggestion-class=\"x-suggestion\"\n        >\n          <template #default=\"historyQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...historyQueryScope }\" />\n          </template>\n          <template #remove-button-content=\"removeHistoryQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query remove button content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot\n              name=\"suggestion-remove-content\"\n              v-bind=\"{ ...baseScope, ...removeHistoryQueryScope }\"\n            />\n          </template>\n        </HistoryQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * This component renders a list of suggestions coming from the user queries history.\n * Allows the user to select one of them, emitting the needed events. A history query is just\n * another type of suggestion that contains a query that the user has made in the past.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSuggestions,\n    HistoryQuery,\n  },\n  setup() {\n    /**\n     * The filtered list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueriesWithResults } = useGetter('historyQueries', ['historyQueriesWithResults'])\n\n    return {\n      historyQueriesWithResults,\n    }\n  },\n})\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :animation=\"'FadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion=\"{ suggestion }\">\n      <HistoryQuery :suggestion=\"suggestion\" />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-content=\"{ suggestion }\">\n      <span>{{ suggestion.query }}</span>\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-remove-content=\"{ suggestion }\">\n      <CrossIcon />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    CrossIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAsDA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;QACf,YAAY;AACb,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;AACF,QAAA,MAAM,EAAE,yBAA0B,EAAA,GAAI,SAAS,CAAC,gBAAgB,EAAE,CAAC,2BAA2B,CAAC,CAAA,CAAA;QAE/F,OAAO;YACL,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/history-query.vue.js

@@ -8,11 +8,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_RemoveHistoryQuery = resolveComponent("RemoveHistoryQuery");
   return openBlock(), createElementBlock("div", _hoisted_1, [
     createVNode(_component_BaseSuggestion, mergeProps({
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", _ctx.suggestion, $event)),
       class: ["x-history-query__suggestion", _ctx.suggestionClass]
     }, { suggestion: _ctx.suggestion, suggestionSelectedEvents: _ctx.suggestionSelectedEvents, query: _ctx.query }, {
       "data-test": "history-query",
-      feature: "history_query"
+      feature: "history_query",
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", _ctx.suggestion, $event))
     }), {
       default: withCtx((baseScope) => [
         renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ ...baseScope })))
@@ -22,7 +22,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 16, ["class"]),
     createVNode(_component_RemoveHistoryQuery, {
       class: normalizeClass(["x-history-query__remove x-suggestion-group-button", _ctx.removeButtonClass]),
-      historyQuery: _ctx.suggestion,
+      "history-query": _ctx.suggestion,
       "data-test": "remove-history-query"
     }, {
       default: withCtx(() => [
@@ -32,7 +32,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
       /* FORWARDED */
-    }, 8, ["class", "historyQuery"])
+    }, 8, ["class", "history-query"])
   ]);
 }
 var HistoryQuery = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/js/x-modules/history-queries/components/history-query.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      @click=\"$emit('click', suggestion, $event)\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      #default=\"baseScope\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :historyQuery=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import RemoveHistoryQuery from './remove-history-query.vue';\n\n  /**\n   * This component renders a history query suggestion combining two buttons: one for selecting this\n   * suggestion as the search query, and another one to remove this query suggestion from the\n   * history queries.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQuery',\n    xModule: historyQueriesXModule.name,\n    components: { RemoveHistoryQuery, BaseSuggestion },\n    props: {\n      /**\n       * The history query suggestion to render.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<HistoryQueryModel>,\n        required: true\n      },\n      /** Class inherited by content element. */\n      removeButtonClass: String,\n      /** Class inherited by content element. */\n      suggestionClass: String\n    },\n    emits: ['click'],\n    setup(props) {\n      /**\n       * The normalized query of the history-queries module.\n       *\n       * @internal\n       */\n      const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;\n\n      /**\n       * The list of events that are going to be emitted when the suggestion button is pressed.\n       *\n       * @internal\n       * @returns The {@link XEvent} to emit.\n       */\n      const suggestionSelectedEvents = computed(\n        (): Partial<XEventsTypes> => ({\n          UserSelectedAHistoryQuery: props.suggestion\n        })\n      );\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](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 history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  import { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery,\n      HistoryIcon,\n      CrossIcon,\n      Highlight\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_createVNode","_mergeProps","suggestionClass","suggestion","suggestionSelectedEvents","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;;wCACEA,gBAoCM,CAAA,oBAAA,CAAA,CAAA;AA5BD,EAAA,OAAAC,SAAA,EAAY,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,WAAA,CACP,2BAA6BC,UAC3BC,CAAAA;AAAAA,MACEC,OAAAA,EAAAA,MAAAA,CAAAA,CAAAA,CAAAA,KAAAA,MAAAA,CAAU,qCAAEC,IAAwB,CAAA,UAAA,EAAA,MAAA,CAAA,CAAA;AAAA,MAC9C,KAAyB,EAAA,CAAA,6BAAA,EAAA,IAAA,CAAA,eAAA,CAAA;AAAA,KAAA,EACzB,cAAQ,IAAe,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,EAAA;AAAA,MAAA,WAAA,EAAA,eAAA;MACtB,OAAO,EAAA,eAAA;AAAA,KAQR,CAAA,EAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAvBN,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAyBI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EACE,IA1BN,CA0BY,OAAA,CAAA,CAAA;AAAA,IAAAR,WAAA,CAEL,6BAAwB,EAAA;AAAA,MACzB,sBAAU,CAAsB,mDAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,MAAA,YAAA,EAAA,IAAA,CAAA,UAAA;AA7BtC,MAAA,WAAA,EAAA,sBAAA;AAAA,KAAA,EAAA;eAAAK,OAmCkE,CAAA,MAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,uBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;AAnClE,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
+{"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      v-slot=\"baseScope\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      @click=\"$emit('click', suggestion, $event)\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :history-query=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport RemoveHistoryQuery from './remove-history-query.vue'\n\n/**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQuery',\n  xModule: historyQueriesXModule.name,\n  components: { RemoveHistoryQuery, BaseSuggestion },\n  props: {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<HistoryQueryModel>,\n      required: true,\n    },\n    /** Class inherited by content element. */\n    removeButtonClass: String,\n    /** Class inherited by content element. */\n    suggestionClass: String,\n  },\n  emits: ['click'],\n  setup(props) {\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    const suggestionSelectedEvents = computed(\n      (): Partial<XEventsTypes> => ({\n        UserSelectedAHistoryQuery: props.suggestion,\n      }),\n    )\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](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 history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nimport { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n    HistoryIcon,\n    CrossIcon,\n    Highlight,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","suggestionClass","_createVNode","_mergeProps","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;;wCACEA,gBAoCM,CAAA,oBAAA,CAAA,CAAA;AA3BF,EAAA,OAAAC,SAAA,uBAAmC,KAC3BC,EAAAA,UAAAA,EAAAA;AAAAA,IACYC,WAAA,CAAA,yBAAA,EAAAC,UAAA,CAAA;AAAA,MACpB,KAAyB,EAAA,CAAA,6BAAA,EAAA,IAAA,CAAA,eAAA,CAAA;AAAA,KAAA,EACzB,cAAQ,IAAe,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,EAAA;AAAA,MACtB,WAAK,EAAA,eAAA;AAAA,MAAA,OAAA,EAAA,eAAA;AAfZ,MAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KASc,MAAS,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,KAAA,CAAA,OAAA,EAAA,IAAA,CAAA,UAAA,EAAA,MAAA,CAAA,CAAA;AAAA,KAcjB,CAAA,EAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAvBN,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAyBI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EACE,IA1BN,CA0BY,OAAA,CAAA,CAAA;AAAA,IAAAL,WAAA,CAEL,6BAAyB,EAAA;AAAA,MAC1B,sBAAU,CAAsB,mDAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,MAAA,eAAA,EAAA,IAAA,CAAA,UAAA;AA7BtC,MAAA,WAAA,EAAA,sBAAA;AAAA,KAAA,EAAA;eAAAE,OAmCkE,CAAA,MAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,uBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;AAnClE,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/history-queries/components/history-query.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
-import { historyQueriesXModule } from '../x-module.js';
 import { useGetter } from '../../../composables/use-getter.js';
+import { historyQueriesXModule } from '../x-module.js';
 import RemoveHistoryQuery from './remove-history-query.vue.js';
 
 /**
@@ -23,12 +23,12 @@ var _sfc_main = defineComponent({
          */
         suggestion: {
             type: Object,
-            required: true
+            required: true,
         },
         /** Class inherited by content element. */
         removeButtonClass: String,
         /** Class inherited by content element. */
-        suggestionClass: String
+        suggestionClass: String,
     },
     emits: ['click'],
     setup(props) {
@@ -45,13 +45,13 @@ var _sfc_main = defineComponent({
          * @returns The {@link XEvent} to emit.
          */
         const suggestionSelectedEvents = computed(() => ({
-            UserSelectedAHistoryQuery: props.suggestion
+            UserSelectedAHistoryQuery: props.suggestion,
         }));
         return {
             query,
-            suggestionSelectedEvents
+            suggestionSelectedEvents,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/history-queries/components/history-query.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-query.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      @click=\"$emit('click', suggestion, $event)\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      #default=\"baseScope\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :historyQuery=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import RemoveHistoryQuery from './remove-history-query.vue';\n\n  /**\n   * This component renders a history query suggestion combining two buttons: one for selecting this\n   * suggestion as the search query, and another one to remove this query suggestion from the\n   * history queries.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQuery',\n    xModule: historyQueriesXModule.name,\n    components: { RemoveHistoryQuery, BaseSuggestion },\n    props: {\n      /**\n       * The history query suggestion to render.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<HistoryQueryModel>,\n        required: true\n      },\n      /** Class inherited by content element. */\n      removeButtonClass: String,\n      /** Class inherited by content element. */\n      suggestionClass: String\n    },\n    emits: ['click'],\n    setup(props) {\n      /**\n       * The normalized query of the history-queries module.\n       *\n       * @internal\n       */\n      const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;\n\n      /**\n       * The list of events that are going to be emitted when the suggestion button is pressed.\n       *\n       * @internal\n       * @returns The {@link XEvent} to emit.\n       */\n      const suggestionSelectedEvents = computed(\n        (): Partial<XEventsTypes> => ({\n          UserSelectedAHistoryQuery: props.suggestion\n        })\n      );\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](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 history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  import { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery,\n      HistoryIcon,\n      CrossIcon,\n      Highlight\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAiDE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,EAAE,kBAAkB,EAAE,gBAAgB;AAClD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,iBAAiB,EAAE,MAAM;;AAEzB,QAAA,eAAe,EAAE,MAAK;AACvB,KAAA;IACD,KAAK,EAAE,CAAC,OAAO,CAAC;AAChB,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,KAAI,GAAI,SAAS,CAAC,gBAAgB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAA;AAE9E;;;;;AAKE;AACF,QAAA,MAAM,wBAAuB,GAAI,QAAQ,CACvC,OAA8B;YAC5B,yBAAyB,EAAE,KAAK,CAAC,UAAS;AAC3C,SAAA,CAAA,CACF,CAAA;QAED,OAAO;YACL,KAAK;YACL,wBAAuB;SACxB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"history-query.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      v-slot=\"baseScope\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      @click=\"$emit('click', suggestion, $event)\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :history-query=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport RemoveHistoryQuery from './remove-history-query.vue'\n\n/**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQuery',\n  xModule: historyQueriesXModule.name,\n  components: { RemoveHistoryQuery, BaseSuggestion },\n  props: {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<HistoryQueryModel>,\n      required: true,\n    },\n    /** Class inherited by content element. */\n    removeButtonClass: String,\n    /** Class inherited by content element. */\n    suggestionClass: String,\n  },\n  emits: ['click'],\n  setup(props) {\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    const suggestionSelectedEvents = computed(\n      (): Partial<XEventsTypes> => ({\n        UserSelectedAHistoryQuery: props.suggestion,\n      }),\n    )\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](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 history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nimport { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n    HistoryIcon,\n    CrossIcon,\n    Highlight,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAkDA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,EAAE,kBAAkB,EAAE,gBAAgB;AAClD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,iBAAiB,EAAE,MAAM;;AAEzB,QAAA,eAAe,EAAE,MAAM;AACxB,KAAA;IACD,KAAK,EAAE,CAAC,OAAO,CAAC;AAChB,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,KAAI,GAAI,SAAS,CAAC,gBAAgB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAc,CAAA;AAE7E;;;;;AAKE;AACF,QAAA,MAAM,wBAAuB,GAAI,QAAQ,CACvC,OAA8B;YAC5B,yBAAyB,EAAE,KAAK,CAAC,UAAU;AAC5C,SAAA,CAAC,CACJ,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/my-history.vue.js

@@ -19,7 +19,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       (openBlock(true), createElementBlock(
         Fragment,
         null,
-        renderList(_ctx.groupByDate, (historyQueries, date) => {
+        renderList(_ctx.groupByDate, (queries, date) => {
           return openBlock(), createElementBlock("li", {
             key: date,
             class: "x-my-history-item",
@@ -35,7 +35,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               )
             ], true),
             createVNode(_component_BaseSuggestions, {
-              suggestions: historyQueries,
+              suggestions: queries,
               class: normalizeClass(["x-my-history-queries", _ctx.queriesListClass]),
               "data-test": "my-history-queries",
               animation: _ctx.animation

package/js/x-modules/history-queries/components/my-history.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(historyQueries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"historyQueries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryType } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { computed, defineComponent, inject } from 'vue';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { groupItemsBy, isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/index';\n  import { useState } from '../../../composables/use-state';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * The component renders the full history of user searched queries grouped by the day\n   * they were performed.\n   *\n   * @remarks\n   *\n   * Allows the user to select one of them, emitting the needed events.\n   * A history query is just another type of suggestion that contains a query that the user has\n   * made in the past.\n   * @public\n   */\n  export default defineComponent({\n    name: 'MyHistory',\n    xModule: historyQueriesXModule.name,\n    components: {\n      HistoryQuery,\n      BaseSuggestions\n    },\n    props: {\n      /**\n       * Animation component that will be used to animate the suggestions.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /**\n       * The current locale.\n       *\n       * @public\n       */\n      locale: {\n        type: String,\n        default: 'en'\n      },\n      /** Class inherited by content element. */\n      queriesListClass: String\n    },\n    setup(props) {\n      /**\n       * The list of history queries.\n       *\n       * @internal\n       */\n      const { historyQueries } = useState('historyQueries', ['historyQueries']);\n\n      /**\n       * The provided {@link SnippetConfig}.\n       *\n       * @internal\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * The locale that it is going to be used. It can be the one send it by the snippet config or\n       * the one pass it using the prop.\n       *\n       * @returns The locale to be used.\n       * @internal\n       */\n      const usedLocale = computed(() => snippetConfig?.lang ?? props.locale);\n\n      /**\n       * Returns a record of history queries grouped by date.\n       *\n       * @example\n       * ```typescript\n       *  const historyQueriesGrouped = {\n       *    'Monday, January 10th, 2022' : [{\n       *      query: 'lego',\n       *      modelName: 'HistoryQuery',\n       *      timestamp: 121312312\n       *    }],\n       *    'Tuesday, January 11th, 2022' : [{\n       *      query: 'barbie',\n       *      modelName: 'HistoryQuery',\n       *      timestamp: 15221212\n       *    }]\n       *  }\n       * ```\n       * @returns The history queries grouped by date.\n       * @internal\n       */\n      const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n        return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n          return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n            day: 'numeric',\n            weekday: 'long',\n            month: 'long',\n            year: 'numeric'\n          });\n        });\n      });\n\n      /**\n       * Formats a timestamp into `hh:mm [PM/AM]` format.\n       *\n       * @example\n       * ```typescript\n       * // locale 'es'\n       * console.log(formatTime(Date.now()) // '16:54'.\n       *\n       * // locale 'en'\n       * console.log(formatTime(Date.now()) // '16:54 PM'.\n       * ```\n       * @param timestamp - The timestamp to format.\n       * @returns The formatted time.\n       * @internal\n       */\n      const formatTime = (timestamp: number) =>\n        new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n          hour: '2-digit',\n          minute: '2-digit'\n        });\n\n      /**\n       * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n       * stored.\n       *\n       * @returns True if there are history queries; false otherwise.\n       * @internal\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQueryType[])\n      );\n\n      return {\n        hasHistoryQueries,\n        groupByDate,\n        historyQueries,\n        formatTime\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-my-history {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      CrossIcon\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_createVNode","animation","_withCtx","_renderSlot","_mergeProps","_createCommentVNode"],"mappings":";;;;;MAS8C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,yBAAA;;;;;AARJ,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AADpD,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAC,SAAA,EAC0E,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAI,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AAD/E,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;iBAIY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,cAAA,EAAA,IAAA,KAAA;AACL,UAAA,OAAAL,SAAA,EAAoB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACzB,GAAA,EAAA,IAAA;AAAA,YAAA,KAAA,EAAA,mBAAA;YAEA,WAEO,EAAA,iBAAA;AAAA,WAAA,EAAA;;AACP,cAAAG,kBAAA;AAAA,gBA0CkB,MAAA;AAAA,gBAAA,UAAA;AAAA,gBAAAC,eAAA,CAAA,IAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAzCf,EAAA,IAAA,CAAA;AAAA,YAAAC,WAAA,CAZT,0BAac,EAAA;AAAA,cAEN,WAAU,EAAA,cAAA;AAAA,cACT,sBAAWC,CAAS,sBAAA,EAAA,IAAA,CAAA,gBAAA,CAAA,CAAA;AAAA,cAAA,WAAA,EAAA,oBAAA;cAEV,SAAO,EAAA,IAAA,CAAA,SAAA;AAAA,aAAA,EAAA;uBAQdC,OAwBe,CAAA,CAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AAAA,gBAAAC,UAAA,CAvBZ,KAAY,MAAU,EAAA,YAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;AAAA,kBAAAJ,WAAA,CACd,uBAAqB,EAAA;AAAA,oBAC9B,UAAA;AAAA,oBAAA,WAAA,EAAA,oBAAA;oBAEW,KAAO,EAAA,sCAAA;AAAA,mBAAA,EAAA;AA/BhC,oBAAA,OAAA,EAAAE,OAAA,CAAA,MAAA;AAAA,sBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AA0CyB,uBAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;AA1CzB,sBAAAD,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;;;AAAA,iBAAA,EAAA,IAAA,CAAA;AAAA,eAAA,CAAA;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(queries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"queries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryType } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/index'\nimport { groupItemsBy, isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\nexport default defineComponent({\n  name: 'MyHistory',\n  xModule: historyQueriesXModule.name,\n  components: {\n    HistoryQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    locale: {\n      type: String,\n      default: 'en',\n    },\n    /** Class inherited by content element. */\n    queriesListClass: String,\n  },\n  setup(props) {\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries', ['historyQueries'])\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig')\n\n    /**\n     * The locale that it is going to be used. It can be the one send it by the snippet config or\n     * the one pass it using the prop.\n     *\n     * @returns The locale to be used.\n     * @internal\n     */\n    const usedLocale = computed(() => snippetConfig?.lang ?? props.locale)\n\n    /**\n     * Returns a record of history queries grouped by date.\n     *\n     * @example\n     * ```typescript\n     *  const historyQueriesGrouped = {\n     *    'Monday, January 10th, 2022' : [{\n     *      query: 'lego',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 121312312\n     *    }],\n     *    'Tuesday, January 11th, 2022' : [{\n     *      query: 'barbie',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 15221212\n     *    }]\n     *  }\n     * ```\n     * @returns The history queries grouped by date.\n     * @internal\n     */\n    const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n      return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n        return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n          day: 'numeric',\n          weekday: 'long',\n          month: 'long',\n          year: 'numeric',\n        })\n      })\n    })\n\n    /**\n     * Formats a timestamp into `hh:mm [PM/AM]` format.\n     *\n     * @example\n     * ```typescript\n     * // locale 'es'\n     * console.log(formatTime(Date.now()) // '16:54'.\n     *\n     * // locale 'en'\n     * console.log(formatTime(Date.now()) // '16:54 PM'.\n     * ```\n     * @param timestamp - The timestamp to format.\n     * @returns The formatted time.\n     * @internal\n     */\n    const formatTime = (timestamp: number) =>\n      new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n        hour: '2-digit',\n        minute: '2-digit',\n      })\n\n    /**\n     * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n     * stored.\n     *\n     * @returns True if there are history queries; false otherwise.\n     * @internal\n     */\n    const hasHistoryQueries = computed(\n      () => !isArrayEmpty(historyQueries.value as HistoryQueryType[]),\n    )\n\n    return {\n      hasHistoryQueries,\n      groupByDate,\n      historyQueries,\n      formatTime,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-my-history {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n  data() {\n    return {\n      fadeAndSlide: FadeAndSlide,\n    }\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    CrossIcon,\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_createVNode","animation","_withCtx","_renderSlot","_mergeProps","_createCommentVNode"],"mappings":";;;;;MAS8C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,yBAAA;;;;;AARJ,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AADpD,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAC,SAAA,EAC0E,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAI,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AAD/E,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;iBAIY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,OAAA,EAAA,IAAA,KAAA;AACL,UAAA,OAAAL,SAAA,EAAoB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACzB,GAAA,EAAA,IAAA;AAAA,YAAA,KAAA,EAAA,mBAAA;YAEA,WAEO,EAAA,iBAAA;AAAA,WAAA,EAAA;;AACP,cAAAG,kBAAA;AAAA,gBA0CkB,MAAA;AAAA,gBAAA,UAAA;AAAA,gBAAAC,eAAA,CAAA,IAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAzCf,EAAA,IAAA,CAAA;AAAA,YAAAC,WAAA,CAZT,0BAac,EAAA;AAAA,cAEN,WAAU,EAAA,OAAA;AAAA,cACT,sBAAWC,CAAS,sBAAA,EAAA,IAAA,CAAA,gBAAA,CAAA,CAAA;AAAA,cAAA,WAAA,EAAA,oBAAA;cAEV,SAAO,EAAA,IAAA,CAAA,SAAA;AAAA,aAAA,EAAA;uBAQdC,OAwBe,CAAA,CAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AAAA,gBAAAC,UAAA,CAvBZ,KAAY,MAAU,EAAA,YAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;AAAA,kBAAAJ,WAAA,CACd,uBAAqB,EAAA;AAAA,oBAC9B,UAAA;AAAA,oBAAA,WAAA,EAAA,oBAAA;oBAEW,KAAO,EAAA,sCAAA;AAAA,mBAAA,EAAA;AA/BhC,oBAAA,OAAA,EAAAE,OAAA,CAAA,MAAA;AAAA,sBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AA0CyB,uBAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;AA1CzB,sBAAAD,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;;;AAAA,iBAAA,EAAA,IAAA,CAAA;AAAA,eAAA,CAAA;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}