@empathyco/x-components 3.0.0-alpha.52 → 3.0.0-alpha.53

package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,127 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import { forEach } from '../../utils/object.js';
+import { normalizeString } from '../../utils/normalize.js';
+import { sanitize } from '../../utils/sanitize.js';
+
+/**
+ * Renders a button with a default slot. It receives a query, which should be the query of the
+ * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted
+ * on click with a given feature.
+ *
+ * The default slot receives the suggestion and the matched query has props.
+ *
+ * @public
+ */
+let BaseSuggestion = class BaseSuggestion extends Vue {
+    /**
+     * The event handler that will be triggered when clicking on a suggestion.
+     *
+     * @remarks
+     * * UserAcceptedAQuery: suggestion.query
+     * * UserSelectedASuggestion: suggestion
+     * * Merges the events defined in the suggestionSelectedEvents prop and also emits them
+     *
+     * @returns The {@link XEvent | XEvents} to emit.
+     * @public
+     */
+    get events() {
+        return {
+            UserAcceptedAQuery: this.suggestion.query,
+            UserSelectedASuggestion: this.suggestion,
+            ...this.suggestionSelectedEvents
+        };
+    }
+    /**
+     * Emits the events when the button is clicked.
+     *
+     * @public
+     */
+    emitEvents() {
+        forEach(this.events, (event, payload) => {
+            this.$x.emit(event, payload, {
+                target: this.$el,
+                feature: this.feature
+            });
+        });
+    }
+    /**
+     * Checks if the normalized suggestion query matches with the module's query so it has a
+     * matching part.
+     *
+     * @returns If the query has a matching part or not.
+     * @internal
+     */
+    get hasMatchingQuery() {
+        return !!this.query && normalizeString(this.suggestion.query).includes(this.query);
+    }
+    /**
+     * Generates css classes dynamically.
+     *
+     * @remarks
+     * 'x-suggestion--matching added when the query should be matched.
+     *
+     * @returns The {@link VueCSSClasses} classes.
+     * @public
+     */
+    get dynamicCSSClasses() {
+        return {
+            'x-suggestion--matching': this.hasMatchingQuery
+        };
+    }
+    /**
+     * Highlights the matching part of the suggestion query with the query passed as prop of the
+     * component putting it inside a `<span>` tag.
+     *
+     * @remarks
+     * The query prop should be normalized.
+     *
+     * @returns The suggestion's query with the matching part inside a `<span>` tag.
+     * @public
+     */
+    get queryHTML() {
+        if (this.hasMatchingQuery) {
+            const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);
+            const [beginning, matching, end] = this.splitAt(this.suggestion.query, matcherIndex, this.query.length);
+            const attrsMatching = 'data-test="matching-part" class="x-suggestion__matching-part"';
+            return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;
+        }
+        return sanitize(this.suggestion.query);
+    }
+    /**
+     * Splits the label in three parts based on two indexes.
+     *
+     * @param label - The string that will be divided in three parts.
+     * @param start - The first index that the label will be divided by.
+     * @param skip - The second index that the label will be divided by.
+     *
+     * @returns The three parts of the divided label.
+     * @internal
+     */
+    splitAt(label, start, skip) {
+        const startPart = label.substr(0, start);
+        const matchingPart = label.substr(start, skip);
+        const endPart = label.substr(start + skip);
+        return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];
+    }
+};
+__decorate([
+    Prop({ default: '' })
+], BaseSuggestion.prototype, "query", void 0);
+__decorate([
+    Prop({ required: true })
+], BaseSuggestion.prototype, "suggestion", void 0);
+__decorate([
+    Prop() //TODO: set to true when the suggestions components pass it.
+], BaseSuggestion.prototype, "feature", void 0);
+__decorate([
+    Prop({ required: true })
+], BaseSuggestion.prototype, "suggestionSelectedEvents", void 0);
+BaseSuggestion = __decorate([
+    Component
+], BaseSuggestion);
+var script = BaseSuggestion;
+
+export { script as default };
+//# sourceMappingURL=base-suggestion.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-suggestion.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { QueryFeature } from '../../types/origin';\nimport { forEach } from '../../utils/object';\nimport { normalizeString } from '../../utils/normalize';\nimport { sanitize } from '../../utils/sanitize';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring/events.types';\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\n@Component\nexport default class BaseSuggestion extends Vue {\n  /**\n   * The normalized query of the module using this component.\n   *\n   * @public\n   */\n  @Prop({ default: '' })\n  protected query!: string;\n\n  /**\n   * The suggestion to render and use in the default slot.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestion!: Suggestion;\n\n  /**\n   * The feature from which the events will be emitted.\n   *\n   * @public\n   */\n  @Prop() //TODO: set to true when the suggestions components pass it.\n  protected feature?: QueryFeature;\n\n  /**\n   * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n  /**\n   * The event handler that will be triggered when clicking on a suggestion.\n   *\n   * @remarks\n   * * UserAcceptedAQuery: suggestion.query\n   * * UserSelectedASuggestion: suggestion\n   * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n   *\n   * @returns The {@link XEvent | XEvents} to emit.\n   * @public\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return {\n      UserAcceptedAQuery: this.suggestion.query,\n      UserSelectedASuggestion: this.suggestion,\n      ...this.suggestionSelectedEvents\n    };\n  }\n\n  /**\n   * Emits the events when the button is clicked.\n   *\n   * @public\n   */\n  protected emitEvents(): void {\n    forEach(this.events, (event, payload) => {\n      this.$x.emit(event, payload, {\n        target: this.$el as HTMLElement,\n        feature: this.feature\n      });\n    });\n  }\n\n  /**\n   * Checks if the normalized suggestion query matches with the module's query so it has a\n   * matching part.\n   *\n   * @returns If the query has a matching part or not.\n   * @internal\n   */\n  protected get hasMatchingQuery(): boolean {\n    return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n  }\n\n  /**\n   * Generates css classes dynamically.\n   *\n   * @remarks\n   * 'x-suggestion--matching added when the query should be matched.\n   *\n   * @returns The {@link VueCSSClasses} classes.\n   * @public\n   */\n  protected get dynamicCSSClasses(): VueCSSClasses {\n    return {\n      'x-suggestion--matching': this.hasMatchingQuery\n    };\n  }\n\n  /**\n   * Highlights the matching part of the suggestion query with the query passed as prop of the\n   * component putting it inside a `<span>` tag.\n   *\n   * @remarks\n   * The query prop should be normalized.\n   *\n   * @returns The suggestion's query with the matching part inside a `<span>` tag.\n   * @public\n   */\n  protected get queryHTML(): string {\n    if (this.hasMatchingQuery) {\n      const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n      const [beginning, matching, end] = this.splitAt(\n        this.suggestion.query,\n        matcherIndex,\n        this.query.length\n      );\n\n      const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n      return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n    }\n\n    return sanitize(this.suggestion.query);\n  }\n\n  /**\n   * Splits the label in three parts based on two indexes.\n   *\n   * @param label - The string that will be divided in three parts.\n   * @param start - The first index that the label will be divided by.\n   * @param skip - The second index that the label will be divided by.\n   *\n   * @returns The three parts of the divided label.\n   * @internal\n   */\n  protected splitAt(label: string, start: number, skip: number): [string, string, string] {\n    const startPart = label.substr(0, start);\n    const matchingPart = label.substr(start, skip);\n    const endPart = label.substr(start + skip);\n\n    return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n  }\n}\n"],"names":[],"mappings":";;;;;;;AA0BA;;;;;;;;;AAUA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;;;;;;;;;;;;IA4C7C,IAAc,MAAM;QAClB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;YACzC,uBAAuB,EAAE,IAAI,CAAC,UAAU;YACxC,GAAG,IAAI,CAAC,wBAAwB;SACjC,CAAC;KACH;;;;;;IAOS,UAAU;QAClB,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO;YAClC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;gBAC3B,MAAM,EAAE,IAAI,CAAC,GAAkB;gBAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;;;;IASD,IAAc,gBAAgB;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpF;;;;;;;;;;IAWD,IAAc,iBAAiB;QAC7B,OAAO;YACL,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;SAChD,CAAC;KACH;;;;;;;;;;;IAYD,IAAc,SAAS;QACrB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEhF,MAAM,CAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAC7C,IAAI,CAAC,UAAU,CAAC,KAAK,EACrB,YAAY,EACZ,IAAI,CAAC,KAAK,CAAC,MAAM,CAClB,CAAC;YAEF,MAAM,aAAa,GAAG,+DAA+D,CAAC;YACtF,OAAO,GAAG,SAAS,SAAS,aAAa,IAAI,QAAQ,UAAU,GAAG,EAAE,CAAC;SACtE;QAED,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACxC;;;;;;;;;;;IAYS,OAAO,CAAC,KAAa,EAAE,KAAa,EAAE,IAAY;QAC1D,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;QAE3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;KACzE;CACF,CAAA;AAjIC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;6CACG;AAQzB;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACS;AAQlC;IADC,IAAI,EAAE;+CAC0B;AAQjC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gEACkC;AA/BxC,cAAc;IADlC,SAAS;GACW,cAAc,CAwIlC;aAxIoB,cAAc;;;;"}

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

