@empathyco/x-components 3.0.0-alpha.27 → 3.0.0-alpha.30

package/js/x-modules/search-box/components/search-button.vue_rollup-plugin-vue=script.js

@@ -1,7 +1,6 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Component } from 'vue-property-decorator';
-import BaseEventButton from '../../../components/base-event-button.vue.js';
 import { State } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
 import { searchBoxXModule } from '../x-module.js';
@@ -28,18 +27,21 @@ var SearchButton = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SearchButton.prototype, "events", {
-        get: function () {
-            return !this.isQueryEmpty
-                ? {
-                    UserAcceptedAQuery: this.query,
-                    UserPressedSearchButton: this.query
-                }
-                : {};
-        },
-        enumerable: false,
-        configurable: true
-    });
+    /**
+     * Emits events when the button is clicked.
+     *
+     * @public
+     */
+    SearchButton.prototype.emitEvents = function () {
+        if (!this.isQueryEmpty) {
+            this.$x.emit('UserAcceptedAQuery', this.query, {
+                target: this.$el
+            });
+            this.$x.emit('UserPressedSearchButton', this.query, {
+                target: this.$el
+            });
+        }
+    };
     Object.defineProperty(SearchButton.prototype, "dynamicClasses", {
         get: function () {
             return {
@@ -54,8 +56,7 @@ var SearchButton = /** @class */ (function (_super) {
     ], SearchButton.prototype, "query", void 0);
     SearchButton = __decorate([
         Component({
-            mixins: [xComponentMixin(searchBoxXModule)],
-            components: { BaseEventButton: BaseEventButton }
+            mixins: [xComponentMixin(searchBoxXModule)]
         })
     ], SearchButton);
     return SearchButton;

package/js/x-modules/search-box/components/search-button.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-button.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { State } from '../../../components/decorators/store.decorators';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils/types';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { searchBoxXModule } from '../x-module';\n\n/**\n * This component renders a button to submit the query.\n *\n * @remarks\n * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n * It also adds `x-search-button--has-empty-query` as class when there is no query.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(searchBoxXModule)],\n  components: { BaseEventButton }\n})\nexport default class SearchButton extends Vue {\n  @State('searchBox', 'query')\n  public query!: string;\n\n  protected get isQueryEmpty(): boolean {\n    return this.query.length === 0;\n  }\n\n  protected get events(): Partial<XEventsTypes> {\n    return !this.isQueryEmpty\n      ? {\n          UserAcceptedAQuery: this.query,\n          UserPressedSearchButton: this.query\n        }\n      : {};\n  }\n\n  protected get dynamicClasses(): VueCSSClasses {\n    return {\n      'x-search-button--has-empty-query': this.isQueryEmpty\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAsBA;;;;;;;;;;AAcA;IAA0C,gCAAG;IAA7C;;KAsBC;IAlBC,sBAAc,sCAAY;aAA1B;YACE,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;SAChC;;;OAAA;IAED,sBAAc,gCAAM;aAApB;YACE,OAAO,CAAC,IAAI,CAAC,YAAY;kBACrB;oBACE,kBAAkB,EAAE,IAAI,CAAC,KAAK;oBAC9B,uBAAuB,EAAE,IAAI,CAAC,KAAK;iBACpC;kBACD,EAAE,CAAC;SACR;;;OAAA;IAED,sBAAc,wCAAc;aAA5B;YACE,OAAO;gBACL,kCAAkC,EAAE,IAAI,CAAC,YAAY;aACtD,CAAC;SACH;;;OAAA;IAnBD;QADC,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC;+CACN;IAFH,YAAY;QAJhC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;YAC3C,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;SAChC,CAAC;OACmB,YAAY,CAsBhC;IAAD,mBAAC;CAAA,CAtByC,GAAG;;;;"}
+{"version":3,"file":"search-button.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils/types';\nimport { searchBoxXModule } from '../x-module';\n\n/**\n * This component renders a button to submit the query.\n *\n * @remarks\n * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n * It also adds `x-search-button--has-empty-query` as class when there is no query.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(searchBoxXModule)]\n})\nexport default class SearchButton extends Vue {\n  @State('searchBox', 'query')\n  public query!: string;\n\n  protected get isQueryEmpty(): boolean {\n    return this.query.length === 0;\n  }\n\n  /**\n   * Emits events when the button is clicked.\n   *\n   * @public\n   */\n  protected emitEvents(): void {\n    if (!this.isQueryEmpty) {\n      this.$x.emit('UserAcceptedAQuery', this.query, {\n        target: this.$el as HTMLElement\n      });\n      this.$x.emit('UserPressedSearchButton', this.query, {\n        target: this.$el as HTMLElement\n      });\n    }\n  }\n\n  protected get dynamicClasses(): VueCSSClasses {\n    return {\n      'x-search-button--has-empty-query': this.isQueryEmpty\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAoBA;;;;;;;;;;AAaA;IAA0C,gCAAG;IAA7C;;KA6BC;IAzBC,sBAAc,sCAAY;aAA1B;YACE,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;SAChC;;;OAAA;;;;;;IAOS,iCAAU,GAApB;QACE,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,EAAE;gBAC7C,MAAM,EAAE,IAAI,CAAC,GAAkB;aAChC,CAAC,CAAC;YACH,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,KAAK,EAAE;gBAClD,MAAM,EAAE,IAAI,CAAC,GAAkB;aAChC,CAAC,CAAC;SACJ;KACF;IAED,sBAAc,wCAAc;aAA5B;YACE,OAAO;gBACL,kCAAkC,EAAE,IAAI,CAAC,YAAY;aACtD,CAAC;SACH;;;OAAA;IA1BD;QADC,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC;+CACN;IAFH,YAAY;QAHhC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;SAC5C,CAAC;OACmB,YAAY,CA6BhC;IAAD,mBAAC;CAAA,CA7ByC,GAAG;;;;"}

package/js/x-modules/search-box/components/search-input.vue.js

@@ -16,6 +16,7 @@ var __vue_render__ = function() {
     attrs: {
       maxlength: _vm.maxLength,
       autocomplete: "off",
+      enterkeyhint: "search",
       inputmode: "search",
       type: "search",
       "data-test": "search-input"
@@ -60,11 +61,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-6d8f4b40_0", { source: ".x-search-input[data-v-6d8f4b40]::-webkit-search-decoration,\n.x-search-input[data-v-6d8f4b40]::-webkit-search-cancel-button,\n.x-search-input[data-v-6d8f4b40]::-webkit-search-results-button,\n.x-search-input[data-v-6d8f4b40]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
+    inject("data-v-3d804b23_0", { source: ".x-search-input[data-v-3d804b23]::-webkit-search-decoration,\n.x-search-input[data-v-3d804b23]::-webkit-search-cancel-button,\n.x-search-input[data-v-3d804b23]::-webkit-search-results-button,\n.x-search-input[data-v-3d804b23]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-6d8f4b40";
+  var __vue_scope_id__ = "data-v-3d804b23";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/search-box/components/search-input.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"input\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-input x-search-input\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n  />\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { ArrowKey, PropsWithType } from '../../../utils';\n  import { debounce } from '../../../utils/debounce';\n  import { DebouncedFunction } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders an input field that allows the user to type a query. It also reacts to\n   * query changes through event listening.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class SearchInput extends Vue {\n    public $refs!: { input: HTMLInputElement };\n\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    @Prop({ default: 64 })\n    protected maxLength!: number;\n\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    @Prop({ default: true })\n    protected autofocus!: boolean;\n\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    @Prop({ default: true })\n    protected instant!: boolean;\n\n    /**\n     * Debounce time for the instant.\n     */\n    @Prop({ default: 500 })\n    protected instantDebounceInMs!: number;\n\n    /**\n     * Keyboard keys to accept the autocomplete suggestion.\n     */\n    @Prop({ default: () => ['ArrowRight'] })\n    protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n    /**\n     * Event that retrieves the autocomplete suggestion.\n     */\n    @Prop({ default: 'QuerySuggestionsChanged' })\n    protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n    @State('searchBox', 'query')\n    public query!: string;\n\n    /**\n     * Focus search input when the user navigates to the search input.\n     *\n     * @internal\n     */\n    @XOn('UserReachedEmpathizeTop')\n    focusInput(): void {\n      this.$refs.input?.focus();\n    }\n\n    protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} is emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    @XOn('UserAcceptedAQuery')\n    @XOn('UserClearedQuery')\n    cancelDebouncedUserAcceptedAQuery(): void {\n      this.debouncedUserAcceptedAQuery?.cancel();\n    }\n\n    mounted(): void {\n      if (this.autofocus) {\n        this.focusInput();\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    emitDebouncedUserAcceptedAQuery(query: string): void {\n      if (this.instant) {\n        if (!this.debouncedUserAcceptedAQuery) {\n          this.debouncedUserAcceptedAQuery = debounce(\n            this.emitUserAcceptedAQuery.bind(this),\n            this.instantDebounceInMs\n          );\n        }\n        this.debouncedUserAcceptedAQuery(query);\n      }\n    }\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected eventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$refs.input\n      };\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    protected emitUserBlurredSearchBox(): void {\n      this.$x.emit('UserBlurredSearchBox', undefined, this.eventMetadata());\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    protected emitUserClickedSearchBox(): void {\n      this.$x.emit('UserClickedSearchBox', undefined, this.eventMetadata());\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    protected emitUserFocusedSearchBox(): void {\n      this.$x.emit('UserFocusedSearchBox', undefined, this.eventMetadata());\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    protected emitUserIsTypingAQueryEvents(): void {\n      const query = this.$refs.input.value;\n      this.$x.emit('UserIsTypingAQuery', query, this.eventMetadata());\n      if (query.trim()) {\n        this.emitDebouncedUserAcceptedAQuery(query);\n      } else {\n        this.cancelDebouncedUserAcceptedAQuery();\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n      this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.eventMetadata());\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    protected emitUserPressedEnterKey(): void {\n      const query = this.$refs.input.value.trim();\n      if (query.length > 0) {\n        this.$x.emit('UserPressedEnterKey', query, this.eventMetadata());\n        this.emitUserAcceptedAQuery(query);\n      }\n      this.$refs.input?.blur();\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    protected emitUserAcceptedAQuery(query: string): void {\n      this.$x.emit('UserAcceptedAQuery', query, this.eventMetadata());\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-search-input::-webkit-search-decoration,\n  .x-search-input::-webkit-search-cancel-button,\n  .x-search-input::-webkit-search-results-button,\n  .x-search-input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <SearchInput />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <SearchInput\n    @UserPressedEnterKey=\"logUserPressedEnter\"\n    @UserFocusedSearchBox=\"hasFocus = true\"\n    @UserBlurredSearchBox=\"hasFocus = false\"\n    @UserIsTypingAQuery=\"value = 'focus'\"\n  />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    },\n    data() {\n      return {\n        value: '',\n        hasFocus: false\n      };\n    },\n    methods: {\n      logUserPressedEnter() {\n        console.log('User pressed enter');\n      }\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “puzzle” or another toy in the input field and then click the clear icon to try it out!_\n\n```vue\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import {\n    SearchInput,\n    ClearSearchInput,\n    ClearSearchButton\n  } from '@empathyco/x-components/search-box';\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput,\n      ClearSearchButton,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"input\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-input x-search-input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n  />\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { ArrowKey, PropsWithType } from '../../../utils';\n  import { debounce } from '../../../utils/debounce';\n  import { DebouncedFunction } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders an input field that allows the user to type a query. It also reacts to\n   * query changes through event listening.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class SearchInput extends Vue {\n    public $refs!: { input: HTMLInputElement };\n\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    @Prop({ default: 64 })\n    protected maxLength!: number;\n\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    @Prop({ default: true })\n    protected autofocus!: boolean;\n\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    @Prop({ default: true })\n    protected instant!: boolean;\n\n    /**\n     * Debounce time for the instant.\n     */\n    @Prop({ default: 500 })\n    protected instantDebounceInMs!: number;\n\n    /**\n     * Keyboard keys to accept the autocomplete suggestion.\n     */\n    @Prop({ default: () => ['ArrowRight'] })\n    protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n    /**\n     * Event that retrieves the autocomplete suggestion.\n     */\n    @Prop({ default: 'QuerySuggestionsChanged' })\n    protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n    @State('searchBox', 'query')\n    public query!: string;\n\n    /**\n     * Focus search input when the user navigates to the search input.\n     *\n     * @internal\n     */\n    @XOn('UserReachedEmpathizeTop')\n    focusInput(): void {\n      this.$refs.input?.focus();\n    }\n\n    protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} is emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    @XOn('UserAcceptedAQuery')\n    @XOn('UserClearedQuery')\n    cancelDebouncedUserAcceptedAQuery(): void {\n      this.debouncedUserAcceptedAQuery?.cancel();\n    }\n\n    mounted(): void {\n      if (this.autofocus) {\n        this.focusInput();\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    emitDebouncedUserAcceptedAQuery(query: string): void {\n      if (this.instant) {\n        if (!this.debouncedUserAcceptedAQuery) {\n          this.debouncedUserAcceptedAQuery = debounce(\n            this.emitUserAcceptedAQuery.bind(this),\n            this.instantDebounceInMs\n          );\n        }\n        this.debouncedUserAcceptedAQuery(query);\n      }\n    }\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected eventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$refs.input\n      };\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    protected emitUserBlurredSearchBox(): void {\n      this.$x.emit('UserBlurredSearchBox', undefined, this.eventMetadata());\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    protected emitUserClickedSearchBox(): void {\n      this.$x.emit('UserClickedSearchBox', undefined, this.eventMetadata());\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    protected emitUserFocusedSearchBox(): void {\n      this.$x.emit('UserFocusedSearchBox', undefined, this.eventMetadata());\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    protected emitUserIsTypingAQueryEvents(): void {\n      const query = this.$refs.input.value;\n      this.$x.emit('UserIsTypingAQuery', query, this.eventMetadata());\n      if (query.trim()) {\n        this.emitDebouncedUserAcceptedAQuery(query);\n      } else {\n        this.cancelDebouncedUserAcceptedAQuery();\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n      this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.eventMetadata());\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    protected emitUserPressedEnterKey(): void {\n      const query = this.$refs.input.value.trim();\n      if (query.length > 0) {\n        this.$x.emit('UserPressedEnterKey', query, this.eventMetadata());\n        this.emitUserAcceptedAQuery(query);\n      }\n      this.$refs.input?.blur();\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    protected emitUserAcceptedAQuery(query: string): void {\n      this.$x.emit('UserAcceptedAQuery', query, this.eventMetadata());\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-search-input::-webkit-search-decoration,\n  .x-search-input::-webkit-search-cancel-button,\n  .x-search-input::-webkit-search-results-button,\n  .x-search-input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <SearchInput />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <SearchInput\n    @UserPressedEnterKey=\"logUserPressedEnter\"\n    @UserFocusedSearchBox=\"hasFocus = true\"\n    @UserBlurredSearchBox=\"hasFocus = false\"\n    @UserIsTypingAQuery=\"value = 'focus'\"\n  />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    },\n    data() {\n      return {\n        value: '',\n        hasFocus: false\n      };\n    },\n    methods: {\n      logUserPressedEnter() {\n        console.log('User pressed enter');\n      }\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “puzzle” or another toy in the input field and then click the clear icon to try it out!_\n\n```vue\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import {\n    SearchInput,\n    ClearSearchInput,\n    ClearSearchButton\n  } from '@empathyco/x-components/search-box';\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput,\n      ClearSearchButton,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search-box/components/search-input.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { ArrowKey, PropsWithType } from '../../../utils';\nimport { debounce } from '../../../utils/debounce';\nimport { DebouncedFunction } from '../../../utils/types';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { WireMetadata } from '../../../wiring/wiring.types';\nimport { searchBoxXModule } from '../x-module';\n\n/**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(searchBoxXModule)]\n})\nexport default class SearchInput extends Vue {\n  public $refs!: { input: HTMLInputElement };\n\n  /**\n   * Maximum characters allowed in the input search.\n   */\n  @Prop({ default: 64 })\n  protected maxLength!: number;\n\n  /**\n   * Allows input autofocus when the search field is rendered.\n   */\n  @Prop({ default: true })\n  protected autofocus!: boolean;\n\n  /**\n   * Enables the auto-accept query after debounce.\n   */\n  @Prop({ default: true })\n  protected instant!: boolean;\n\n  /**\n   * Debounce time for the instant.\n   */\n  @Prop({ default: 500 })\n  protected instantDebounceInMs!: number;\n\n  /**\n   * Keyboard keys to accept the autocomplete suggestion.\n   */\n  @Prop({ default: () => ['ArrowRight'] })\n  protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n  /**\n   * Event that retrieves the autocomplete suggestion.\n   */\n  @Prop({ default: 'QuerySuggestionsChanged' })\n  protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n  @State('searchBox', 'query')\n  public query!: string;\n\n  /**\n   * Focus search input when the user navigates to the search input.\n   *\n   * @internal\n   */\n  @XOn('UserReachedEmpathizeTop')\n  focusInput(): void {\n    this.$refs.input?.focus();\n  }\n\n  protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n  /**\n   * When event {@link XEventsTypes.UserAcceptedAQuery} is emitted the pending debounced emit\n   * {@link XEvent} `UserAcceptedAQuery` is canceled.\n   *\n   * @internal\n   */\n  @XOn('UserAcceptedAQuery')\n  @XOn('UserClearedQuery')\n  cancelDebouncedUserAcceptedAQuery(): void {\n    this.debouncedUserAcceptedAQuery?.cancel();\n  }\n\n  mounted(): void {\n    if (this.autofocus) {\n      this.focusInput();\n    }\n  }\n\n  /**\n   * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n   * `instantDebounceInMs` prop.\n   *\n   * @internal\n   * @param query - The query that will be emitted.\n   */\n  emitDebouncedUserAcceptedAQuery(query: string): void {\n    if (this.instant) {\n      if (!this.debouncedUserAcceptedAQuery) {\n        this.debouncedUserAcceptedAQuery = debounce(\n          this.emitUserAcceptedAQuery.bind(this),\n          this.instantDebounceInMs\n        );\n      }\n      this.debouncedUserAcceptedAQuery(query);\n    }\n  }\n\n  /**\n   * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n   *\n   * @returns The {@link WireMetadata} object omitting the moduleName.\n   * @internal\n   */\n  protected eventMetadata(): Omit<WireMetadata, 'moduleName'> {\n    return {\n      target: this.$refs.input\n    };\n  }\n\n  /**\n   * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n   *\n   * @internal\n   */\n  protected emitUserBlurredSearchBox(): void {\n    this.$x.emit('UserBlurredSearchBox', undefined, this.eventMetadata());\n  }\n\n  /**\n   * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n   *\n   * @internal\n   */\n  protected emitUserClickedSearchBox(): void {\n    this.$x.emit('UserClickedSearchBox', undefined, this.eventMetadata());\n  }\n\n  /**\n   * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n   *\n   * @internal\n   */\n  protected emitUserFocusedSearchBox(): void {\n    this.$x.emit('UserFocusedSearchBox', undefined, this.eventMetadata());\n  }\n\n  /**\n   * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n   * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n   * removes all characters in the search-box.\n   *\n   * @internal\n   */\n  protected emitUserIsTypingAQueryEvents(): void {\n    const query = this.$refs.input.value;\n    this.$x.emit('UserIsTypingAQuery', query, this.eventMetadata());\n    if (query.trim()) {\n      this.emitDebouncedUserAcceptedAQuery(query);\n    } else {\n      this.cancelDebouncedUserAcceptedAQuery();\n    }\n  }\n\n  /**\n   * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n   *\n   * @param event - The keyboard event with the arrow key pressed.\n   * @internal\n   */\n  protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n    this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.eventMetadata());\n  }\n\n  /**\n   * Emits multiple events when the user pressed the enter key.\n   *\n   * @remarks\n   * Emitted events are:\n   * * {@link SearchBoxXEvents.UserPressedEnterKey}\n   * * {@link XEventsTypes.UserAcceptedAQuery}\n   *\n   * @internal\n   */\n  protected emitUserPressedEnterKey(): void {\n    const query = this.$refs.input.value.trim();\n    if (query.length > 0) {\n      this.$x.emit('UserPressedEnterKey', query, this.eventMetadata());\n      this.emitUserAcceptedAQuery(query);\n    }\n    this.$refs.input?.blur();\n  }\n\n  /**\n   * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n   *\n   * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n   * emitDebouncedUserAcceptedAQuery method.\n   * @internal\n   * @param query - The query that will be emitted.\n   */\n  protected emitUserAcceptedAQuery(query: string): void {\n    this.$x.emit('UserAcceptedAQuery', query, this.eventMetadata());\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"search-input.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { ArrowKey, PropsWithType } from '../../../utils';\nimport { debounce } from '../../../utils/debounce';\nimport { DebouncedFunction } from '../../../utils/types';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { WireMetadata } from '../../../wiring/wiring.types';\nimport { searchBoxXModule } from '../x-module';\n\n/**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(searchBoxXModule)]\n})\nexport default class SearchInput extends Vue {\n  public $refs!: { input: HTMLInputElement };\n\n  /**\n   * Maximum characters allowed in the input search.\n   */\n  @Prop({ default: 64 })\n  protected maxLength!: number;\n\n  /**\n   * Allows input autofocus when the search field is rendered.\n   */\n  @Prop({ default: true })\n  protected autofocus!: boolean;\n\n  /**\n   * Enables the auto-accept query after debounce.\n   */\n  @Prop({ default: true })\n  protected instant!: boolean;\n\n  /**\n   * Debounce time for the instant.\n   */\n  @Prop({ default: 500 })\n  protected instantDebounceInMs!: number;\n\n  /**\n   * Keyboard keys to accept the autocomplete suggestion.\n   */\n  @Prop({ default: () => ['ArrowRight'] })\n  protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n  /**\n   * Event that retrieves the autocomplete suggestion.\n   */\n  @Prop({ default: 'QuerySuggestionsChanged' })\n  protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n  @State('searchBox', 'query')\n  public query!: string;\n\n  /**\n   * Focus search input when the user navigates to the search input.\n   *\n   * @internal\n   */\n  @XOn('UserReachedEmpathizeTop')\n  focusInput(): void {\n    this.$refs.input?.focus();\n  }\n\n  protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n  /**\n   * When event {@link XEventsTypes.UserAcceptedAQuery} is emitted the pending debounced emit\n   * {@link XEvent} `UserAcceptedAQuery` is canceled.\n   *\n   * @internal\n   */\n  @XOn('UserAcceptedAQuery')\n  @XOn('UserClearedQuery')\n  cancelDebouncedUserAcceptedAQuery(): void {\n    this.debouncedUserAcceptedAQuery?.cancel();\n  }\n\n  mounted(): void {\n    if (this.autofocus) {\n      this.focusInput();\n    }\n  }\n\n  /**\n   * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n   * `instantDebounceInMs` prop.\n   *\n   * @internal\n   * @param query - The query that will be emitted.\n   */\n  emitDebouncedUserAcceptedAQuery(query: string): void {\n    if (this.instant) {\n      if (!this.debouncedUserAcceptedAQuery) {\n        this.debouncedUserAcceptedAQuery = debounce(\n          this.emitUserAcceptedAQuery.bind(this),\n          this.instantDebounceInMs\n        );\n      }\n      this.debouncedUserAcceptedAQuery(query);\n    }\n  }\n\n  /**\n   * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n   *\n   * @returns The {@link WireMetadata} object omitting the moduleName.\n   * @internal\n   */\n  protected eventMetadata(): Omit<WireMetadata, 'moduleName'> {\n    return {\n      target: this.$refs.input\n    };\n  }\n\n  /**\n   * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n   *\n   * @internal\n   */\n  protected emitUserBlurredSearchBox(): void {\n    this.$x.emit('UserBlurredSearchBox', undefined, this.eventMetadata());\n  }\n\n  /**\n   * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n   *\n   * @internal\n   */\n  protected emitUserClickedSearchBox(): void {\n    this.$x.emit('UserClickedSearchBox', undefined, this.eventMetadata());\n  }\n\n  /**\n   * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n   *\n   * @internal\n   */\n  protected emitUserFocusedSearchBox(): void {\n    this.$x.emit('UserFocusedSearchBox', undefined, this.eventMetadata());\n  }\n\n  /**\n   * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n   * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n   * removes all characters in the search-box.\n   *\n   * @internal\n   */\n  protected emitUserIsTypingAQueryEvents(): void {\n    const query = this.$refs.input.value;\n    this.$x.emit('UserIsTypingAQuery', query, this.eventMetadata());\n    if (query.trim()) {\n      this.emitDebouncedUserAcceptedAQuery(query);\n    } else {\n      this.cancelDebouncedUserAcceptedAQuery();\n    }\n  }\n\n  /**\n   * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n   *\n   * @param event - The keyboard event with the arrow key pressed.\n   * @internal\n   */\n  protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n    this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.eventMetadata());\n  }\n\n  /**\n   * Emits multiple events when the user pressed the enter key.\n   *\n   * @remarks\n   * Emitted events are:\n   * * {@link SearchBoxXEvents.UserPressedEnterKey}\n   * * {@link XEventsTypes.UserAcceptedAQuery}\n   *\n   * @internal\n   */\n  protected emitUserPressedEnterKey(): void {\n    const query = this.$refs.input.value.trim();\n    if (query.length > 0) {\n      this.$x.emit('UserPressedEnterKey', query, this.eventMetadata());\n      this.emitUserAcceptedAQuery(query);\n    }\n    this.$refs.input?.blur();\n  }\n\n  /**\n   * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n   *\n   * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n   * emitDebouncedUserAcceptedAQuery method.\n   * @internal\n   * @param query - The query that will be emitted.\n   */\n  protected emitUserAcceptedAQuery(query: string): void {\n    this.$x.emit('UserAcceptedAQuery', query, this.eventMetadata());\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/search-box/store/actions/set-url-params.action.js

@@ -10,9 +10,7 @@
 var setUrlParams = function (_a, _b) {
     var commit = _a.commit;
     var query = _b.query;
-    if (query) {
-        commit('setQuery', query);
-    }
+    commit('setQuery', query);
 };
 
 export { setUrlParams };

package/js/x-modules/search-box/store/actions/set-url-params.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-url-params.action.js","sources":["../../../../../../src/x-modules/search-box/store/actions/set-url-params.action.ts"],"sourcesContent":["import { SearchBoxXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link SearchBoxActions.setUrlParams}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n *\n * @param urlParams - List of params from the url.\n * @public\n */\nexport const setUrlParams: SearchBoxXStoreModule['actions']['setUrlParams'] = (\n  { commit },\n  { query }\n) => {\n  if (query) {\n    commit('setQuery', query);\n  }\n};\n"],"names":[],"mappings":"AAEA;;;;;;;;;IASa,YAAY,GAAqD,UAC5E,EAAU,EACV,EAAS;QADP,MAAM,YAAA;QACN,KAAK,WAAA;IAEP,IAAI,KAAK,EAAE;QACT,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;KAC3B;AACH;;;;"}
+{"version":3,"file":"set-url-params.action.js","sources":["../../../../../../src/x-modules/search-box/store/actions/set-url-params.action.ts"],"sourcesContent":["import { SearchBoxXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link SearchBoxActions.setUrlParams}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n *\n * @param urlParams - List of params from the url.\n * @public\n */\nexport const setUrlParams: SearchBoxXStoreModule['actions']['setUrlParams'] = (\n  { commit },\n  { query }\n) => {\n  commit('setQuery', query);\n};\n"],"names":[],"mappings":"AAEA;;;;;;;;;IASa,YAAY,GAAqD,UAC5E,EAAU,EACV,EAAS;QADP,MAAM,YAAA;QACN,KAAK,WAAA;IAEP,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AAC5B;;;;"}

package/js/x-modules/tagging/service/session.service.js

@@ -0,0 +1,35 @@
+import { StorageService } from '@empathyco/x-storage-service';
+import { nanoid } from 'nanoid';
+
+/**
+ * Default implementation for the {@link SessionService}.
+ *
+ * @public
+ */
+var DefaultSessionService = /** @class */ (function () {
+    function DefaultSessionService(storageService, ttlMs // 30m * 60s * 1000 = 1800_000ms
+    ) {
+        if (storageService === void 0) { storageService = new StorageService(localStorage, 'x'); }
+        if (ttlMs === void 0) { ttlMs = 1800000; }
+        this.storageService = storageService;
+        this.ttlMs = ttlMs;
+        this.SESSION_ID_KEY = 'session-id';
+    }
+    DefaultSessionService.prototype.getSessionId = function () {
+        var _a;
+        var sessionId = (_a = this.storageService.getItem(this.SESSION_ID_KEY)) !== null && _a !== void 0 ? _a : nanoid();
+        this.storageService.setItem(this.SESSION_ID_KEY, sessionId, Date.now() + this.ttlMs);
+        return sessionId;
+    };
+    DefaultSessionService.prototype.clearSessionId = function () {
+        this.storageService.removeItem(this.SESSION_ID_KEY);
+    };
+    /**
+     * Global instance of the {@link SessionService}.
+     */
+    DefaultSessionService.instance = new DefaultSessionService();
+    return DefaultSessionService;
+}());
+
+export { DefaultSessionService };
+//# sourceMappingURL=session.service.js.map

package/js/x-modules/tagging/service/session.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"session.service.js","sources":["../../../../../src/x-modules/tagging/service/session.service.ts"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport { StorageService } from '@empathyco/x-storage-service';\nimport { SessionService } from './types';\n\n/**\n * Default implementation for the {@link SessionService}.\n *\n * @public\n */\nexport class DefaultSessionService implements SessionService {\n  protected readonly SESSION_ID_KEY = 'session-id';\n\n  /**\n   * Global instance of the {@link SessionService}.\n   */\n  public static instance: SessionService = new DefaultSessionService();\n\n  public constructor(\n    protected storageService: StorageService = new StorageService(localStorage, 'x'),\n    protected ttlMs = 1800000 // 30m * 60s * 1000 = 1800_000ms\n  ) {}\n\n  getSessionId(): string {\n    const sessionId = this.storageService.getItem(this.SESSION_ID_KEY) ?? nanoid();\n    this.storageService.setItem(this.SESSION_ID_KEY, sessionId, Date.now() + this.ttlMs);\n    return sessionId;\n  }\n\n  clearSessionId(): void {\n    this.storageService.removeItem(this.SESSION_ID_KEY);\n  }\n}\n"],"names":[],"mappings":";;;AAIA;;;;;;IAaE,+BACY,cAAsE,EACtE,KAAe;;QADf,+BAAA,EAAA,qBAAqC,cAAc,CAAC,YAAY,EAAE,GAAG,CAAC;QACtE,sBAAA,EAAA,eAAe;QADf,mBAAc,GAAd,cAAc,CAAwD;QACtE,UAAK,GAAL,KAAK,CAAU;QATR,mBAAc,GAAG,YAAY,CAAC;KAU7C;IAEJ,4CAAY,GAAZ;;QACE,IAAM,SAAS,GAAG,MAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,mCAAI,MAAM,EAAE,CAAC;QAC/E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACrF,OAAO,SAAS,CAAC;KAClB;IAED,8CAAc,GAAd;QACE,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KACrD;;;;IAfa,8BAAQ,GAAmB,IAAI,qBAAqB,EAAE,CAAC;IAgBvE,4BAAC;CAtBD;;;;"}

package/js/x-modules/tagging/store/emitters.js

@@ -9,7 +9,9 @@ import { taggingXStoreModule } from './module.js';
  *
  * @internal
  */
-var taggingEmitters = createStoreEmitters(taggingXStoreModule, {});
+var taggingEmitters = createStoreEmitters(taggingXStoreModule, {
+    ConsentChanged: function (state) { return state.consent; }
+});
 
 export { taggingEmitters };
 //# sourceMappingURL=emitters.js.map

package/js/x-modules/tagging/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/tagging/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { taggingXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the tagging module.\n *\n * @internal\n */\nexport const taggingEmitters = createStoreEmitters(taggingXStoreModule, {});\n"],"names":[],"mappings":";;;;;;AAGA;;;;;IAKa,eAAe,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,EAAE;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/tagging/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { taggingXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the tagging module.\n *\n * @internal\n */\nexport const taggingEmitters = createStoreEmitters(taggingXStoreModule, {\n  ConsentChanged: state => state.consent!\n});\n"],"names":[],"mappings":";;;;;;AAGA;;;;;IAKa,eAAe,GAAG,mBAAmB,CAAC,mBAAmB,EAAE;IACtE,cAAc,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAQ,GAAA;CACxC;;;;"}

package/js/x-modules/tagging/store/module.js

@@ -5,10 +5,24 @@
  */
 var taggingXStoreModule = {
     state: function () { return ({
-        config: {}
+        config: {
+            sessionTTLMs: 30 * 60 * 1000,
+            queryTaggingDebounceMs: 200
+        },
+        consent: null
     }); },
     getters: {},
-    mutations: {},
+    mutations: {
+        setSessionDuration: function (state, sessionTTLMs) {
+            state.config.sessionTTLMs = sessionTTLMs;
+        },
+        setQueryTaggingDebounce: function (state, queryTaggingDebounceMs) {
+            state.config.queryTaggingDebounceMs = queryTaggingDebounceMs;
+        },
+        setConsent: function (state, consent) {
+            state.consent = consent;
+        }
+    },
     actions: {}
 };
 

package/js/x-modules/tagging/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/tagging/store/module.ts"],"sourcesContent":["import { TaggingXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the tagging module.\n *\n * @internal\n */\nexport const taggingXStoreModule: TaggingXStoreModule = {\n  state: () => ({\n    config: {}\n  }),\n  getters: {},\n  mutations: {},\n  actions: {}\n};\n"],"names":[],"mappings":"AAEA;;;;;IAKa,mBAAmB,GAAwB;IACtD,KAAK,EAAE,cAAM,QAAC;QACZ,MAAM,EAAE,EAAE;KACX,IAAC;IACF,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,EAAE;IACb,OAAO,EAAE,EAAE;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/tagging/store/module.ts"],"sourcesContent":["import { TaggingXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the tagging module.\n *\n * @internal\n */\nexport const taggingXStoreModule: TaggingXStoreModule = {\n  state: () => ({\n    config: {\n      sessionTTLMs: 30 * 60 * 1000,\n      queryTaggingDebounceMs: 200\n    },\n    consent: null\n  }),\n  getters: {},\n  mutations: {\n    setSessionDuration(state, sessionTTLMs) {\n      state.config.sessionTTLMs = sessionTTLMs;\n    },\n    setQueryTaggingDebounce(state, queryTaggingDebounceMs) {\n      state.config.queryTaggingDebounceMs = queryTaggingDebounceMs;\n    },\n    setConsent(state, consent) {\n      state.consent = consent;\n    }\n  },\n  actions: {}\n};\n"],"names":[],"mappings":"AAEA;;;;;IAKa,mBAAmB,GAAwB;IACtD,KAAK,EAAE,cAAM,QAAC;QACZ,MAAM,EAAE;YACN,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI;YAC5B,sBAAsB,EAAE,GAAG;SAC5B;QACD,OAAO,EAAE,IAAI;KACd,IAAC;IACF,OAAO,EAAE,EAAE;IACX,SAAS,EAAE;QACT,kBAAkB,YAAC,KAAK,EAAE,YAAY;YACpC,KAAK,CAAC,MAAM,CAAC,YAAY,GAAG,YAAY,CAAC;SAC1C;QACD,uBAAuB,YAAC,KAAK,EAAE,sBAAsB;YACnD,KAAK,CAAC,MAAM,CAAC,sBAAsB,GAAG,sBAAsB,CAAC;SAC9D;QACD,UAAU,YAAC,KAAK,EAAE,OAAO;YACvB,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;SACzB;KACF;IACD,OAAO,EAAE,EAAE;;;;;"}

package/js/x-modules/tagging/wiring.js

@@ -1,11 +1,68 @@
+import { wireServiceWithoutPayload } from '../../wiring/wires.factory.js';
 import { createWiring } from '../../wiring/wiring.utils.js';
+import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory.js';
+import { filter } from '../../wiring/wires.operators.js';
+import { DefaultSessionService } from './service/session.service.js';
 
+/**
+ * `tagging` {@link XModuleName | XModule name}.
+ *
+ * @internal
+ */
+var moduleName = 'tagging';
+/**
+ * WireCommit for {@link TaggingXModule}.
+ *
+ * @internal
+ */
+var wireCommit = namespacedWireCommit(moduleName);
+/**
+ * Wires without payload factory for {@link DefaultSessionService}.
+ */
+var wireSessionServiceWithoutPayload = wireServiceWithoutPayload(DefaultSessionService.instance);
+/**
+ * Clears the session id.
+ *
+ * @public
+ */
+var clearSessionWire = filter(wireSessionServiceWithoutPayload('clearSessionId'), function (consent) { return !consent; });
+/**
+ * Sets the tagging state `consent`.
+ *
+ * @public
+ */
+var setConsent = wireCommit('setConsent');
+/**
+ * Sets the tagging state config `queryTaggingDebounceMs`.
+ *
+ * @public
+ */
+var setQueryTaggingDebounce = wireCommit('setQueryTaggingDebounce');
+/**
+ * Sets the tagging state `sessionTTLMs`.
+ *
+ * @public
+ */
+var setSessionDuration = wireCommit('setSessionDuration');
 /**
  * Wiring configuration for the {@link TaggingXModule | tagging module}.
  *
  * @internal
  */
-var taggingWiring = createWiring({});
+var taggingWiring = createWiring({
+    ConsentProvided: {
+        setConsent: setConsent
+    },
+    ConsentChanged: {
+        clearSessionWire: clearSessionWire
+    },
+    SessionDurationProvided: {
+        setSessionDuration: setSessionDuration
+    },
+    QueryTaggingDebounceProvided: {
+        setQueryTaggingDebounce: setQueryTaggingDebounce
+    }
+});
 
-export { taggingWiring };
+export { setConsent, setQueryTaggingDebounce, setSessionDuration, taggingWiring };
 //# sourceMappingURL=wiring.js.map

package/js/x-modules/tagging/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/tagging/wiring.ts"],"sourcesContent":["import { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * Wiring configuration for the {@link TaggingXModule | tagging module}.\n *\n * @internal\n */\nexport const taggingWiring = createWiring({});\n"],"names":[],"mappings":";;AAEA;;;;;IAKa,aAAa,GAAG,YAAY,CAAC,EAAE;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/tagging/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory';\nimport { wireServiceWithoutPayload } from '../../wiring/wires.factory';\nimport { filter } from '../../wiring/wires.operators';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { DefaultSessionService } from './service/session.service';\n\n/**\n * `tagging` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'tagging';\n\n/**\n * WireCommit for {@link TaggingXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * Wires without payload factory for {@link DefaultSessionService}.\n */\nconst wireSessionServiceWithoutPayload = wireServiceWithoutPayload(DefaultSessionService.instance);\n\n/**\n * Clears the session id.\n *\n * @public\n */\nconst clearSessionWire = filter(\n  wireSessionServiceWithoutPayload('clearSessionId'),\n  consent => !consent\n);\n\n/**\n * Sets the tagging state `consent`.\n *\n * @public\n */\nexport const setConsent = wireCommit('setConsent');\n\n/**\n * Sets the tagging state config `queryTaggingDebounceMs`.\n *\n * @public\n */\nexport const setQueryTaggingDebounce = wireCommit('setQueryTaggingDebounce');\n\n/**\n * Sets the tagging state `sessionTTLMs`.\n *\n * @public\n */\nexport const setSessionDuration = wireCommit('setSessionDuration');\n\n/**\n * Wiring configuration for the {@link TaggingXModule | tagging module}.\n *\n * @internal\n */\nexport const taggingWiring = createWiring({\n  ConsentProvided: {\n    setConsent\n  },\n  ConsentChanged: {\n    clearSessionWire\n  },\n  SessionDurationProvided: {\n    setSessionDuration\n  },\n  QueryTaggingDebounceProvided: {\n    setQueryTaggingDebounce\n  }\n});\n"],"names":[],"mappings":";;;;;;AAMA;;;;;AAKA,IAAM,UAAU,GAAG,SAAS,CAAC;AAE7B;;;;;AAKA,IAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;AAGA,IAAM,gCAAgC,GAAG,yBAAyB,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AAEnG;;;;;AAKA,IAAM,gBAAgB,GAAG,MAAM,CAC7B,gCAAgC,CAAC,gBAAgB,CAAC,EAClD,UAAA,OAAO,IAAI,OAAA,CAAC,OAAO,GAAA,CACpB,CAAC;AAEF;;;;;IAKa,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE;AAEnD;;;;;IAKa,uBAAuB,GAAG,UAAU,CAAC,yBAAyB,EAAE;AAE7E;;;;;IAKa,kBAAkB,GAAG,UAAU,CAAC,oBAAoB,EAAE;AAEnE;;;;;IAKa,aAAa,GAAG,YAAY,CAAC;IACxC,eAAe,EAAE;QACf,UAAU,YAAA;KACX;IACD,cAAc,EAAE;QACd,gBAAgB,kBAAA;KACjB;IACD,uBAAuB,EAAE;QACvB,kBAAkB,oBAAA;KACnB;IACD,4BAA4B,EAAE;QAC5B,uBAAuB,yBAAA;KACxB;CACF;;;;"}

package/js/x-modules/url/components/url-handler.vue.js

@@ -0,0 +1,50 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './url-handler.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("GlobalEvents", {
+    attrs: { target: "window" },
+    on: { popstate: _vm.emitEvents }
+  })
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __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 default __vue_component__;
+//# sourceMappingURL=url-handler.vue.js.map

package/js/x-modules/url/components/url-handler.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"url-handler.vue.js","sources":["../../../../../src/x-modules/url/components/url-handler.vue"],"sourcesContent":["<template>\n  <GlobalEvents @popstate=\"emitEvents\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import GlobalEvents from 'vue-global-events';\n  import { Component } from 'vue-property-decorator';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { UrlParams } from '../../../types/url-params';\n  import { objectFilter } from '../../../utils/object';\n  import { Dictionary } from '../../../utils/types';\n  import { initialUrlState } from '../store/initial-state';\n  import { UrlParamValue } from '../store/types';\n  import { urlXModule } from '../x-module';\n\n  interface ParsedUrlParams {\n    all: UrlParams;\n    extra: Dictionary<unknown>;\n  }\n\n  /**\n   * This component manage the browser URL parameters to perserve them through reloads and browser\n   * history navigation. It allow to configure the default url parameter names using its attributes.\n   * This component doesn't render elements to the DOM.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      GlobalEvents\n    },\n    mixins: [xComponentMixin(urlXModule)]\n  })\n  export default class UrlHandler extends Vue {\n    /**\n     * Computed to know which params we must get from URL. It gets the params names from the initial\n     * state, to get all default params names, and also from the `$attrs` to get the extra params\n     * names to take into account.\n     *\n     * @returns An array with the name of the params.\n     *\n     * @internal\n     */\n    protected get managedParamsNames(): string[] {\n      return Object.keys({ ...initialUrlState, ...this.$attrs });\n    }\n\n    /**\n     * Returns the mapping of the param keys used in the URL is configured through $attrs. This way\n     * we can support any param and extra param, no matters its name.\n     *\n     * @param paramName - The param name to get the Url key.\n     * @returns The key used in the URL for the `paramName` passed.\n     *\n     * @internal\n     */\n    protected getUrlKey(paramName: string): string {\n      return this.$attrs[paramName] ?? paramName;\n    }\n\n    /**\n     * Flag to know if the params were already loaded from the URL.\n     *\n     * @internal\n     */\n    protected urlLoaded = false;\n\n    /**\n     * To emit the Url events just when the URL is load, and before the components mounted events\n     * and state changes, we do it in the created of this component.\n     */\n    created(): void {\n      this.emitEvents();\n    }\n\n    /**\n     * Updates the browser URL with the new {@link UrlParams} using the history `pushState` method.\n     *\n     * @param newUrlParams - The new params to update browser URL.\n     */\n    @XOn('PushableUrlStateChanged')\n    updateUrlWithPush(newUrlParams: UrlParams): void {\n      this.updateUrl(newUrlParams, window.history.pushState.bind(window.history));\n    }\n\n    /**\n     * Updates the browser URL with the new {@link UrlParams} using the history `replaceState`\n     * method.\n     *\n     * @param newUrlParams - The new params to update browser URL.\n     */\n    @XOn('ReplaceableUrlStateChanged')\n    updateUrlWithReplace(newUrlParams: UrlParams): void {\n      this.updateUrl(newUrlParams, window.history.replaceState.bind(window.history));\n    }\n\n    /**\n     * Emits the {@link UrlXEvents.ParamsLoadedFromUrl} XEvent,\n     * the {@link UrlXEvents.ExtraParamsLoadedFromUrl} XEvent and, if there is query, also emits\n     * the  {@link XEventsTypes.UserOpenXProgrammatically}.\n     *\n     * @internal\n     */\n    protected emitEvents(): void {\n      const { all, extra } = this.parseUrlParams();\n      this.$x.emit('ParamsLoadedFromUrl', all);\n      this.$x.emit('ExtraParamsLoadedFromUrl', extra);\n      // TODO: Move this logic from here.\n      if (all.query) {\n        this.$x.emit('UserOpenXProgrammatically');\n      }\n      this.urlLoaded = true;\n    }\n\n    /**\n     * Gets the {@link UrlParams} from the URL, including only the params defined by `paramsNames`.\n     *\n     * @returns ParsedUrlParams obtained from URL.\n     * @internal\n     */\n\n    protected parseUrlParams(): ParsedUrlParams {\n      const urlSearchParams = new URL(window.location.href).searchParams;\n      return this.managedParamsNames.reduce<ParsedUrlParams>(\n        (params, name) => {\n          const urlKey = this.getUrlKey(name);\n          if (urlSearchParams.has(urlKey)) {\n            if (name in initialUrlState) {\n              const urlValue = urlSearchParams.getAll(urlKey);\n              params.all[name] = this.parseUrlParam(name, urlValue);\n            } else {\n              params.all[name] = params.extra[name] = urlSearchParams.get(urlKey);\n            }\n          }\n          return params;\n        },\n        { all: { ...initialUrlState }, extra: {} }\n      );\n    }\n\n    /**\n     * Updates the browser URL with the passed `newUrlParams` and using the browser history method\n     * passed as `historyMethod`. It only updates the browser history if the new URL is different\n     * from the current.\n     *\n     * @param newUrlParams - The new params to add to the browser URL.\n     * @param historyMethod - The browser history method used to add the new URL.\n     *\n     * @internal\n     */\n    protected updateUrl(\n      newUrlParams: UrlParams,\n      historyMethod: History['pushState'] | History['replaceState']\n    ): void {\n      if (this.urlLoaded) {\n        const url = new URL(window.location.href);\n        this.deleteUrlParameters(url);\n        this.setUrlParameters(url, newUrlParams);\n        if (url.href.replace(/\\+/g, '%20') !== window.location.href) {\n          historyMethod({ ...window.history.state }, document.title, url.href);\n        }\n      }\n    }\n\n    /**\n     * Deletes all the parameters in the passed URL.\n     *\n     * @param url - The URL to remove parameters from.\n     * @internal\n     * **/\n    protected deleteUrlParameters(url: URL): void {\n      this.managedParamsNames.forEach(paramName =>\n        url.searchParams.delete(this.getUrlKey(paramName))\n      );\n    }\n\n    /**\n     * Set all the provided parameters to the url with the mapped key.\n     *\n     * @param url - The current URL.\n     * @param urlParams - The list of parameters to add.\n     * @remarks The params are filtered because there maybe received extra params which will not be\n     * managed by URL. This is defined by the `managedParamsNames` computed. Also, the parameters\n     * are sorted Alphabetically to produce always the same URL with the same parameters.This is\n     * important for SEO purposes.\n     *\n     * @internal\n     * **/\n    protected setUrlParameters(url: URL, urlParams: UrlParams): void {\n      const filteredParams = objectFilter(urlParams, paramName =>\n        this.managedParamsNames.includes(paramName as string)\n      );\n      const sortedParameters = this.sortParams(filteredParams);\n      sortedParameters.forEach(([paramName, paramValue]) => {\n        const urlParamKey = this.getUrlKey(paramName);\n        if (Array.isArray(paramValue)) {\n          paramValue.forEach(value => {\n            url.searchParams.append(urlParamKey, String(value));\n          });\n        } else {\n          url.searchParams.set(urlParamKey, String(paramValue));\n        }\n      });\n    }\n\n    /**\n     * Sorts the params in a tuple array [key,value] to generate always the same URL with the params\n     * in the same order.\n     *\n     * @param urlParams - The {@link UrlParams} to sort.\n     * @returns An array of tuples with the key-value of each paramter, sorted by key.\n     * @internal\n     */\n    protected sortParams(urlParams: UrlParams): Array<[string, unknown]> {\n      return Object.entries(urlParams).sort(([param1], [param2]) => {\n        return param1 < param2 ? -1 : 1;\n      });\n    }\n\n    /**\n     * Returns the URL param value parsed depending on its type in the initial store state. As we\n     * can not know what type can have an extra param, all extra params are parsed as strings. We\n     * know if it is an extra param because it is not in the initial state.\n     *\n     * @param name - The name of the param in {@link UrlParams}.\n     * @param value - The `URLSearchParams` value as an arry of strings.\n     * @returns The parsed value.\n     *\n     * @internal\n     */\n    protected parseUrlParam(name: string, value: string[]): UrlParamValue {\n      switch (typeof initialUrlState[name]) {\n        case 'number':\n          return Number(value[0]);\n        case 'boolean':\n          return value[0].toLowerCase() === 'true';\n        case 'string':\n          return value[0];\n        default:\n          // array\n          return value;\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ParamsLoadedFromUrl`](./../../api/x-components.urlxevents.paramsloadedfromurl.md)\n- [`ExtraParamsLoadedFromUrl`](./../../api/x-components.urlxevents.extraparamsloadedfromurl.md)\n- [`UserOpenXProgrammatically`](./../../api/x-components.xeventstypes.useropenxprogrammatically.md)\n\n## See it in action\n\nThis component manages the browser URL parameters to preserve them through reloads and browser\nhistory navigation. It allow to configure the default url parameter names using its attributes. This\ncomponent doesn't render elements to the DOM.\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n  <UrlHandler />\n</template>\n\n<script>\n  import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n  export default {\n    name: 'UrlHandlerDemo',\n    components: {\n      UrlHandler\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `UrlHandler` component changes the following query parameter names:\n\n- `query` to be `q`.\n- `page` to be `p`.\n- `filter` to be `f`\n- `sort` to be `s`\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n  <UrlHandler query=\"q\" page=\"p\" filter=\"f\" sort=\"s\" />\n</template>\n\n<script>\n  import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n  export default {\n    name: 'UrlHandlerDemo',\n    components: {\n      UrlHandler\n    }\n  };\n</script>\n```\n\n### Play with events\n\nThe `UrlHandler` will emit the `ParamsLoadedFromUrl` when the page is loaded.\n\nThe `UrlHandler` will emit the `ExtraParamsLoadedFromUrl` when the page is loaded with an extra\nparam configured and with a value in URL.\n\nThe `UrlHandler` will emit the `UserOpenXProgrammatically` when the page is loaded with a query in\nthe URL.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}