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

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

@@ -1,103 +1,35 @@
-import script from './search-input.vue2.js';
+import _sfc_main from './search-input.vue2.js';
+import { openBlock, createElementBlock, withKeys, withModifiers } from 'vue';
 import './search-input.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "input",
-    _vm._g(
-      {
-        ref: "input",
-        staticClass: "x-search-input x-input",
-        attrs: {
-          maxlength: _vm.maxLength,
-          autocomplete: "off",
-          enterkeyhint: "search",
-          inputmode: "search",
-          type: "search",
-          "data-test": "search-input",
-          "aria-label": _vm.searchInputMessage,
-        },
-        domProps: { value: _vm.query },
-        on: {
-          mouseenter: _vm.emitUserHoveredInSearchBox,
-          mouseleave: _vm.emitUserHoveredOutSearchBox,
-          blur: _vm.emitUserBlurredSearchBox,
-          click: _vm.emitUserClickedSearchBox,
-          focus: _vm.emitUserFocusedSearchBox,
-          input: _vm.emitUserIsTypingAQueryEvents,
-          keydown: [
-            function ($event) {
-              if (
-                !$event.type.indexOf("key") &&
-                _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
-              ) {
-                return null
-              }
-              return _vm.emitUserPressedEnterKey.apply(null, arguments)
-            },
-            function ($event) {
-              if (
-                !$event.type.indexOf("key") &&
-                _vm._k($event.keyCode, "up", 38, $event.key, [
-                  "Up",
-                  "ArrowUp",
-                ]) &&
-                _vm._k($event.keyCode, "down", 40, $event.key, [
-                  "Down",
-                  "ArrowDown",
-                ])
-              ) {
-                return null
-              }
-              $event.preventDefault();
-              return _vm.emitUserPressedArrowKey.apply(null, arguments)
-            },
-          ],
-          beforeinput: _vm.preventSpecialKey,
-        },
-      },
-      _vm.$listeners
-    )
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+const _hoisted_1 = ["maxlength", "value"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("input", {
+    ref: "inputElement",
+    onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.emitUserHoveredInSearchBox && _ctx.emitUserHoveredInSearchBox(...args)),
+    onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.emitUserHoveredOutSearchBox && _ctx.emitUserHoveredOutSearchBox(...args)),
+    onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.emitUserBlurredSearchBox && _ctx.emitUserBlurredSearchBox(...args)),
+    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.emitUserClickedSearchBox && _ctx.emitUserClickedSearchBox(...args)),
+    onFocus: _cache[4] || (_cache[4] = (...args) => _ctx.emitUserFocusedSearchBox && _ctx.emitUserFocusedSearchBox(...args)),
+    onInput: _cache[5] || (_cache[5] = (...args) => _ctx.emitUserIsTypingAQueryEvents && _ctx.emitUserIsTypingAQueryEvents(...args)),
+    onKeydown: [
+      _cache[6] || (_cache[6] = withKeys((...args) => _ctx.emitUserPressedEnterKey && _ctx.emitUserPressedEnterKey(...args), ["enter"])),
+      _cache[7] || (_cache[7] = withKeys(withModifiers((...args) => _ctx.emitUserPressedArrowKey && _ctx.emitUserPressedArrowKey(...args), ["prevent"]), ["up", "down"]))
+    ],
+    onBeforeinput: _cache[8] || (_cache[8] = (...args) => _ctx.preventSpecialKey && _ctx.preventSpecialKey(...args)),
+    maxlength: _ctx.maxLength,
+    value: _ctx.query,
+    autocomplete: "off",
+    class: "x-search-input x-input",
+    enterkeyhint: "search",
+    inputmode: "search",
+    type: "search",
+    "data-test": "search-input",
+    "aria-label": "type your query here"
+  }, null, 40, _hoisted_1);
+}
+var searchInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ae31d02d"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-367fe7aa";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { searchInput as default };
 //# sourceMappingURL=search-input.vue.js.map

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    @mouseenter=\"emitUserHoveredInSearchBox\"\n    @mouseleave=\"emitUserHoveredOutSearchBox\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    @beforeinput=\"preventSpecialKey\"\n    v-on=\"$listeners\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-search-input x-input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n    :aria-label=\"searchInputMessage\"\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    protected searchInputMessage = 'type your query here';\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     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n     * are emitted the search input is focused.\n     *\n     * @internal\n     */\n    @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n    focusInput(): void {\n      this.$refs.input?.focus();\n    }\n\n    protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} or\n     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    @XOn(['UserAcceptedAQuery', '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} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$refs.input,\n        feature: 'search_box'\n      };\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n     *\n     * @internal\n     */\n    protected emitUserHoveredInSearchBox(): void {\n      this.$x.emit('UserHoveredInSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n     *\n     * @internal\n     */\n    protected emitUserHoveredOutSearchBox(): void {\n      this.$x.emit('UserHoveredOutSearchBox', undefined, { target: this.$refs.input });\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, { target: this.$refs.input });\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, { target: this.$refs.input });\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, { target: this.$refs.input });\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, { target: this.$refs.input });\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.createEventMetadata());\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.createEventMetadata());\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.createEventMetadata());\n    }\n\n    /**\n     * Prevents the user from either typing or pasting special characters in the input field.\n     *\n     * @internal\n     * @param event - The event that will be checked for special characters.\n     */\n    protected preventSpecialKey(event: InputEvent): void {\n      if (/[<>]/.test(event.data ?? '')) {\n        event.preventDefault();\n      }\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`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\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 live\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 live\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<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput\n      @UserPressedEnterKey=\"value = 'enter'\"\n      @UserFocusedSearchBox=\"hasFocus = true\"\n      @UserBlurredSearchBox=\"hasFocus = false\"\n      @UserIsTypingAQuery=\"value = 'typing'\"\n    />\n    <strong>{{ value }}</strong>\n    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n  </div>\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  };\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 “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\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 { SearchInput, ClearSearchInput, SearchButton } 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      SearchButton,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"inputElement\"\n    @mouseenter=\"emitUserHoveredInSearchBox\"\n    @mouseleave=\"emitUserHoveredOutSearchBox\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    @beforeinput=\"preventSpecialKey\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-search-input x-input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n    aria-label=\"type your query here\"\n  />\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, onMounted, ref } from 'vue';\n  import { ArrowKey } from '../../../utils';\n  import { debounce } from '../../../utils/debounce';\n  import { DebouncedFunction } from '../../../utils/types';\n  import { XEvent } from '../../../wiring/events.types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\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  export default defineComponent({\n    name: 'SearchInput',\n    xModule: searchBoxXModule.name,\n    props: {\n      /**\n       * Maximum characters allowed in the input search.\n       */\n      maxLength: {\n        type: Number,\n        default: 64\n      },\n      /**\n       * Allows input autofocus when the search field is rendered.\n       */\n      autofocus: {\n        type: Boolean,\n        default: true\n      },\n      /**\n       * Enables the auto-accept query after debounce.\n       */\n      instant: {\n        type: Boolean,\n        default: true\n      },\n      /**\n       * Debounce time for the instant.\n       */\n      instantDebounceInMs: {\n        type: Number,\n        default: 500\n      }\n    },\n    setup: function (props) {\n      const $x = use$x();\n\n      const { query } = useState('searchBox', ['query']);\n\n      const inputElement = ref<HTMLInputElement>();\n\n      let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>;\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => {\n        return {\n          target: inputElement.value,\n          feature: 'search_box'\n        };\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      const emitUserAcceptedAQuery = (query: string): void => {\n        $x.emit('UserAcceptedAQuery', query, createEventMetadata());\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      const emitDebouncedUserAcceptedAQuery = (query: string): void => {\n        if (props.instant) {\n          if (!debouncedUserAcceptedAQuery) {\n            debouncedUserAcceptedAQuery = debounce(\n              emitUserAcceptedAQuery,\n              props.instantDebounceInMs\n            );\n          }\n          debouncedUserAcceptedAQuery(query);\n        }\n      };\n\n      /**\n       * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n       *\n       * @internal\n       */\n      const emitUserHoveredInSearchBox = (): void => {\n        $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value });\n      };\n\n      /**\n       * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n       *\n       * @internal\n       */\n      const emitUserHoveredOutSearchBox = (): void => {\n        $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value });\n      };\n\n      /**\n       * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n       *\n       * @internal\n       */\n      const emitUserBlurredSearchBox = (): void => {\n        $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value });\n      };\n\n      /**\n       * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n       *\n       * @internal\n       */\n      const emitUserClickedSearchBox = (): void => {\n        $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value });\n      };\n\n      /**\n       * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n       *\n       * @internal\n       */\n      const emitUserFocusedSearchBox = (): void => {\n        $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value });\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      const emitUserIsTypingAQueryEvents = (): void => {\n        const query = inputElement.value?.value ?? '';\n\n        $x.emit('UserIsTypingAQuery', query, { target: inputElement.value });\n        if (query.trim()) {\n          emitDebouncedUserAcceptedAQuery(query);\n        } else {\n          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      const emitUserPressedArrowKey = (event: KeyboardEvent): void => {\n        $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata());\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      const emitUserPressedEnterKey = (): void => {\n        const query = inputElement.value?.value.trim();\n        if (!!query && query.length > 0) {\n          $x.emit('UserPressedEnterKey', query, createEventMetadata());\n          emitUserAcceptedAQuery(query);\n        }\n        inputElement.value?.blur();\n      };\n\n      /**\n       * Prevents the user from either typing or pasting special characters in the input field.\n       *\n       * @internal\n       * @param event - The event that will be checked for special characters.\n       */\n      const preventSpecialKey = (event: InputEvent): void => {\n        if (/[<>]/.test(event.data ?? '')) {\n          event.preventDefault();\n        }\n      };\n\n      /**\n       * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n       * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n       * are emitted the search input is focused.\n       *\n       * @internal\n       */\n      function focusInput(): void {\n        inputElement.value?.focus();\n      }\n      ['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>\n        $x.on(event as XEvent, false).subscribe(focusInput)\n      );\n\n      /**\n       * When event {@link XEventsTypes.UserAcceptedAQuery} or\n       * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n       * {@link XEvent} `UserAcceptedAQuery` is canceled.\n       *\n       * @internal\n       */\n      function cancelDebouncedUserAcceptedAQuery(): void {\n        debouncedUserAcceptedAQuery?.cancel();\n      }\n      ['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>\n        $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery)\n      );\n\n      onMounted(() => {\n        if (props.autofocus) {\n          focusInput();\n        }\n      });\n\n      return {\n        query,\n        inputElement,\n        emitUserHoveredInSearchBox,\n        emitUserHoveredOutSearchBox,\n        emitUserBlurredSearchBox,\n        emitUserClickedSearchBox,\n        emitUserFocusedSearchBox,\n        emitUserIsTypingAQueryEvents,\n        emitUserPressedEnterKey,\n        emitUserPressedArrowKey,\n        preventSpecialKey\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" 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`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\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 live\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 live\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<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput\n      @UserPressedEnterKey=\"value = 'enter'\"\n      @UserFocusedSearchBox=\"hasFocus = true\"\n      @UserBlurredSearchBox=\"hasFocus = false\"\n      @UserIsTypingAQuery=\"value = 'typing'\"\n    />\n    <strong>{{ value }}</strong>\n    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n  </div>\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  };\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 “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\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 { SearchInput, ClearSearchInput, SearchButton } 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      SearchButton,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","query"],"mappings":";;;;;;SAEQ,WAAc,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACjBA,SAAU,EAAA,EAAAC,kBAAA,CAAA,OAAA,EAAA;AAAA,IACV,GAAA,EAAA,cAAA;AAAA,IACA,YAAA,EAAI,uCAAE,IAAwB,CAAA,0BAAA,IAAA,IAAA,CAAA,0BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAC9B,YAAA,EAAK,uCAAE,IAAwB,CAAA,2BAAA,IAAA,IAAA,CAAA,2BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAC/B,QAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,OAAO,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CATZ,uBASoB,4BAAuB,IAAA,IAAA,CAAA,4BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,SAAA,EAAA;;AAEtC,MAAA,MAAA,CAAA,CAAA,CAAA,KAAW,uCAAE,IAAiB,KAAA,IAAA,CAAA,uBAAA,IAAA,IAAA,CAAA,uBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,CAAA,CAAA,CAAA;AAAA,KAC9B;AAAA,IACA,eAAOC,MAAK,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,iBAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACb,SAAa,EAAA,IAAA,CAAA,SAAA;AAAA,IACb,KAAM,EAAA,IAAA,CAAA,KAAA;AAAA,IACN,YAAa,EAAA,KAAA;AAAA,IACb,KAAA,EAAA,wBAAA;AAAA,IACA,YAAa,EAAA,QAAA;AAAA,IACb,SAAS,EAAA,QAAA;AAAA,IACT,IAAA,EAAA,QAAA;AAAA,IAAA,WAAA,EAAA,cAAA;;;;;;;;"}

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

@@ -1,10 +1,7 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import { XOn } from '../../../components/decorators/bus.decorators.js';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, ref, onMounted } from 'vue';
 import { debounce } from '../../../utils/debounce.js';
+import { use$x } from '../../../composables/use-_x.js';
+import { useState } from '../../../composables/use-state.js';
 import { searchBoxXModule } from '../x-module.js';
 
 /**
@@ -13,203 +10,219 @@ import { searchBoxXModule } from '../x-module.js';
  *
  * @public
  */
-let SearchInput = class SearchInput extends Vue {
-    constructor() {
-        super(...arguments);
-        this.searchInputMessage = 'type your query here';
-    }
-    /**
-     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or
-     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}
-     * are emitted the search input is focused.
-     *
-     * @internal
-     */
-    focusInput() {
-        this.$refs.input?.focus();
-    }
-    /**
-     * When event {@link XEventsTypes.UserAcceptedAQuery} or
-     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit
-     * {@link XEvent} `UserAcceptedAQuery` is canceled.
-     *
-     * @internal
-     */
-    cancelDebouncedUserAcceptedAQuery() {
-        this.debouncedUserAcceptedAQuery?.cancel();
-    }
-    mounted() {
-        if (this.autofocus) {
-            this.focusInput();
+var _sfc_main = defineComponent({
+    name: 'SearchInput',
+    xModule: searchBoxXModule.name,
+    props: {
+        /**
+         * Maximum characters allowed in the input search.
+         */
+        maxLength: {
+            type: Number,
+            default: 64
+        },
+        /**
+         * Allows input autofocus when the search field is rendered.
+         */
+        autofocus: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Enables the auto-accept query after debounce.
+         */
+        instant: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Debounce time for the instant.
+         */
+        instantDebounceInMs: {
+            type: Number,
+            default: 500
         }
-    }
-    /**
-     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in
-     * `instantDebounceInMs` prop.
-     *
-     * @internal
-     * @param query - The query that will be emitted.
-     */
-    emitDebouncedUserAcceptedAQuery(query) {
-        if (this.instant) {
-            if (!this.debouncedUserAcceptedAQuery) {
-                this.debouncedUserAcceptedAQuery = debounce(this.emitUserAcceptedAQuery.bind(this), this.instantDebounceInMs);
+    },
+    setup: function (props) {
+        const $x = use$x();
+        const { query } = useState('searchBox', ['query']);
+        const inputElement = ref();
+        let debouncedUserAcceptedAQuery;
+        /**
+         * Generates the {@link WireMetadata} object omitting the moduleName.
+         *
+         * @returns The {@link WireMetadata} object omitting the moduleName.
+         * @internal
+         */
+        const createEventMetadata = () => {
+            return {
+                target: inputElement.value,
+                feature: 'search_box'
+            };
+        };
+        /**
+         * Emits {@link XEventsTypes.UserAcceptedAQuery} event.
+         *
+         * @remarks It is necessary in a separated method to use it as the parameter of debounce in
+         * emitDebouncedUserAcceptedAQuery method.
+         * @internal
+         * @param query - The query that will be emitted.
+         */
+        const emitUserAcceptedAQuery = (query) => {
+            $x.emit('UserAcceptedAQuery', query, createEventMetadata());
+        };
+        /**
+         * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in
+         * `instantDebounceInMs` prop.
+         *
+         * @internal
+         * @param query - The query that will be emitted.
+         */
+        const emitDebouncedUserAcceptedAQuery = (query) => {
+            if (props.instant) {
+                if (!debouncedUserAcceptedAQuery) {
+                    debouncedUserAcceptedAQuery = debounce(emitUserAcceptedAQuery, props.instantDebounceInMs);
+                }
+                debouncedUserAcceptedAQuery(query);
             }
-            this.debouncedUserAcceptedAQuery(query);
-        }
-    }
-    /**
-     * Generates the {@link WireMetadata} object omitting the moduleName.
-     *
-     * @returns The {@link WireMetadata} object omitting the moduleName.
-     * @internal
-     */
-    createEventMetadata() {
-        return {
-            target: this.$refs.input,
-            feature: 'search_box'
         };
-    }
-    /**
-     * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.
-     *
-     * @internal
-     */
-    emitUserHoveredInSearchBox() {
-        this.$x.emit('UserHoveredInSearchBox', undefined, { target: this.$refs.input });
-    }
-    /**
-     * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.
-     *
-     * @internal
-     */
-    emitUserHoveredOutSearchBox() {
-        this.$x.emit('UserHoveredOutSearchBox', undefined, { target: this.$refs.input });
-    }
-    /**
-     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.
-     *
-     * @internal
-     */
-    emitUserBlurredSearchBox() {
-        this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });
-    }
-    /**
-     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.
-     *
-     * @internal
-     */
-    emitUserClickedSearchBox() {
-        this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });
-    }
-    /**
-     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.
-     *
-     * @internal
-     */
-    emitUserFocusedSearchBox() {
-        this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });
-    }
-    /**
-     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something
-     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user
-     * removes all characters in the search-box.
-     *
-     * @internal
-     */
-    emitUserIsTypingAQueryEvents() {
-        const query = this.$refs.input.value;
-        this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });
-        if (query.trim()) {
-            this.emitDebouncedUserAcceptedAQuery(query);
-        }
-        else {
-            this.cancelDebouncedUserAcceptedAQuery();
-        }
-    }
-    /**
-     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.
-     *
-     * @param event - The keyboard event with the arrow key pressed.
-     * @internal
-     */
-    emitUserPressedArrowKey(event) {
-        this.$x.emit('UserPressedArrowKey', event.key, this.createEventMetadata());
-    }
-    /**
-     * Emits multiple events when the user pressed the enter key.
-     *
-     * @remarks
-     * Emitted events are:
-     * {@link SearchBoxXEvents.UserPressedEnterKey}
-     * {@link XEventsTypes.UserAcceptedAQuery}
-     *
-     * @internal
-     */
-    emitUserPressedEnterKey() {
-        const query = this.$refs.input.value.trim();
-        if (query.length > 0) {
-            this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());
-            this.emitUserAcceptedAQuery(query);
+        /**
+         * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.
+         *
+         * @internal
+         */
+        const emitUserHoveredInSearchBox = () => {
+            $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value });
+        };
+        /**
+         * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.
+         *
+         * @internal
+         */
+        const emitUserHoveredOutSearchBox = () => {
+            $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value });
+        };
+        /**
+         * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.
+         *
+         * @internal
+         */
+        const emitUserBlurredSearchBox = () => {
+            $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value });
+        };
+        /**
+         * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.
+         *
+         * @internal
+         */
+        const emitUserClickedSearchBox = () => {
+            $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value });
+        };
+        /**
+         * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.
+         *
+         * @internal
+         */
+        const emitUserFocusedSearchBox = () => {
+            $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value });
+        };
+        /**
+         * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something
+         * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user
+         * removes all characters in the search-box.
+         *
+         * @internal
+         */
+        const emitUserIsTypingAQueryEvents = () => {
+            const query = inputElement.value?.value ?? '';
+            $x.emit('UserIsTypingAQuery', query, { target: inputElement.value });
+            if (query.trim()) {
+                emitDebouncedUserAcceptedAQuery(query);
+            }
+            else {
+                cancelDebouncedUserAcceptedAQuery();
+            }
+        };
+        /**
+         * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.
+         *
+         * @param event - The keyboard event with the arrow key pressed.
+         * @internal
+         */
+        const emitUserPressedArrowKey = (event) => {
+            $x.emit('UserPressedArrowKey', event.key, createEventMetadata());
+        };
+        /**
+         * Emits multiple events when the user pressed the enter key.
+         *
+         * @remarks
+         * Emitted events are:
+         * {@link SearchBoxXEvents.UserPressedEnterKey}
+         * {@link XEventsTypes.UserAcceptedAQuery}
+         *
+         * @internal
+         */
+        const emitUserPressedEnterKey = () => {
+            const query = inputElement.value?.value.trim();
+            if (!!query && query.length > 0) {
+                $x.emit('UserPressedEnterKey', query, createEventMetadata());
+                emitUserAcceptedAQuery(query);
+            }
+            inputElement.value?.blur();
+        };
+        /**
+         * Prevents the user from either typing or pasting special characters in the input field.
+         *
+         * @internal
+         * @param event - The event that will be checked for special characters.
+         */
+        const preventSpecialKey = (event) => {
+            if (/[<>]/.test(event.data ?? '')) {
+                event.preventDefault();
+            }
+        };
+        /**
+         * When event {@link XEventsTypes.UserReachedEmpathizeTop} or
+         * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}
+         * are emitted the search input is focused.
+         *
+         * @internal
+         */
+        function focusInput() {
+            inputElement.value?.focus();
         }
-        this.$refs.input?.blur();
-    }
-    /**
-     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.
-     *
-     * @remarks It is necessary in a separated method to use it as the parameter of debounce in
-     * emitDebouncedUserAcceptedAQuery method.
-     * @internal
-     * @param query - The query that will be emitted.
-     */
-    emitUserAcceptedAQuery(query) {
-        this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());
-    }
-    /**
-     * Prevents the user from either typing or pasting special characters in the input field.
-     *
-     * @internal
-     * @param event - The event that will be checked for special characters.
-     */
-    preventSpecialKey(event) {
-        if (/[<>]/.test(event.data ?? '')) {
-            event.preventDefault();
+        ['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event => $x.on(event, false).subscribe(focusInput));
+        /**
+         * When event {@link XEventsTypes.UserAcceptedAQuery} or
+         * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit
+         * {@link XEvent} `UserAcceptedAQuery` is canceled.
+         *
+         * @internal
+         */
+        function cancelDebouncedUserAcceptedAQuery() {
+            debouncedUserAcceptedAQuery?.cancel();
         }
+        ['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event => $x.on(event, false).subscribe(cancelDebouncedUserAcceptedAQuery));
+        onMounted(() => {
+            if (props.autofocus) {
+                focusInput();
+            }
+        });
+        return {
+            query,
+            inputElement,
+            emitUserHoveredInSearchBox,
+            emitUserHoveredOutSearchBox,
+            emitUserBlurredSearchBox,
+            emitUserClickedSearchBox,
+            emitUserFocusedSearchBox,
+            emitUserIsTypingAQueryEvents,
+            emitUserPressedEnterKey,
+            emitUserPressedArrowKey,
+            preventSpecialKey
+        };
     }
-};
-__decorate([
-    Prop({ default: 64 })
-], SearchInput.prototype, "maxLength", void 0);
-__decorate([
-    Prop({ default: true })
-], SearchInput.prototype, "autofocus", void 0);
-__decorate([
-    Prop({ default: true })
-], SearchInput.prototype, "instant", void 0);
-__decorate([
-    Prop({ default: 500 })
-], SearchInput.prototype, "instantDebounceInMs", void 0);
-__decorate([
-    Prop({ default: () => ['ArrowRight'] })
-], SearchInput.prototype, "autocompleteKeyboardKeys", void 0);
-__decorate([
-    Prop({ default: 'QuerySuggestionsChanged' })
-], SearchInput.prototype, "autocompleteSuggestionsEvent", void 0);
-__decorate([
-    State('searchBox', 'query')
-], SearchInput.prototype, "query", void 0);
-__decorate([
-    XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])
-], SearchInput.prototype, "focusInput", null);
-__decorate([
-    XOn(['UserAcceptedAQuery', 'UserClearedQuery'])
-], SearchInput.prototype, "cancelDebouncedUserAcceptedAQuery", null);
-SearchInput = __decorate([
-    Component({
-        mixins: [xComponentMixin(searchBoxXModule)]
-    })
-], SearchInput);
-var script = SearchInput;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=search-input.vue2.js.map