@@ -1,9 +1,9 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './base-suggestions.vue_rollup-plugin-vue=script.js';
+import script from './base-suggestions.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -30,7 +30,8 @@ var __vue_render__ = function () {
               _vm._t("default", null, null, {
                 suggestion: suggestion,
                 index: index,
-              }) ],
+              }),
+            ],
             2
           )
         }),
@@ -42,24 +43,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
     inject("data-v-bb6a2776_0", { source: ".x-suggestions[data-v-bb6a2776] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-bb6a2776";
+  const __vue_scope_id__ = "data-v-bb6a2776";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -72,5 +73,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-suggestions.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-list x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-list x-suggestions__item\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n       -->\n      <slot v-bind=\"{ suggestion, index }\" />\n    </li>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n  }\n</style>\n\n<script lang=\"ts\">\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Suggestion, Facet } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { isArrayEmpty } from '../../utils/array';\n\n  /**\n   * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n   * in the default slot for working.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestions extends Vue {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestions!: Suggestion[];\n\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    protected get suggestionsKeys(): string[] {\n      return this.suggestions.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n      );\n    }\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    protected getFacetsKey(facets: Facet[]): string {\n      // Component methods are bound by Vue:\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      return facets.map(this.getFacetKey).join('&');\n    }\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    protected getFacetKey(facet: Facet): string {\n      return facet.filters.map(filter => filter.id).join('&');\n    }\n\n    /**\n     * Slices the suggestions from the state.\n     *\n     * @returns - The list of suggestions slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get suggestionsToRender(): Suggestion[] {\n      return this.suggestions.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n    }\n  }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-list x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-list x-suggestions__item\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n       -->\n      <slot v-bind=\"{ suggestion, index }\" />\n    </li>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n  }\n</style>\n\n<script lang=\"ts\">\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Suggestion, Facet } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { isArrayEmpty } from '../../utils/array';\n\n  /**\n   * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n   * in the default slot for working.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestions extends Vue {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestions!: Suggestion[];\n\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    protected get suggestionsKeys(): string[] {\n      return this.suggestions.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n      );\n    }\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    protected getFacetsKey(facets: Facet[]): string {\n      // Component methods are bound by Vue:\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      return facets.map(this.getFacetKey).join('&');\n    }\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    protected getFacetKey(facet: Facet): string {\n      return facet.filters.map(filter => filter.id).join('&');\n    }\n\n    /**\n     * Slices the suggestions from the state.\n     *\n     * @returns - The list of suggestions slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get suggestionsToRender(): Suggestion[] {\n      return this.suggestions.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n    }\n  }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/suggestions/base-suggestions.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,72 @@
+import { __decorate } from 'tslib';
+import { Prop, Component } from 'vue-property-decorator';
+import Vue from 'vue';
+import { isArrayEmpty } from '../../utils/array.js';
+
+/**
+ * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion
+ * in the default slot for working.
+ *
+ * @public
+ */
+let BaseSuggestions = class BaseSuggestions extends Vue {
+    /**
+     * An array with the unique keys for each suggestion. Required by the `v-for` loop.
+     *
+     * @returns An array with the unique keys of the suggestions.
+     * @internal
+     */
+    get suggestionsKeys() {
+        return this.suggestions.map(suggestion => isArrayEmpty(suggestion.facets)
+            ? suggestion.query
+            : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`);
+    }
+    /**
+     * Generates a string from the given facets.
+     *
+     * @param facets - The list of facets to reduce to a string.
+     * @returns - A string representing the list of facets.
+     * @internal
+     */
+    getFacetsKey(facets) {
+        // Component methods are bound by Vue:
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        return facets.map(this.getFacetKey).join('&');
+    }
+    /**
+     * Generates a string from the given facet.
+     *
+     * @param facet - The facet to reduce to a string.
+     * @returns - A string representing the facet.
+     * @internal
+     */
+    getFacetKey(facet) {
+        return facet.filters.map(filter => filter.id).join('&');
+    }
+    /**
+     * Slices the suggestions from the state.
+     *
+     * @returns - The list of suggestions slice by the number of items to render.
+     *
+     * @internal
+     */
+    get suggestionsToRender() {
+        return this.suggestions.slice(0, this.maxItemsToRender);
+    }
+};
+__decorate([
+    Prop({ required: true })
+], BaseSuggestions.prototype, "suggestions", void 0);
+__decorate([
+    Prop({ default: 'ul' })
+], BaseSuggestions.prototype, "animation", void 0);
+__decorate([
+    Prop()
+], BaseSuggestions.prototype, "maxItemsToRender", void 0);
+BaseSuggestions = __decorate([
+    Component
+], BaseSuggestions);
+var script = BaseSuggestions;
+
+export { script as default };
+//# sourceMappingURL=base-suggestions.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/suggestions/base-suggestions.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-suggestions.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.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\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Suggestion, Facet } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { isArrayEmpty } from '../../utils/array';\n\n/**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\n@Component\nexport default class BaseSuggestions extends Vue {\n  /**\n   * The list of suggestions to render.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestions!: Suggestion[];\n\n  /**\n   * Animation component that will be used to animate the suggestion.\n   *\n   * @public\n   */\n  @Prop({ default: 'ul' })\n  protected animation!: Vue | string;\n\n  /**\n   * Number of suggestions to be rendered.\n   *\n   * @public\n   */\n  @Prop()\n  protected maxItemsToRender?: number;\n\n  /**\n   * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n   *\n   * @returns An array with the unique keys of the suggestions.\n   * @internal\n   */\n  protected get suggestionsKeys(): string[] {\n    return this.suggestions.map(suggestion =>\n      isArrayEmpty(suggestion.facets)\n        ? suggestion.query\n        : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n    );\n  }\n\n  /**\n   * Generates a string from the given facets.\n   *\n   * @param facets - The list of facets to reduce to a string.\n   * @returns - A string representing the list of facets.\n   * @internal\n   */\n  protected getFacetsKey(facets: Facet[]): string {\n    // Component methods are bound by Vue:\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    return facets.map(this.getFacetKey).join('&');\n  }\n\n  /**\n   * Generates a string from the given facet.\n   *\n   * @param facet - The facet to reduce to a string.\n   * @returns - A string representing the facet.\n   * @internal\n   */\n  protected getFacetKey(facet: Facet): string {\n    return facet.filters.map(filter => filter.id).join('&');\n  }\n\n  /**\n   * Slices the suggestions from the state.\n   *\n   * @returns - The list of suggestions slice by the number of items to render.\n   *\n   * @internal\n   */\n  protected get suggestionsToRender(): Suggestion[] {\n    return this.suggestions.slice(0, this.maxItemsToRender);\n  }\n}\n"],"names":[],"mappings":";;;;;AA8BA;;;;;;AAOA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;;;;;;;IA+B9C,IAAc,eAAe;QAC3B,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,IACpC,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC;cAC3B,UAAU,CAAC,KAAK;cAChB,GAAG,UAAU,CAAC,KAAK,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CACrE,CAAC;KACH;;;;;;;;IASS,YAAY,CAAC,MAAe;;;QAGpC,OAAO,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC/C;;;;;;;;IASS,WAAW,CAAC,KAAY;QAChC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzD;;;;;;;;IASD,IAAc,mBAAmB;QAC/B,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACzD;CACF,CAAA;AAlEC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;oDACY;AAQrC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACW;AAQnC;IADC,IAAI,EAAE;yDAC6B;AAvBjB,eAAe;IADnC,SAAS;GACW,eAAe,CAyEnC;aAzEoB,eAAe;;;;"}

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

@@ -7,8 +7,7 @@
  * @internal
  */
 function getXComponentXModuleName(component) {
-    var _a;
-    return (_a = component === null || component === void 0 ? void 0 : component.$options.xModule) !== null && _a !== void 0 ? _a : null;
+    return component?.$options.xModule ?? null;
 }
 /**
  * Returns if the component is an X-Component. An X-Component is a component that has an

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

@@ -1 +1 @@
-{"version":3,"file":"x-component.utils.js","sources":["../../../src/components/x-component.utils.ts"],"sourcesContent":["import Vue from 'vue';\nimport { XModuleName } from '../x-modules/x-modules.types';\n\n/**\n * Gets the X-Component name.\n *\n * @param component - The x-component to get its name.\n * @returns The x-module name if the component is an x-component, or `null` if it is not an\n * x-component.\n * @internal\n */\nexport function getXComponentXModuleName(component: Vue | undefined): XModuleName | null {\n  return component?.$options.xModule ?? null;\n}\n\n/**\n * Returns if the component is an X-Component. An X-Component is a component that has an\n * {@link XModule} associated to it.\n *\n * @param component - The component to check if it is an X-Component.\n * @returns A boolean which flags if a component is a X-Component.\n * @public\n */\nexport function isXComponent(component: Vue): boolean {\n  return !!getXComponentXModuleName(component);\n}\n"],"names":[],"mappings":"AAGA;;;;;;;;SAQgB,wBAAwB,CAAC,SAA0B;;IACjE,OAAO,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,CAAC,OAAO,mCAAI,IAAI,CAAC;AAC7C,CAAC;AAED;;;;;;;;SAQgB,YAAY,CAAC,SAAc;IACzC,OAAO,CAAC,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;AAC/C;;;;"}
+{"version":3,"file":"x-component.utils.js","sources":["../../../src/components/x-component.utils.ts"],"sourcesContent":["import Vue from 'vue';\nimport { XModuleName } from '../x-modules/x-modules.types';\n\n/**\n * Gets the X-Component name.\n *\n * @param component - The x-component to get its name.\n * @returns The x-module name if the component is an x-component, or `null` if it is not an\n * x-component.\n * @internal\n */\nexport function getXComponentXModuleName(component: Vue | undefined): XModuleName | null {\n  return component?.$options.xModule ?? null;\n}\n\n/**\n * Returns if the component is an X-Component. An X-Component is a component that has an\n * {@link XModule} associated to it.\n *\n * @param component - The component to check if it is an X-Component.\n * @returns A boolean which flags if a component is a X-Component.\n * @public\n */\nexport function isXComponent(component: Vue): boolean {\n  return !!getXComponentXModuleName(component);\n}\n"],"names":[],"mappings":"AAGA;;;;;;;;SAQgB,wBAAwB,CAAC,SAA0B;IACjE,OAAO,SAAS,EAAE,QAAQ,CAAC,OAAO,IAAI,IAAI,CAAC;AAC7C,CAAC;AAED;;;;;;;;SAQgB,YAAY,CAAC,SAAc;IACzC,OAAO,CAAC,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;AAC/C;;;;"}

package/js/directives/infinite-scroll/infinite-scroll.js

@@ -1,9 +1,9 @@
-var VIEWPORT_ID = 'viewport';
+const VIEWPORT_ID = 'viewport';
 /**
  * A record which contains {@link IntersectionObserver} objects indexed by the id of the scrollable
  * container.
  */
-var state = {};
+const state = {};
 /**
  * Custom Vue directive for infinite scroll.
  *
@@ -50,19 +50,17 @@ var state = {};
  *
  * @public
  */
-var infiniteScroll = {
-    inserted: function (element, _a, vNode) {
-        var _b = _a.arg, id = _b === void 0 ? VIEWPORT_ID : _b, _c = _a.value, _d = _c === void 0 ? {} : _c, _e = _d.margin, margin = _e === void 0 ? 200 : _e;
-        var root = getRoot(id);
+const infiniteScroll = {
+    inserted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }, vNode) {
+        const root = getRoot(id);
         state[id] = createIntersectionObserver({
-            root: root,
-            margin: margin,
-            vNode: vNode
+            root,
+            margin,
+            vNode
         });
         state[id].observe(element);
     },
-    unbind: function (_element, _a) {
-        var _b = _a.arg, id = _b === void 0 ? VIEWPORT_ID : _b;
+    unbind(_element, { arg: id = VIEWPORT_ID }) {
         if (state[id]) {
             state[id].disconnect();
             delete state[id];
@@ -96,21 +94,18 @@ function getRoot(id) {
  * @param options - ObserverOptions.
  * @returns IntersectionObserver.
  */
-function createIntersectionObserver(_a) {
-    var root = _a.root, margin = _a.margin, vNode = _a.vNode;
+function createIntersectionObserver({ root, margin, vNode }) {
     // This hack allows the root element to always contain the observed element.
     // not overpass the top margin more than 1700000 because it doesn't work in Android chrome
-    var rootMargin = "1000000% 0px " + margin + "px 0px";
-    return new IntersectionObserver(function (_a) {
-        var _b;
-        var entry = _a[0];
+    const rootMargin = `1000000% 0px ${margin}px 0px`;
+    return new IntersectionObserver(([entry]) => {
         if (entry.isIntersecting) {
-            (_b = vNode.componentInstance) === null || _b === void 0 ? void 0 : _b.onInfiniteScrollEnd();
+            vNode.componentInstance?.onInfiniteScrollEnd();
         }
     }, {
         threshold: 0.99,
-        rootMargin: rootMargin,
-        root: root
+        rootMargin,
+        root
     });
 }
 

package/js/directives/infinite-scroll/infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll.js","sources":["../../../../src/directives/infinite-scroll/infinite-scroll.ts"],"sourcesContent":["import { DirectiveOptions } from 'vue';\nimport { Vue } from 'vue/types/vue';\nimport { InfiniteScroll, ObserverOptions } from './infinite-scroll.types';\n\nconst VIEWPORT_ID = 'viewport';\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the id of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {};\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScrollEnd` function\n * implemented by the component which imports the directive, is executed. If you provide a margin in\n * the directive options, this function is triggered when the scroll reaches the end minus that\n * amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * * html: will set the <html> as the scrollable container.\n * * body: will set the <body> as the scrollable container.\n * * id: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: DirectiveOptions = {\n  inserted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }, vNode) {\n    const root = getRoot(id);\n\n    state[id] = createIntersectionObserver({\n      root,\n      margin,\n      vNode\n    });\n\n    state[id].observe(element);\n  },\n\n  unbind(_element, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect();\n      delete state[id];\n    }\n  }\n};\n\n/**\n * Retrieves the root element for the provided id.\n *\n * @param id - String.\n * @returns HTMLElement or null.\n * */\nfunction getRoot(id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null;\n    case 'body':\n      return document.body;\n    case VIEWPORT_ID:\n      return null;\n    default:\n      return document.getElementById(id)!;\n  }\n}\n\n/**\n * Creates an IntersectionObserver.\n *\n * When the observer is fired, it will execute the {@link InfiniteScroll.onInfiniteScrollEnd}\n * function implemented in the provided vNode component instance.\n *\n * @param options - ObserverOptions.\n * @returns IntersectionObserver.\n */\nfunction createIntersectionObserver({\n  root,\n  margin,\n  vNode\n}: ObserverOptions): IntersectionObserver {\n  // This hack allows the root element to always contain the observed element.\n  // not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n  const rootMargin = `1000000% 0px ${margin}px 0px`;\n\n  return new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        (vNode.componentInstance as Vue & InfiniteScroll)?.onInfiniteScrollEnd();\n      }\n    },\n    {\n      threshold: 0.99,\n      rootMargin,\n      root\n    }\n  );\n}\n"],"names":[],"mappings":"AAIA,IAAM,WAAW,GAAG,UAAU,CAAC;AAE/B;;;;AAIA,IAAM,KAAK,GAAyC,EAAE,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8Ca,cAAc,GAAqB;IAC9C,QAAQ,YAAC,OAAO,EAAE,EAAuD,EAAE,KAAK;YAA5D,WAAqB,EAAhB,EAAE,mBAAG,WAAW,KAAA,EAAE,aAA4B,EAA5B,qBAA0B,EAAE,KAAA,EAAnB,cAAY,EAAZ,MAAM,mBAAG,GAAG,KAAA;QAC9D,IAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;QAEzB,KAAK,CAAC,EAAE,CAAC,GAAG,0BAA0B,CAAC;YACrC,IAAI,MAAA;YACJ,MAAM,QAAA;YACN,KAAK,OAAA;SACN,CAAC,CAAC;QAEH,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KAC5B;IAED,MAAM,YAAC,QAAQ,EAAE,EAAyB;YAAvB,WAAqB,EAAhB,EAAE,mBAAG,WAAW,KAAA;QACtC,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;YACb,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,EAAE,CAAC,CAAC;SAClB;KACF;EACD;AAEF;;;;;;AAMA,SAAS,OAAO,CAAC,EAAU;IACzB,QAAQ,EAAE;QACR,KAAK,MAAM;YACT,OAAO,IAAI,CAAC;QACd,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAC;QACvB,KAAK,WAAW;YACd,OAAO,IAAI,CAAC;QACd;YACE,OAAO,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAE,CAAC;KACvC;AACH,CAAC;AAED;;;;;;;;;AASA,SAAS,0BAA0B,CAAC,EAIlB;QAHhB,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,KAAK,WAAA;;;IAIL,IAAM,UAAU,GAAG,kBAAgB,MAAM,WAAQ,CAAC;IAElD,OAAO,IAAI,oBAAoB,CAC7B,UAAC,EAAO;;YAAN,KAAK,QAAA;QACL,IAAI,KAAK,CAAC,cAAc,EAAE;YACxB,MAAC,KAAK,CAAC,iBAA0C,0CAAE,mBAAmB,EAAE,CAAC;SAC1E;KACF,EACD;QACE,SAAS,EAAE,IAAI;QACf,UAAU,YAAA;QACV,IAAI,MAAA;KACL,CACF,CAAC;AACJ;;;;"}
+{"version":3,"file":"infinite-scroll.js","sources":["../../../../src/directives/infinite-scroll/infinite-scroll.ts"],"sourcesContent":["import { DirectiveOptions } from 'vue';\nimport { Vue } from 'vue/types/vue';\nimport { InfiniteScroll, ObserverOptions } from './infinite-scroll.types';\n\nconst VIEWPORT_ID = 'viewport';\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the id of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {};\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScrollEnd` function\n * implemented by the component which imports the directive, is executed. If you provide a margin in\n * the directive options, this function is triggered when the scroll reaches the end minus that\n * amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * * html: will set the <html> as the scrollable container.\n * * body: will set the <body> as the scrollable container.\n * * id: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: DirectiveOptions = {\n  inserted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }, vNode) {\n    const root = getRoot(id);\n\n    state[id] = createIntersectionObserver({\n      root,\n      margin,\n      vNode\n    });\n\n    state[id].observe(element);\n  },\n\n  unbind(_element, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect();\n      delete state[id];\n    }\n  }\n};\n\n/**\n * Retrieves the root element for the provided id.\n *\n * @param id - String.\n * @returns HTMLElement or null.\n * */\nfunction getRoot(id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null;\n    case 'body':\n      return document.body;\n    case VIEWPORT_ID:\n      return null;\n    default:\n      return document.getElementById(id)!;\n  }\n}\n\n/**\n * Creates an IntersectionObserver.\n *\n * When the observer is fired, it will execute the {@link InfiniteScroll.onInfiniteScrollEnd}\n * function implemented in the provided vNode component instance.\n *\n * @param options - ObserverOptions.\n * @returns IntersectionObserver.\n */\nfunction createIntersectionObserver({\n  root,\n  margin,\n  vNode\n}: ObserverOptions): IntersectionObserver {\n  // This hack allows the root element to always contain the observed element.\n  // not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n  const rootMargin = `1000000% 0px ${margin}px 0px`;\n\n  return new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        (vNode.componentInstance as Vue & InfiniteScroll)?.onInfiniteScrollEnd();\n      }\n    },\n    {\n      threshold: 0.99,\n      rootMargin,\n      root\n    }\n  );\n}\n"],"names":[],"mappings":"AAIA,MAAM,WAAW,GAAG,UAAU,CAAC;AAE/B;;;;AAIA,MAAM,KAAK,GAAyC,EAAE,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8Ca,cAAc,GAAqB;IAC9C,QAAQ,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK;QAC9E,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;QAEzB,KAAK,CAAC,EAAE,CAAC,GAAG,0BAA0B,CAAC;YACrC,IAAI;YACJ,MAAM;YACN,KAAK;SACN,CAAC,CAAC;QAEH,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KAC5B;IAED,MAAM,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE;QACxC,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;YACb,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,EAAE,CAAC,CAAC;SAClB;KACF;EACD;AAEF;;;;;;AAMA,SAAS,OAAO,CAAC,EAAU;IACzB,QAAQ,EAAE;QACR,KAAK,MAAM;YACT,OAAO,IAAI,CAAC;QACd,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAC;QACvB,KAAK,WAAW;YACd,OAAO,IAAI,CAAC;QACd;YACE,OAAO,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAE,CAAC;KACvC;AACH,CAAC;AAED;;;;;;;;;AASA,SAAS,0BAA0B,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,KAAK,EACW;;;IAGhB,MAAM,UAAU,GAAG,gBAAgB,MAAM,QAAQ,CAAC;IAElD,OAAO,IAAI,oBAAoB,CAC7B,CAAC,CAAC,KAAK,CAAC;QACN,IAAI,KAAK,CAAC,cAAc,EAAE;YACvB,KAAK,CAAC,iBAA0C,EAAE,mBAAmB,EAAE,CAAC;SAC1E;KACF,EACD;QACE,SAAS,EAAE,IAAI;QACf,UAAU;QACV,IAAI;KACL,CACF,CAAC;AACJ;;;;"}

package/js/filters/compile-message.filter.js

@@ -7,10 +7,7 @@
  * @returns Formatted string.
  * @internal
  */
-var replaceParams = function (compiledMessage, _a) {
-    var key = _a[0], value = _a[1];
-    return compiledMessage.replace(new RegExp("{" + key + "}", 'g'), value.toString());
-};
+const replaceParams = (compiledMessage, [key, value]) => compiledMessage.replace(new RegExp(`{${key}}`, 'g'), value.toString());
 /**
  * Replaces each key in compiledMessage for the provided key's value.
  *

package/js/filters/compile-message.filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"compile-message.filter.js","sources":["../../../src/filters/compile-message.filter.ts"],"sourcesContent":["import { Dictionary } from '../utils';\n\n/**\n * Replaces a key in compiledMessage for the provided key's value.\n *\n * @param compiledMessage - String containing the key to be replaced.\n * @param keyValueEntry - Key would be the string replaced in compiledMessage and value the\n * string that will get replaced with.\n * @returns Formatted string.\n * @internal\n */\nconst replaceParams = (compiledMessage: string, [key, value]: [string, string | number]): string =>\n  compiledMessage.replace(new RegExp(`{${key}}`, 'g'), value.toString());\n\n/**\n * Replaces each key in compiledMessage for the provided key's value.\n *\n * @param message - String containing the keys to be replaced.\n * @param params - Dictionary of key-values that will be used to format compiledMessage.\n * @returns Formatted string.\n * @public\n */\nexport function compileMessage(message: string, params: Dictionary<string | number>): string {\n  return message && params\n    ? Object.entries<string | number>(params).reduce(replaceParams, message)\n    : message;\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;;AASA,IAAM,aAAa,GAAG,UAAC,eAAuB,EAAE,EAAuC;QAAtC,GAAG,QAAA,EAAE,KAAK,QAAA;IACzD,OAAA,eAAe,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,MAAI,GAAG,MAAG,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC;AAAtE,CAAsE,CAAC;AAEzE;;;;;;;;SAQgB,cAAc,CAAC,OAAe,EAAE,MAAmC;IACjF,OAAO,OAAO,IAAI,MAAM;UACpB,MAAM,CAAC,OAAO,CAAkB,MAAM,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC;UACtE,OAAO,CAAC;AACd;;;;"}
+{"version":3,"file":"compile-message.filter.js","sources":["../../../src/filters/compile-message.filter.ts"],"sourcesContent":["import { Dictionary } from '../utils';\n\n/**\n * Replaces a key in compiledMessage for the provided key's value.\n *\n * @param compiledMessage - String containing the key to be replaced.\n * @param keyValueEntry - Key would be the string replaced in compiledMessage and value the\n * string that will get replaced with.\n * @returns Formatted string.\n * @internal\n */\nconst replaceParams = (compiledMessage: string, [key, value]: [string, string | number]): string =>\n  compiledMessage.replace(new RegExp(`{${key}}`, 'g'), value.toString());\n\n/**\n * Replaces each key in compiledMessage for the provided key's value.\n *\n * @param message - String containing the keys to be replaced.\n * @param params - Dictionary of key-values that will be used to format compiledMessage.\n * @returns Formatted string.\n * @public\n */\nexport function compileMessage(message: string, params: Dictionary<string | number>): string {\n  return message && params\n    ? Object.entries<string | number>(params).reduce(replaceParams, message)\n    : message;\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;;AASA,MAAM,aAAa,GAAG,CAAC,eAAuB,EAAE,CAAC,GAAG,EAAE,KAAK,CAA4B,KACrF,eAAe,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,GAAG,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;AAEzE;;;;;;;;SAQgB,cAAc,CAAC,OAAe,EAAE,MAAmC;IACjF,OAAO,OAAO,IAAI,MAAM;UACpB,MAAM,CAAC,OAAO,CAAkB,MAAM,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC;UACtE,OAAO,CAAC;AACd;;;;"}

package/js/filters/filters.registry.js

@@ -3,7 +3,7 @@
  *
  * @internal
  */
-var FILTERS_REGISTRY = {};
+const FILTERS_REGISTRY = {};
 
 export { FILTERS_REGISTRY };
 //# sourceMappingURL=filters.registry.js.map

package/js/filters/filters.registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters.registry.js","sources":["../../../src/filters/filters.registry.ts"],"sourcesContent":["/**\n * List of filters that can be used to apply common text formatting.\n *\n * @internal\n */\nexport const FILTERS_REGISTRY = {};\n"],"names":[],"mappings":"AAAA;;;;;IAKa,gBAAgB,GAAG;;;;"}
+{"version":3,"file":"filters.registry.js","sources":["../../../src/filters/filters.registry.ts"],"sourcesContent":["/**\n * List of filters that can be used to apply common text formatting.\n *\n * @internal\n */\nexport const FILTERS_REGISTRY = {};\n"],"names":[],"mappings":"AAAA;;;;;MAKa,gBAAgB,GAAG;;;;"}