@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1 +1 @@
-{"version":3,"file":"my-history.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { HistoryQuery } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Inject, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { State } from '../../../components/decorators/store.decorators';\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 { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n  import HistoryQueryComponent 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  @Component({\n    components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n    mixins: [xComponentMixin(historyQueriesXModule), dynamicPropsMixin(['queriesListClass'])]\n  })\n  export default class MyHistory extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    @Prop({ default: 'en' })\n    protected locale!: string;\n\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    @Inject('snippetConfig')\n    public snippetConfig?: SnippetConfig;\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    protected get groupByDate(): Dictionary<HistoryQuery[]> {\n      return groupItemsBy(this.historyQueries, current => {\n        return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {\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    protected formatTime(timestamp: number): string {\n      return new Date(timestamp).toLocaleTimeString(this.usedLocale, {\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    protected get hasHistoryQueries(): boolean {\n      return !isArrayEmpty(this.historyQueries);\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    protected get usedLocale(): string {\n      return this.snippetConfig?.lang ?? this.locale;\n    }\n  }\n"],"names":["HistoryQueryComponent","BaseSuggestions"],"mappings":";;;;;;;;;;;AAwEE;;;;;;;;;;AAUG;AAKY,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,GAAG,CAAA;AAiCxC;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,IAAA,IAAc,WAAW,GAAA;QACvB,OAAO,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,IAAG;AACjD,YAAA,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,EAAE;AACrE,gBAAA,GAAG,EAAE,SAAS;AACd,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,IAAI,EAAE,SAAS;AAChB,aAAA,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;KACJ;AAED;;;;;;;;;;;;;;AAcG;AACO,IAAA,UAAU,CAAC,SAAiB,EAAA;QACpC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,EAAE;AAC7D,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,CAAC,CAAC;KACJ;AACD;;;;;;AAMG;AACH,IAAA,IAAc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3C;AACD;;;;;;AAMG;AACH,IAAA,IAAc,UAAU,GAAA;QACtB,OAAO,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC;KAChD;CACF,CAAA;AAnGC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACW,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQnC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACE,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ1B,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;AACH,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQvC,UAAA,CAAA;IADC,MAAM,CAAC,eAAe,CAAC;AACa,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA/BlB,SAAS,GAAA,UAAA,CAAA;AAJ7B,IAAA,SAAS,CAAC;AACT,QAAA,UAAU,EAAE,EAAE,YAAY,EAAEA,iBAAqB,mBAAEC,mBAAe,EAAE;AACpE,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,EAAE,iBAAiB,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC1F,CAAC;AACmB,CAAA,EAAA,SAAS,CA0G7B,CAAA;aA1GoB,SAAS;;;;"}
+{"version":3,"file":"my-history.vue2.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":[],"mappings":";;;;;;;;AAsEE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,YAAY;QACZ,eAAc;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAK;AACxB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,EAAE,cAAa,EAAI,GAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;AAEzE;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAC,CAAA;AAExE;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAM,aAAa,EAAE,IAAK,IAAG,KAAK,CAAC,MAAM,CAAC,CAAA;AAEtE;;;;;;;;;;;;;;;;;;;;AAoBE;AACF,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,MAAsC;YACjE,OAAO,YAAY,CAAC,cAAc,CAAC,KAA2B,EAAE,OAAM,IAAK;AACzE,gBAAA,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACtE,oBAAA,GAAG,EAAE,SAAS;AACd,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,IAAI,EAAE,SAAQ;AACf,iBAAA,CAAC,CAAA;AACJ,aAAC,CAAC,CAAA;AACJ,SAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;AAcE;AACF,QAAA,MAAM,aAAa,CAAC,SAAiB,KACnC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACvD,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,MAAM,EAAE,SAAQ;AACjB,SAAA,CAAC,CAAA;AAEJ;;;;;;AAME;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAChC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAA2B,CAAA,CAC/D,CAAA;QAED,OAAO;YACL,iBAAiB;YACjB,WAAW;YACX,cAAc;YACd,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-my-history[data-v-45f3c3fe] {\n  display: flex;\n  flex-flow: column nowrap;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/x-modules/history-queries/components/my-history.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-my-history[data-v-3525044a]{display:flex;flex-flow:column nowrap}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=my-history.vue3.js.map

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

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

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

@@ -1,55 +1,23 @@
-import script from './remove-history-query.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './remove-history-query.vue2.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseEventButton = resolveComponent("BaseEventButton");
+  return openBlock(), createBlock(_component_BaseEventButton, {
+    class: "x-remove-history-query",
+    events: _ctx.removeHistoryQueryEvent,
+    "aria-label": "remove"
+  }, {
+    default: withCtx(() => [
+      createCommentVNode("  @slot (Required) Button content with a text, an icon or both "),
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["events"]);
+}
+var RemoveHistoryQuery = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "BaseEventButton",
-    {
-      staticClass: "x-remove-history-query",
-      attrs: { events: _vm.removeHistoryQueryEvent, "aria-label": "remove" },
-    },
-    [_vm._t("default")],
-    2
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { RemoveHistoryQuery as default };
 //# sourceMappingURL=remove-history-query.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"remove-history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-remove-history-query\"\n    :events=\"removeHistoryQueryEvent\"\n    aria-label=\"remove\"\n  >\n    <!--  @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * Button that when it is pressed emits the\n   * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n   * intention to remove a query in the history.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class RemoveHistoryQuery extends Vue {\n    /**\n     * The historyQuery that will be removed when clicking the clear button.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected historyQuery!: HistoryQuery;\n\n    /**\n     * The event handler that will be triggered when clicking on the clear history query button.\n     *\n     * @remarks\n     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {\n      return { UserPressedRemoveHistoryQuery: this.historyQuery };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedRemoveHistoryQuery`](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 Example\n\nYou can customize the content that this component renders. To do so, simply use the default slot.\n\n```vue\n<RemoveHistoryQuery :historyQuery=\"historyQuery\">\n  <img class=\"x-history-query__icon\" src=\"./my-awesome-clear-icon.svg\"/>\n</RemoveHistoryQuery>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"remove-history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-remove-history-query\"\n    :events=\"removeHistoryQueryEvent\"\n    aria-label=\"remove\"\n  >\n    <!--  @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * Button that when it is pressed emits the\n   * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n   * intention to remove a query in the history.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RemoveHistoryQuery',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseEventButton\n    },\n    props: {\n      /**\n       * The historyQuery that will be removed when clicking the clear button.\n       *\n       * @public\n       */\n      historyQuery: {\n        type: Object as PropType<HistoryQuery>,\n        required: true\n      }\n    },\n    setup(props) {\n      /**\n       * The event handler that will be triggered when clicking on the clear history query button.\n       *\n       * @remarks\n       * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n       *\n       * @returns The {@link XEvent} to emit.\n       * @public\n       */\n      const removeHistoryQueryEvent = computed(\n        (): Partial<XEventsTypes> => ({ UserPressedRemoveHistoryQuery: props.historyQuery })\n      );\n\n      return {\n        removeHistoryQueryEvent\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedRemoveHistoryQuery`](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 Example\n\nYou can customize the content that this component renders. To do so, simply use the default slot.\n\n```vue\n<RemoveHistoryQuery :historyQuery=\"historyQuery\">\n  <img class=\"x-history-query__icon\" src=\"./my-awesome-clear-icon.svg\"/>\n</RemoveHistoryQuery>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AAQoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AALT,EAAA,OAAAC,SAAA,EAAyB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAChC,KAAA,EAAA,wBAAA;AAAA,IAAA,MAAA,EAAA,IAAA,CAAA,uBAAA;AAJJ,IAAA,YAAA,EAAA,QAAA;AAAA,GAAA,EAAA;aAOIC,OAAQ,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,iEAAA,CAAA;AAPZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1,8 +1,5 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import __vue_component__ from '../../../components/base-event-button.vue.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, computed } from 'vue';
+import BaseEventButton from '../../../components/base-event-button.vue.js';
 import { historyQueriesXModule } from '../x-module.js';
 
 /**
@@ -12,30 +9,39 @@ import { historyQueriesXModule } from '../x-module.js';
  *
  * @public
  */
-let RemoveHistoryQuery = class RemoveHistoryQuery extends Vue {
-    /**
-     * The event handler that will be triggered when clicking on the clear history query button.
-     *
-     * @remarks
-     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
-     *
-     * @returns The {@link XEvent} to emit.
-     * @public
-     */
-    get removeHistoryQueryEvent() {
-        return { UserPressedRemoveHistoryQuery: this.historyQuery };
+var _sfc_main = defineComponent({
+    name: 'RemoveHistoryQuery',
+    xModule: historyQueriesXModule.name,
+    components: {
+        BaseEventButton
+    },
+    props: {
+        /**
+         * The historyQuery that will be removed when clicking the clear button.
+         *
+         * @public
+         */
+        historyQuery: {
+            type: Object,
+            required: true
+        }
+    },
+    setup(props) {
+        /**
+         * The event handler that will be triggered when clicking on the clear history query button.
+         *
+         * @remarks
+         * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
+         *
+         * @returns The {@link XEvent} to emit.
+         * @public
+         */
+        const removeHistoryQueryEvent = computed(() => ({ UserPressedRemoveHistoryQuery: props.historyQuery }));
+        return {
+            removeHistoryQueryEvent
+        };
     }
-};
-__decorate([
-    Prop({ required: true })
-], RemoveHistoryQuery.prototype, "historyQuery", void 0);
-RemoveHistoryQuery = __decorate([
-    Component({
-        components: { BaseEventButton: __vue_component__ },
-        mixins: [xComponentMixin(historyQueriesXModule)]
-    })
-], RemoveHistoryQuery);
-var script = RemoveHistoryQuery;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=remove-history-query.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"remove-history-query.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * Button that when it is pressed emits the\n   * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n   * intention to remove a query in the history.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class RemoveHistoryQuery extends Vue {\n    /**\n     * The historyQuery that will be removed when clicking the clear button.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected historyQuery!: HistoryQuery;\n\n    /**\n     * The event handler that will be triggered when clicking on the clear history query button.\n     *\n     * @remarks\n     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {\n      return { UserPressedRemoveHistoryQuery: this.historyQuery };\n    }\n  }\n"],"names":["BaseEventButton"],"mappings":";;;;;;;AAoBE;;;;;;AAMG;AAKY,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,GAAG,CAAA;AASjD;;;;;;;;AAQG;AACH,IAAA,IAAc,uBAAuB,GAAA;AACnC,QAAA,OAAO,EAAE,6BAA6B,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;KAC7D;CACF,CAAA;AAdC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPnB,kBAAkB,GAAA,UAAA,CAAA;AAJtC,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;AAC/B,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;AACmB,CAAA,EAAA,kBAAkB,CAqBtC,CAAA;aArBoB,kBAAkB;;;;"}
+{"version":3,"file":"remove-history-query.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-remove-history-query\"\n    :events=\"removeHistoryQueryEvent\"\n    aria-label=\"remove\"\n  >\n    <!--  @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * Button that when it is pressed emits the\n   * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n   * intention to remove a query in the history.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RemoveHistoryQuery',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseEventButton\n    },\n    props: {\n      /**\n       * The historyQuery that will be removed when clicking the clear button.\n       *\n       * @public\n       */\n      historyQuery: {\n        type: Object as PropType<HistoryQuery>,\n        required: true\n      }\n    },\n    setup(props) {\n      /**\n       * The event handler that will be triggered when clicking on the clear history query button.\n       *\n       * @remarks\n       * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n       *\n       * @returns The {@link XEvent} to emit.\n       * @public\n       */\n      const removeHistoryQueryEvent = computed(\n        (): Partial<XEventsTypes> => ({ UserPressedRemoveHistoryQuery: props.historyQuery })\n      );\n\n      return {\n        removeHistoryQueryEvent\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedRemoveHistoryQuery`](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 Example\n\nYou can customize the content that this component renders. To do so, simply use the default slot.\n\n```vue\n<RemoveHistoryQuery :historyQuery=\"historyQuery\">\n  <img class=\"x-history-query__icon\" src=\"./my-awesome-clear-icon.svg\"/>\n</RemoveHistoryQuery>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAkBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAc;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAgC;AACtC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;;;AAQE;AACF,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CACtC,OAA8B,EAAE,6BAA6B,EAAE,KAAK,CAAC,cAAc,CAAA,CACpF,CAAA;QAED,OAAO;YACL,uBAAsB;SACvB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/history-queries/store/getters/history-queries.getter.js

@@ -39,9 +39,8 @@ class HistoryQueriesGetter {
     }
 }
 const historyQueriesGetter = new HistoryQueriesGetter();
-// eslint-disable-next-line jsdoc/require-description-complete-sentence
 /**
- * {@inheritDoc HistoryQueriesGetter.historyQueries}
+ * History Queries getter.
  *
  * @public
  */

package/js/x-modules/history-queries/store/getters/history-queries.getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries.getter.js","sources":["../../../../../../src/x-modules/history-queries/store/getters/history-queries.getter.ts"],"sourcesContent":["import { HistoryQuery } from '@empathyco/x-types';\nimport { GettersClass } from '../../../../store/getters.types';\nimport { normalizeString } from '../../../../utils/normalize';\nimport { HistoryQueriesState, HistoryQueriesXStoreModule } from '../types';\n\n/**\n * Class implementation for the {@link HistoryQueriesGetters.historyQueries} getter.\n *\n * @public\n */\nexport class HistoryQueriesGetter implements GettersClass<HistoryQueriesXStoreModule> {\n  /**\n   * Default implementation for the {@link HistoryQueriesGetters.historyQueries} getter.\n   *\n   * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the history\n   * queries module.\n   * @returns The filtered subset of queries, matching with the current query.\n   */\n  historyQueries({ query, historyQueries, config }: HistoryQueriesState): HistoryQuery[] {\n    return query\n      ? historyQueries.filter(\n          this.searchInHistoryQueries(normalizeString(query), config.hideIfEqualsQuery)\n        )\n      : historyQueries;\n  }\n\n  /**\n   * Creates a function for searching in the history queries array the items that match the current\n   * query.\n   *\n   * @param normalizedQuery - The normalized query for search into the array.\n   * @param hideIfEqualsQuery - If `true`, removes items that are exactly like the current query.\n   * @returns A filter function for searching into the array of history queries with the provided\n   * params.\n   * @internal\n   */\n  protected searchInHistoryQueries(\n    normalizedQuery: string,\n    hideIfEqualsQuery: boolean\n  ): (historyQuery: HistoryQuery) => boolean {\n    return (historyQuery: HistoryQuery) => {\n      const normalizedHistoryQuery = normalizeString(historyQuery.query);\n      const matchesQuery = normalizedHistoryQuery.includes(normalizedQuery);\n      return hideIfEqualsQuery\n        ? matchesQuery && normalizedHistoryQuery !== normalizedQuery\n        : matchesQuery;\n    };\n  }\n}\n\nconst historyQueriesGetter = new HistoryQueriesGetter();\n\n// eslint-disable-next-line jsdoc/require-description-complete-sentence\n/**\n * {@inheritDoc HistoryQueriesGetter.historyQueries}\n *\n * @public\n */\nexport const historyQueries = historyQueriesGetter.historyQueries.bind(historyQueriesGetter);\n"],"names":[],"mappings":";;AAKA;;;;AAIG;MACU,oBAAoB,CAAA;AAC/B;;;;;;AAMG;AACH,IAAA,cAAc,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAuB,EAAA;AACnE,QAAA,OAAO,KAAK;AACV,cAAE,cAAc,CAAC,MAAM,CACnB,IAAI,CAAC,sBAAsB,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAC9E;cACD,cAAc,CAAC;KACpB;AAED;;;;;;;;;AASG;IACO,sBAAsB,CAC9B,eAAuB,EACvB,iBAA0B,EAAA;QAE1B,OAAO,CAAC,YAA0B,KAAI;YACpC,MAAM,sBAAsB,GAAG,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACnE,MAAM,YAAY,GAAG,sBAAsB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;AACtE,YAAA,OAAO,iBAAiB;AACtB,kBAAE,YAAY,IAAI,sBAAsB,KAAK,eAAe;kBAC1D,YAAY,CAAC;AACnB,SAAC,CAAC;KACH;AACF,CAAA;AAED,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,EAAE,CAAC;AAExD;AACA;;;;AAIG;AACI,MAAM,cAAc,GAAG,oBAAoB,CAAC,cAAc,CAAC,IAAI,CAAC,oBAAoB;;;;"}
+{"version":3,"file":"history-queries.getter.js","sources":["../../../../../../src/x-modules/history-queries/store/getters/history-queries.getter.ts"],"sourcesContent":["import { HistoryQuery } from '@empathyco/x-types';\nimport { GettersClass } from '../../../../store/getters.types';\nimport { normalizeString } from '../../../../utils/normalize';\nimport { HistoryQueriesState, HistoryQueriesXStoreModule } from '../types';\n\n/**\n * Class implementation for the {@link HistoryQueriesGetters.historyQueries} getter.\n *\n * @public\n */\nexport class HistoryQueriesGetter implements GettersClass<HistoryQueriesXStoreModule> {\n  /**\n   * Default implementation for the {@link HistoryQueriesGetters.historyQueries} getter.\n   *\n   * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the history\n   * queries module.\n   * @returns The filtered subset of queries, matching with the current query.\n   */\n  historyQueries({ query, historyQueries, config }: HistoryQueriesState): HistoryQuery[] {\n    return query\n      ? historyQueries.filter(\n          this.searchInHistoryQueries(normalizeString(query), config.hideIfEqualsQuery)\n        )\n      : historyQueries;\n  }\n\n  /**\n   * Creates a function for searching in the history queries array the items that match the current\n   * query.\n   *\n   * @param normalizedQuery - The normalized query for search into the array.\n   * @param hideIfEqualsQuery - If `true`, removes items that are exactly like the current query.\n   * @returns A filter function for searching into the array of history queries with the provided\n   * params.\n   * @internal\n   */\n  protected searchInHistoryQueries(\n    normalizedQuery: string,\n    hideIfEqualsQuery: boolean\n  ): (historyQuery: HistoryQuery) => boolean {\n    return (historyQuery: HistoryQuery) => {\n      const normalizedHistoryQuery = normalizeString(historyQuery.query);\n      const matchesQuery = normalizedHistoryQuery.includes(normalizedQuery);\n      return hideIfEqualsQuery\n        ? matchesQuery && normalizedHistoryQuery !== normalizedQuery\n        : matchesQuery;\n    };\n  }\n}\n\nconst historyQueriesGetter = new HistoryQueriesGetter();\n\n/**\n * History Queries getter.\n *\n * @public\n */\nexport const historyQueries = historyQueriesGetter.historyQueries.bind(historyQueriesGetter);\n"],"names":[],"mappings":";;AAKA;;;;AAIG;MACU,oBAAoB,CAAA;AAC/B;;;;;;AAMG;AACH,IAAA,cAAc,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAuB,EAAA;AACnE,QAAA,OAAO,KAAK;AACV,cAAE,cAAc,CAAC,MAAM,CACnB,IAAI,CAAC,sBAAsB,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAC9E;cACD,cAAc,CAAC;KACpB;AAED;;;;;;;;;AASG;IACO,sBAAsB,CAC9B,eAAuB,EACvB,iBAA0B,EAAA;QAE1B,OAAO,CAAC,YAA0B,KAAI;YACpC,MAAM,sBAAsB,GAAG,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACnE,MAAM,YAAY,GAAG,sBAAsB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;AACtE,YAAA,OAAO,iBAAiB;AACtB,kBAAE,YAAY,IAAI,sBAAsB,KAAK,eAAe;kBAC1D,YAAY,CAAC;AACnB,SAAC,CAAC;KACH;AACF,CAAA;AAED,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,EAAE,CAAC;AAExD;;;;AAIG;AACI,MAAM,cAAc,GAAG,oBAAoB,CAAC,cAAc,CAAC,IAAI,CAAC,oBAAoB;;;;"}

package/js/x-modules/history-queries/x-module.js

@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin.js';
 import { historyQueriesEmitters } from './store/emitters.js';
 import { historyQueriesXStoreModule } from './store/module.js';
 import { historyQueriesWiring } from './wiring.js';
@@ -13,7 +14,8 @@ const historyQueriesXModule = {
     storeModule: historyQueriesXStoreModule,
     storeEmitters: historyQueriesEmitters,
     wiring: historyQueriesWiring
-};
+};
+XPlugin.registerXModule(historyQueriesXModule);
 
 export { historyQueriesXModule };
 //# sourceMappingURL=x-module.js.map

package/js/x-modules/history-queries/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/history-queries/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { historyQueriesEmitters } from './store/emitters';\nimport { historyQueriesXStoreModule } from './store/module';\nimport { HistoryQueriesXStoreModule } from './store/types';\nimport { historyQueriesWiring } from './wiring';\n\n/**\n * HistoryQueries {@link XModule} alias.\n *\n * @public\n */\nexport type HistoryQueriesXModule = XModule<HistoryQueriesXStoreModule>;\n\n/**\n * HistoryQueries {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `history-queries` entry point.\n *\n * @public\n */\nexport const historyQueriesXModule: HistoryQueriesXModule = {\n  name: 'historyQueries',\n  storeModule: historyQueriesXStoreModule,\n  storeEmitters: historyQueriesEmitters,\n  wiring: historyQueriesWiring\n};\n"],"names":[],"mappings":";;;;AAaA;;;;;AAKG;AACU,MAAA,qBAAqB,GAA0B;AAC1D,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,aAAa,EAAE,sBAAsB;AACrC,IAAA,MAAM,EAAE,oBAAoB;;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/history-queries/x-module.ts"],"sourcesContent":["import { XPlugin } from '../../plugins/x-plugin';\nimport { XModule } from '../x-modules.types';\nimport { historyQueriesEmitters } from './store/emitters';\nimport { historyQueriesXStoreModule } from './store/module';\nimport { HistoryQueriesXStoreModule } from './store/types';\nimport { historyQueriesWiring } from './wiring';\n\n/**\n * HistoryQueries {@link XModule} alias.\n *\n * @public\n */\nexport type HistoryQueriesXModule = XModule<HistoryQueriesXStoreModule>;\n\n/**\n * HistoryQueries {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `history-queries` entry point.\n *\n * @public\n */\nexport const historyQueriesXModule: HistoryQueriesXModule = {\n  name: 'historyQueries',\n  storeModule: historyQueriesXStoreModule,\n  storeEmitters: historyQueriesEmitters,\n  wiring: historyQueriesWiring\n};\n\nXPlugin.registerXModule(historyQueriesXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,qBAAqB,GAA0B;AAC1D,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,aAAa,EAAE,sBAAsB;AACrC,IAAA,MAAM,EAAE,oBAAoB;EAC5B;AAEF,OAAO,CAAC,eAAe,CAAC,qBAAqB,CAAC;;;;"}

package/js/x-modules/identifier-results/components/identifier-result.vue.js

@@ -1,53 +1,17 @@
-import script from './identifier-result.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './identifier-result.vue2.js';
+import { openBlock, createElementBlock, createCommentVNode } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+const _hoisted_1 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.query ? (openBlock(), createElementBlock("span", {
+    key: 0,
+    innerHTML: _ctx.highlightedQueryHTML,
+    class: "x-identifier-result",
+    "data-test": "identifier-result"
+  }, null, 8, _hoisted_1)) : createCommentVNode("v-if", true);
+}
+var identifierResult = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.query
-    ? _c("span", {
-        staticClass: "x-identifier-result",
-        attrs: { "data-test": "identifier-result" },
-        domProps: { innerHTML: _vm._s(_vm.highlightedQueryHTML) },
-      })
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { identifierResult as default };
 //# sourceMappingURL=identifier-result.vue.js.map

package/js/x-modules/identifier-results/components/identifier-result.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    v-html=\"highlightedQueryHTML\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter, State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { identifierResultsXModule } from '../x-module';\n\n  /**\n   * This component renders an identifier result value and highlights its matching part with the\n   * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResult extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    @State('identifierResults', 'query')\n    public query!: string;\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    @Getter('identifierResults', 'identifierHighlightRegexp')\n    public identifierHighlightRegexp!: RegExp;\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get highlightedQueryHTML(): string {\n      const identifierValue = this.result.identifier?.value ?? '';\n      if (identifierValue && this.identifierHighlightRegexp) {\n        return identifierValue.replace(\n          this.identifierHighlightRegexp,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>'\n        );\n      }\n      return identifierValue;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    v-html=\"highlightedQueryHTML\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, PropType } from 'vue';\n  import { identifierResultsXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * This component renders an identifier result value and highlights its matching part with the\n   * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'IdentifierResult',\n    xModule: identifierResultsXModule.name,\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      }\n    },\n    setup: function (props) {\n      /**\n       * Query from the module state.\n       *\n       * @public\n       */\n      const { query } = useState('identifierResults', ['query']);\n\n      /**\n       * The RegExp with the current query from the state adding the separatorChars after each\n       * matching character.\n       *\n       * @public\n       */\n      const identifierHighlightRegexp: ComputedRef<RegExp> = useGetter('identifierResults', [\n        'identifierHighlightRegexp'\n      ]).identifierHighlightRegexp;\n\n      /**\n       * Highlights the matching part of the identifier result with the query from the state.\n       *\n       * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n       * @public\n       */\n      const highlightedQueryHTML = computed(() => {\n        const identifierValue = props.result.identifier?.value ?? '';\n        if (identifierValue && identifierHighlightRegexp.value) {\n          return identifierValue.replace(\n            identifierHighlightRegexp.value,\n            '<span class=\"x-identifier-result__matching-part\">$1</span>'\n          );\n        }\n        return identifierValue;\n      });\n\n      return {\n        query,\n        highlightedQueryHTML\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":["_openBlock","highlightedQueryHTML","_createCommentVNode"],"mappings":";;;;;qBACE,IAKQ,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AANV,EAAA,OAAA,IAAA,CAAA,KAAA,IAAAA,SAAA,IAGYC,kBAAoB,CAAA,MAAA,EAAA;AAAA,IAC5B,GAAK,EAAA,CAAA;AAAA,IACL,WAAS,IAAC,CAAA,oBAAA;AAAA,IAAA,KAAA,EAAA,qBAAA;AALd,IAAA,WAAA,EAAA,mBAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/identifier-results/components/identifier-result.vue2.js

@@ -1,9 +1,7 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import { State, Getter } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, computed } from 'vue';
 import { identifierResultsXModule } from '../x-module.js';
+import { useGetter } from '../../../composables/use-getter.js';
+import { useState } from '../../../composables/use-state.js';
 
 /**
  * This component renders an identifier result value and highlights its matching part with the
@@ -11,36 +9,55 @@ import { identifierResultsXModule } from '../x-module.js';
  *
  * @public
  */
-let IdentifierResult = class IdentifierResult extends Vue {
-    /**
-     * Highlights the matching part of the identifier result with the query from the state.
-     *
-     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.
-     * @public
-     */
-    get highlightedQueryHTML() {
-        const identifierValue = this.result.identifier?.value ?? '';
-        if (identifierValue && this.identifierHighlightRegexp) {
-            return identifierValue.replace(this.identifierHighlightRegexp, '<span class="x-identifier-result__matching-part">$1</span>');
+var _sfc_main = defineComponent({
+    name: 'IdentifierResult',
+    xModule: identifierResultsXModule.name,
+    props: {
+        /**
+         * (Required) The {@link @empathyco/x-types#Result} information.
+         *
+         * @public
+         */
+        result: {
+            type: Object,
+            required: true
         }
-        return identifierValue;
+    },
+    setup: function (props) {
+        /**
+         * Query from the module state.
+         *
+         * @public
+         */
+        const { query } = useState('identifierResults', ['query']);
+        /**
+         * The RegExp with the current query from the state adding the separatorChars after each
+         * matching character.
+         *
+         * @public
+         */
+        const identifierHighlightRegexp = useGetter('identifierResults', [
+            'identifierHighlightRegexp'
+        ]).identifierHighlightRegexp;
+        /**
+         * Highlights the matching part of the identifier result with the query from the state.
+         *
+         * @returns String - The identifier result s query with the matching part inside a `<span>` tag.
+         * @public
+         */
+        const highlightedQueryHTML = computed(() => {
+            const identifierValue = props.result.identifier?.value ?? '';
+            if (identifierValue && identifierHighlightRegexp.value) {
+                return identifierValue.replace(identifierHighlightRegexp.value, '<span class="x-identifier-result__matching-part">$1</span>');
+            }
+            return identifierValue;
+        });
+        return {
+            query,
+            highlightedQueryHTML
+        };
     }
-};
-__decorate([
-    Prop({ required: true })
-], IdentifierResult.prototype, "result", void 0);
-__decorate([
-    State('identifierResults', 'query')
-], IdentifierResult.prototype, "query", void 0);
-__decorate([
-    Getter('identifierResults', 'identifierHighlightRegexp')
-], IdentifierResult.prototype, "identifierHighlightRegexp", void 0);
-IdentifierResult = __decorate([
-    Component({
-        mixins: [xComponentMixin(identifierResultsXModule)]
-    })
-], IdentifierResult);
-var script = IdentifierResult;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=identifier-result.vue2.js.map

package/js/x-modules/identifier-results/components/identifier-result.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue2.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter, State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { identifierResultsXModule } from '../x-module';\n\n  /**\n   * This component renders an identifier result value and highlights its matching part with the\n   * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResult extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    @State('identifierResults', 'query')\n    public query!: string;\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    @Getter('identifierResults', 'identifierHighlightRegexp')\n    public identifierHighlightRegexp!: RegExp;\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get highlightedQueryHTML(): string {\n      const identifierValue = this.result.identifier?.value ?? '';\n      if (identifierValue && this.identifierHighlightRegexp) {\n        return identifierValue.replace(\n          this.identifierHighlightRegexp,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>'\n        );\n      }\n      return identifierValue;\n    }\n  }\n"],"names":[],"mappings":";;;;;;;AAiBE;;;;;AAKG;AAIY,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,GAAG,CAAA;AA0B/C;;;;;AAKG;AACH,IAAA,IAAc,oBAAoB,GAAA;QAChC,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,IAAI,EAAE,CAAC;AAC5D,QAAA,IAAI,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE;YACrD,OAAO,eAAe,CAAC,OAAO,CAC5B,IAAI,CAAC,yBAAyB,EAC9B,4DAA4D,CAC7D,CAAC;AACH,SAAA;AACD,QAAA,OAAO,eAAe,CAAC;KACxB;CACF,CAAA;AAnCC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ1B,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,mBAAmB,EAAE,OAAO,CAAC;AACd,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAStB,UAAA,CAAA;AADC,IAAA,MAAM,CAAC,mBAAmB,EAAE,2BAA2B,CAAC;AACf,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,2BAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAxBvB,gBAAgB,GAAA,UAAA,CAAA;AAHpC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;KACpD,CAAC;AACmB,CAAA,EAAA,gBAAgB,CA0CpC,CAAA;aA1CoB,gBAAgB;;;;"}
+{"version":3,"file":"identifier-result.vue2.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    v-html=\"highlightedQueryHTML\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, PropType } from 'vue';\n  import { identifierResultsXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * This component renders an identifier result value and highlights its matching part with the\n   * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'IdentifierResult',\n    xModule: identifierResultsXModule.name,\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      }\n    },\n    setup: function (props) {\n      /**\n       * Query from the module state.\n       *\n       * @public\n       */\n      const { query } = useState('identifierResults', ['query']);\n\n      /**\n       * The RegExp with the current query from the state adding the separatorChars after each\n       * matching character.\n       *\n       * @public\n       */\n      const identifierHighlightRegexp: ComputedRef<RegExp> = useGetter('identifierResults', [\n        'identifierHighlightRegexp'\n      ]).identifierHighlightRegexp;\n\n      /**\n       * Highlights the matching part of the identifier result with the query from the state.\n       *\n       * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n       * @public\n       */\n      const highlightedQueryHTML = computed(() => {\n        const identifierValue = props.result.identifier?.value ?? '';\n        if (identifierValue && identifierHighlightRegexp.value) {\n          return identifierValue.replace(\n            identifierHighlightRegexp.value,\n            '<span class=\"x-identifier-result__matching-part\">$1</span>'\n          );\n        }\n        return identifierValue;\n      });\n\n      return {\n        query,\n        highlightedQueryHTML\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAgBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,wBAAwB,CAAC,IAAI;AACtC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB;;;;AAIE;AACF,QAAA,MAAM,EAAE,KAAM,EAAA,GAAI,QAAQ,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AAE1D;;;;;AAKE;AACF,QAAA,MAAM,yBAAyB,GAAwB,SAAS,CAAC,mBAAmB,EAAE;YACpF,2BAA0B;SAC3B,CAAC,CAAC,yBAAyB,CAAA;AAE5B;;;;;AAKE;AACF,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAAC,MAAM;YAC1C,MAAM,eAAc,GAAI,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,KAAM,IAAG,EAAE,CAAA;AAC5D,YAAA,IAAI,eAAgB,IAAG,yBAAyB,CAAC,KAAK,EAAE;gBACtD,OAAO,eAAe,CAAC,OAAO,CAC5B,yBAAyB,CAAC,KAAK,EAC/B,4DAA2D,CAC5D,CAAA;AACH,aAAA;AACA,YAAA,OAAO,eAAe,CAAA;AACxB,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,KAAK;YACL,oBAAmB;SACpB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}