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

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

@@ -1,9 +1,6 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import __vue_component__ from '../../../components/base-event-button.vue.js';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, ref, computed } from 'vue';
+import BaseEventButton from '../../../components/base-event-button.vue.js';
+import { useState } from '../../../composables/use-state.js';
 import { searchBoxXModule } from '../x-module.js';
 
 /**
@@ -17,37 +14,30 @@ import { searchBoxXModule } from '../x-module.js';
  *
  * @public
  */
-let ClearSearchInput = class ClearSearchInput extends Vue {
-    constructor() {
-        super(...arguments);
+var _sfc_main = defineComponent({
+    name: 'ClearSearchInput',
+    components: { BaseEventButton },
+    xModule: searchBoxXModule.name,
+    setup: function () {
+        const { query } = useState('searchBox', ['query']);
         /**
          * The events dictionary that are going to be emitted when the button is pressed.
          *
          * @internal
          */
-        this.clearSearchInputEvents = {
+        const clearSearchInputEvents = ref({
             UserPressedClearSearchBoxButton: undefined
-        };
-    }
-    get isQueryEmpty() {
-        return this.query.length === 0;
-    }
-    get dynamicClasses() {
+        });
+        const isQueryEmpty = computed(() => query.value.length === 0);
+        const dynamicClasses = computed(() => ({
+            'x-clear-search-input--has-empty-query': isQueryEmpty.value
+        }));
         return {
-            'x-clear-search-input--has-empty-query': this.isQueryEmpty
+            dynamicClasses,
+            clearSearchInputEvents
         };
     }
-};
-__decorate([
-    State('searchBox', 'query')
-], ClearSearchInput.prototype, "query", void 0);
-ClearSearchInput = __decorate([
-    Component({
-        components: { BaseEventButton: __vue_component__ },
-        mixins: [xComponentMixin(searchBoxXModule)]
-    })
-], ClearSearchInput);
-var script = ClearSearchInput;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=clear-search-input.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"clear-search-input.vue2.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to delete the current query.\n   *\n   * @remarks\n   * A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n   * and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear\n   * the current query.\n   * It also adds `x-clear-search-input--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class ClearSearchInput 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 dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-search-input--has-empty-query': this.isQueryEmpty\n      };\n    }\n\n    /**\n     * The events dictionary that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearSearchInputEvents: Partial<XEventsTypes> = {\n      UserPressedClearSearchBoxButton: undefined\n    };\n  }\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;AAsBE;;;;;;;;;;AAUG;AAKY,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,GAAG,CAAA;AAAlC,IAAA,WAAA,GAAA;;AAcb;;;;AAIG;AACO,QAAA,IAAA,CAAA,sBAAsB,GAA0B;AACxD,YAAA,+BAA+B,EAAE,SAAS;SAC3C,CAAC;KACH;AAlBC,IAAA,IAAc,YAAY,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;KAChC;AAED,IAAA,IAAc,cAAc,GAAA;QAC1B,OAAO;YACL,uCAAuC,EAAE,IAAI,CAAC,YAAY;SAC3D,CAAC;KACH;CAUF,CAAA;AApBC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC;AACN,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAFH,gBAAgB,GAAA,UAAA,CAAA;AAJpC,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;AAC/B,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;KAC5C,CAAC;AACmB,CAAA,EAAA,gBAAgB,CAsBpC,CAAA;aAtBoB,gBAAgB;;;;"}
+{"version":3,"file":"clear-search-input.vue2.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-search-input x-button\"\n    :class=\"dynamicClasses\"\n    :events=\"clearSearchInputEvents\"\n    data-test=\"clear-search-input\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, computed, ref } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { useState } from '../../../composables/use-state';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to delete the current query.\n   *\n   * @remarks\n   * A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n   * and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear\n   * the current query.\n   * It also adds `x-clear-search-input--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ClearSearchInput',\n    components: { BaseEventButton },\n    xModule: searchBoxXModule.name,\n    setup: function () {\n      const { query } = useState('searchBox', ['query']);\n\n      /**\n       * The events dictionary that are going to be emitted when the button is pressed.\n       *\n       * @internal\n       */\n      const clearSearchInputEvents = ref({\n        UserPressedClearSearchBoxButton: undefined\n      });\n\n      const isQueryEmpty = computed(() => query.value.length === 0);\n\n      const dynamicClasses = computed<VueCSSClasses>(() => ({\n        'x-clear-search-input--has-empty-query': isQueryEmpty.value\n      }));\n\n      return {\n        dynamicClasses,\n        clearSearchInputEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserPressedClearSearchBoxButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserClearedQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nHere a basic example of how the clear button is rendered.\n\n_Type any term in the input field and then click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script>\n  import { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, a custom text is passed in the default slot instead of the default text to\ncustomize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <ClearSearchInput>Clear</ClearSearchInput>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedClearSearchBoxButton` event is implemented, triggering the message\n“clear” when the clear search input button is clicked.\n\n_Click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <ClearSearchInput @UserPressedClearSearchBoxButton=\"message = 'clear'\">Clear</ClearSearchInput>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `ClearSearchInput`\ncomponent communicates with the [`SearchInput`](./search-input.md), deleting the search term\nentered.\n\n_Type any term in the input field and then click the icon button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAmBE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,EAAE,eAAc,EAAG;IAC/B,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE,YAAA;AACL,QAAA,MAAM,EAAE,OAAQ,GAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AAElD;;;;AAIE;QACF,MAAM,sBAAuB,GAAE,GAAG,CAAC;AACjC,YAAA,+BAA+B,EAAE,SAAQ;AAC1C,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;AAE7D,QAAA,MAAM,cAAe,GAAE,QAAQ,CAAgB,OAAO;YACpD,uCAAuC,EAAE,YAAY,CAAC,KAAI;AAC3D,SAAA,CAAC,CAAC,CAAA;QAEH,OAAO;YACL,cAAc;YACd,sBAAqB;SACtB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,61 +1,34 @@
-import script from './search-button.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './search-button.vue2.js';
+import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createElementVNode } from 'vue';
+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(
+const _hoisted_1 = /* @__PURE__ */ createElementVNode(
+  "span",
+  { class: "x-icon" },
+  "\u2315",
+  -1
+  /* HOISTED */
+);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
     "button",
     {
-      staticClass: "x-search-button x-button",
-      class: _vm.dynamicClasses,
-      attrs: { "data-test": "search-button" },
-      on: { click: _vm.emitEvents },
+      ref: "buttonRef",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args)),
+      class: normalizeClass(["x-search-button x-button", _ctx.dynamicClasses]),
+      "data-test": "search-button"
     },
     [
-      _vm._t("default", function () {
-        return [_c("span", { staticClass: "x-icon" }, [_vm._v("⌕")])]
-      }),
+      createCommentVNode(" @slot _Required_. Button content (text, icon, or both) "),
+      renderSlot(_ctx.$slots, "default", {}, () => [
+        _hoisted_1
+      ])
     ],
     2
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
+    /* CLASS */
   );
+}
+var searchButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { searchButton as default };
 //# sourceMappingURL=search-button.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"emitEvents\"\n    class=\"x-search-button x-button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { 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  })\n  export 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     * 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.$el as HTMLElement,\n        feature: 'search_box'\n      };\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, this.createEventMetadata());\n        this.$x.emit('UserPressedSearchButton', this.query, this.createEventMetadata());\n      }\n    }\n\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-search-button--has-empty-query': this.isQueryEmpty\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`]https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query;\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchButton, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton,\n      SearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    @click=\"emitEvents\"\n    class=\"x-search-button x-button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../../../utils/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 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  export default defineComponent({\n    name: 'SearchButton',\n    xModule: searchBoxXModule.name,\n    setup: function () {\n      const $x = use$x();\n\n      const buttonRef = ref<HTMLElement | null>(null);\n\n      const query: ComputedRef<string> = useState('searchBox', ['query']).query;\n\n      const isQueryEmpty = computed(() => query.value.length === 0);\n\n      const dynamicClasses = computed<VueCSSClasses>(() => ({\n        'x-search-button--has-empty-query': isQueryEmpty.value\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      function createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n        return {\n          target: buttonRef.value,\n          feature: 'search_box'\n        };\n      }\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      function emitEvents() {\n        if (!isQueryEmpty.value) {\n          $x.emit('UserAcceptedAQuery', query.value, createEventMetadata());\n          $x.emit('UserPressedSearchButton', query.value, createEventMetadata());\n        }\n      }\n\n      return {\n        dynamicClasses,\n        buttonRef,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`]https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query;\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchButton, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton,\n      SearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_renderSlot"],"mappings":";;;;;;;;;;;SAEQ,WAAW,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACdA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,WAAA;AAAA,MAEL,gBAAU,CAAe,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,0BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAEzB,MAAA,WAAA,EAAA,eAAA;AAAA,KAAA;AACA,IAAA;AAAA,MAAmCC,kBAAA,CAAA,0DAAA,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;;;;;;;;;;;"}

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

@@ -1,8 +1,6 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, ref, computed } from 'vue';
+import { use$x } from '../../../composables/use-_x.js';
+import { useState } from '../../../composables/use-state.js';
 import { searchBoxXModule } from '../x-module.js';
 
 /**
@@ -15,48 +13,47 @@ import { searchBoxXModule } from '../x-module.js';
  *
  * @public
  */
-let SearchButton = class SearchButton extends Vue {
-    get isQueryEmpty() {
-        return this.query.length === 0;
-    }
-    /**
-     * Generates the {@link WireMetadata} object omitting the moduleName.
-     *
-     * @returns The {@link WireMetadata} object omitting the moduleName.
-     * @internal
-     */
-    createEventMetadata() {
-        return {
-            target: this.$el,
-            feature: 'search_box'
-        };
-    }
-    /**
-     * Emits events when the button is clicked.
-     *
-     * @public
-     */
-    emitEvents() {
-        if (!this.isQueryEmpty) {
-            this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());
-            this.$x.emit('UserPressedSearchButton', this.query, this.createEventMetadata());
+var _sfc_main = defineComponent({
+    name: 'SearchButton',
+    xModule: searchBoxXModule.name,
+    setup: function () {
+        const $x = use$x();
+        const buttonRef = ref(null);
+        const query = useState('searchBox', ['query']).query;
+        const isQueryEmpty = computed(() => query.value.length === 0);
+        const dynamicClasses = computed(() => ({
+            'x-search-button--has-empty-query': isQueryEmpty.value
+        }));
+        /**
+         * Generates the {@link WireMetadata} object omitting the moduleName.
+         *
+         * @returns The {@link WireMetadata} object omitting the moduleName.
+         * @internal
+         */
+        function createEventMetadata() {
+            return {
+                target: buttonRef.value,
+                feature: 'search_box'
+            };
+        }
+        /**
+         * Emits events when the button is clicked.
+         *
+         * @public
+         */
+        function emitEvents() {
+            if (!isQueryEmpty.value) {
+                $x.emit('UserAcceptedAQuery', query.value, createEventMetadata());
+                $x.emit('UserPressedSearchButton', query.value, createEventMetadata());
+            }
         }
-    }
-    get dynamicClasses() {
         return {
-            'x-search-button--has-empty-query': this.isQueryEmpty
+            dynamicClasses,
+            buttonRef,
+            emitEvents
         };
     }
-};
-__decorate([
-    State('searchBox', 'query')
-], SearchButton.prototype, "query", void 0);
-SearchButton = __decorate([
-    Component({
-        mixins: [xComponentMixin(searchBoxXModule)]
-    })
-], SearchButton);
-var script = SearchButton;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=search-button.vue2.js.map

package/js/x-modules/search-box/components/search-button.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-button.vue2.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\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { 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  })\n  export 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     * 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.$el as HTMLElement,\n        feature: 'search_box'\n      };\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, this.createEventMetadata());\n        this.$x.emit('UserPressedSearchButton', this.query, this.createEventMetadata());\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":";;;;;;;AAqBE;;;;;;;;;AASG;AAIY,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,GAAG,CAAA;AAI3C,IAAA,IAAc,YAAY,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;KAChC;AAED;;;;;AAKG;IACO,mBAAmB,GAAA;QAC3B,OAAO;YACL,MAAM,EAAE,IAAI,CAAC,GAAkB;AAC/B,YAAA,OAAO,EAAE,YAAY;SACtB,CAAC;KACH;AAED;;;;AAIG;IACO,UAAU,GAAA;AAClB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAC3E,YAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;AACjF,SAAA;KACF;AAED,IAAA,IAAc,cAAc,GAAA;QAC1B,OAAO;YACL,kCAAkC,EAAE,IAAI,CAAC,YAAY;SACtD,CAAC;KACH;CACF,CAAA;AApCC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC;AACN,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAFH,YAAY,GAAA,UAAA,CAAA;AAHhC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;KAC5C,CAAC;AACmB,CAAA,EAAA,YAAY,CAsChC,CAAA;aAtCoB,YAAY;;;;"}
+{"version":3,"file":"search-button.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    @click=\"emitEvents\"\n    class=\"x-search-button x-button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../../../utils/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 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  export default defineComponent({\n    name: 'SearchButton',\n    xModule: searchBoxXModule.name,\n    setup: function () {\n      const $x = use$x();\n\n      const buttonRef = ref<HTMLElement | null>(null);\n\n      const query: ComputedRef<string> = useState('searchBox', ['query']).query;\n\n      const isQueryEmpty = computed(() => query.value.length === 0);\n\n      const dynamicClasses = computed<VueCSSClasses>(() => ({\n        'x-search-button--has-empty-query': isQueryEmpty.value\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      function createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n        return {\n          target: buttonRef.value,\n          feature: 'search_box'\n        };\n      }\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      function emitEvents() {\n        if (!isQueryEmpty.value) {\n          $x.emit('UserAcceptedAQuery', query.value, createEventMetadata());\n          $x.emit('UserPressedSearchButton', query.value, createEventMetadata());\n        }\n      }\n\n      return {\n        dynamicClasses,\n        buttonRef,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`]https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query;\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchButton, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton,\n      SearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAqBE;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE,YAAA;AACL,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,SAAU,GAAE,GAAG,CAAqB,IAAI,CAAC,CAAA;AAE/C,QAAA,MAAM,KAAK,GAAwB,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;AAEzE,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;AAE7D,QAAA,MAAM,cAAe,GAAE,QAAQ,CAAgB,OAAO;YACpD,kCAAkC,EAAE,YAAY,CAAC,KAAI;AACtD,SAAA,CAAC,CAAC,CAAA;AAEH;;;;;AAKE;AACF,QAAA,SAAS,mBAAmB,GAAA;YAC1B,OAAO;gBACL,MAAM,EAAE,SAAS,CAAC,KAAK;AACvB,gBAAA,OAAO,EAAE,YAAW;aACrB,CAAA;SACH;AAEA;;;;AAIE;AACF,QAAA,SAAS,UAAU,GAAA;AACjB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACjE,gBAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACxE,aAAA;SACF;QAEA,OAAO;YACL,cAAc;YACd,SAAS;YACT,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,67 +1,32 @@
-import script from './search-input-placeholder.vue2.js';
+import _sfc_main from './search-input-placeholder.vue2.js';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, toDisplayString, createCommentVNode } from 'vue';
 import './search-input-placeholder.vue3.js';
 import './search-input-placeholder.vue4.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 _vm.isVisible
-    ? _c(
-        _vm.animation,
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.isVisible ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), {
+    key: 0,
+    class: "x-input-placeholder x-search-input-placeholder",
+    mode: "out-in"
+  }, {
+    default: withCtx(() => [
+      (openBlock(), createElementBlock(
+        "span",
         {
-          tag: "component",
-          staticClass: "x-input-placeholder x-search-input-placeholder",
-          attrs: { mode: "out-in" },
+          key: _ctx.message,
+          "data-test": "search-input-placeholder"
         },
-        [
-          _c(
-            "span",
-            {
-              key: _vm.message,
-              attrs: { "data-test": "search-input-placeholder" },
-            },
-            [_vm._v(" " + _vm._s(_vm.message) + " ")]
-          ),
-        ]
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+        toDisplayString(_ctx.message),
+        1
+        /* TEXT */
+      ))
+    ]),
+    _: 1
+    /* STABLE */
+  })) : createCommentVNode("v-if", true);
+}
+var searchInputPlaceholder = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-db4f79d1"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-53b5cec9";
-  /* 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 { searchInputPlaceholder as default };
 //# sourceMappingURL=search-input-placeholder.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"search-input-placeholder.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-input-placeholder x-search-input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { animateTranslate, State, xComponentMixin, XOn } from '../../../components';\n  import { searchBoxXModule } from '../x-module';\n\n  /**.\n   * This component renders an animated placeholder for the search input in the shape of a list of\n   * iterating messages that can be configured to happen always or only when hovering the input\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class SearchInputPlaceholder extends Vue {\n    /**\n     * List of messages to animate.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected messages!: Array<string>;\n\n    /**\n     * Animation component used for the messages.\n     *\n     * @public\n     */\n    @Prop({ default: () => animateTranslate('bottom-to-top') })\n    protected animation!: Vue;\n\n    /**\n     * Time in milliseconds during which each message is visible.\n     *\n     * @public\n     */\n    @Prop({ default: 1500 })\n    protected animationIntervalMs!: number;\n\n    /**\n     * Whether the messages animation is active only when hovering the search input or always.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    protected animateOnlyOnHover!: boolean;\n\n    /**.\n     * The search box written query\n     *\n     * @internal\n     */\n    @State('searchBox', 'query')\n    public query!: string;\n\n    /**.\n     * The search box hover status\n     *\n     * @internal\n     */\n    protected isSearchBoxHovered = false;\n\n    /**.\n     * The search box focus status\n     *\n     * @internal\n     */\n    protected isSearchBoxFocused = false;\n\n    /**\n     * The index used to point to the current animation message in the list.\n     *\n     * @internal\n     */\n    protected animationMessageIndex = 0;\n\n    /**\n     * The interval used for the animation.\n     *\n     * @internal\n     */\n    protected animationInterval: number | undefined;\n\n    /**\n     * The visibility state of the component.\n     *\n     * @returns The visibility state based on the search input state (query & focus).\n     *\n     * @internal\n     */\n    protected get isVisible(): boolean {\n      return !this.query && !this.isSearchBoxFocused;\n    }\n\n    /**\n     * The animation state of the component.\n     *\n     * @returns Whether the animation is active or not.\n     *\n     * @internal\n     */\n    protected get isBeingAnimated(): boolean {\n      return this.isVisible && (!this.animateOnlyOnHover || this.isSearchBoxHovered);\n    }\n\n    /**\n     * The current placeholder message.\n     *\n     * @returns The message to display as placeholder at any moment.\n     *\n     * @internal\n     */\n    protected get message(): string | undefined {\n      return this.isBeingAnimated ? this.messages[this.animationMessageIndex] : this.messages[0];\n    }\n\n    /**\n     * Starts or stops the animation depending on the current animation state.\n     *\n     * @internal\n     */\n    @Watch('isBeingAnimated', { immediate: true })\n    @Watch('messages', { deep: true })\n    @Watch('animationIntervalMs')\n    protected resetAnimation(): void {\n      this.stopAnimationInterval();\n\n      if (this.isBeingAnimated) {\n        this.animationInterval = window.setInterval((): void => {\n          this.incrementAnimationMessageIndex();\n        }, this.animationIntervalMs);\n      }\n    }\n\n    /**\n     * Clears the interval used for the animation.\n     *\n     * @internal\n     */\n    protected stopAnimationInterval(): void {\n      if (this.animationInterval) {\n        clearInterval(this.animationInterval);\n        this.animationInterval = undefined;\n      }\n    }\n\n    /**\n     * Increments animation message index; if the new index exceeds the messages list length, it is\n     * reset to 0.\n     *\n     * @internal\n     */\n    protected incrementAnimationMessageIndex(): void {\n      this.animationMessageIndex = (this.animationMessageIndex + 1) % this.messages.length;\n    }\n\n    /**\n     * Sets the animation message index with the right value for the next future iteration when the\n     * current one stops,assuring the user will see always a new message on each animation state\n     * change.\n     *\n     * @internal\n     */\n    @Watch('isBeingAnimated', { immediate: true })\n    protected prepareMessageIndexForNextAnimation(): void {\n      if (!this.isBeingAnimated) {\n        if (this.animateOnlyOnHover) {\n          this.resetAnimationMessageIndex();\n        }\n        this.incrementAnimationMessageIndex();\n      }\n    }\n\n    /**\n     * Resets the animation message index to zero.\n     *\n     * @internal\n     */\n    @Watch('messages', { deep: true })\n    protected resetAnimationMessageIndex(): void {\n      this.animationMessageIndex = 0;\n    }\n\n    // TODO: EX-7173 - Get search input state(s) from the store instead of using events\n    @XOn('UserHoveredInSearchBox')\n    onUserHoveredInSearchBox(): void {\n      this.isSearchBoxHovered = true;\n    }\n\n    @XOn('UserHoveredOutSearchBox')\n    onUserHoveredOutSearchBox(): void {\n      this.isSearchBoxHovered = false;\n    }\n\n    @XOn('UserFocusedSearchBox')\n    onUserFocusedSearchBox(): void {\n      this.isSearchBoxFocused = true;\n    }\n\n    @XOn('UserBlurredSearchBox')\n    onUserBlurredSearchBox(): void {\n      this.isSearchBoxFocused = false;\n    }\n\n    beforeDestroy(): void {\n      this.stopAnimationInterval();\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-search-input-placeholder-container {\n    position: relative;\n  }\n</style>\n\n<style lang=\"scss\" scoped>\n  .x-search-input-placeholder {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere a basic example of how the animated search input placeholder is rendered.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputPlaceholderDemo',\n    components: {\n      SearchInput,\n      SearchInputPlaceholder\n    },\n    data: function () {\n      return {\n        placeholderMessages: [\n          'Find shirts',\n          'Find shoes',\n          'Find watches',\n          'Find handbags',\n          'Find sunglasses'\n        ]\n      };\n    }\n  };\n</script>\n```\n\n### Animating only on hover\n\nIn this example, the placeholder is configured to animate only when the user hovers in the search\ninput, showing the first message of the array the rest of the time.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n      :animate-only-on-hover=\"true\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputPlaceholderDemo',\n    components: {\n      SearchInput,\n      SearchInputPlaceholder\n    },\n    data: function () {\n      return {\n        placeholderMessages: [\n          'Find shirts',\n          'Find shoes',\n          'Find watches',\n          'Find handbags',\n          'Find sunglasses'\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-input-placeholder.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-input-placeholder x-search-input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onBeforeUnmount, PropType, ref, watch } from 'vue';\n  import { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { searchBoxXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n\n  /**.\n   * This component renders an animated placeholder for the search input in the shape of a list of\n   * iterating messages that can be configured to happen always or only when hovering the input\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SearchInputPlaceholder',\n    xModule: searchBoxXModule.name,\n    props: {\n      /**\n       * List of messages to animate.\n       *\n       * @public\n       */\n      messages: {\n        type: Array as PropType<string[]>,\n        required: true\n      },\n      /**\n       * Animation component used for the messages.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => animateTranslate('bottom-to-top')\n      },\n      /**\n       * Time in milliseconds during which each message is visible.\n       *\n       * @public\n       */\n      animationIntervalMs: {\n        type: Number,\n        default: 1500\n      },\n      /**\n       * Whether the messages animation is active only when hovering the search input or always.\n       *\n       * @public\n       */\n      animateOnlyOnHover: Boolean\n    },\n    setup: function (props) {\n      const $x = use$x();\n\n      /**.\n       * The search box written query\n       *\n       * @internal\n       */\n      const { query } = useState('searchBox', ['query']);\n\n      /**.\n       * The search box hover status\n       *\n       * @internal\n       */\n      const isSearchBoxHovered = ref(false);\n\n      /**.\n       * The search box focus status\n       *\n       * @internal\n       */\n      const isSearchBoxFocused = ref(false);\n\n      /**\n       * The index used to point to the current animation message in the list.\n       *\n       * @internal\n       */\n      const animationMessageIndex = ref(0);\n\n      /**\n       * The interval used for the animation.\n       *\n       * @internal\n       */\n      const animationInterval = ref<number | undefined>(undefined);\n\n      /**\n       * The visibility state of the component.\n       *\n       * @returns The visibility state based on the search input state (query & focus).\n       *\n       * @internal\n       */\n      const isVisible = computed((): boolean => !query.value && !isSearchBoxFocused.value);\n\n      /**\n       * The animation state of the component.\n       *\n       * @returns Whether the animation is active or not.\n       *\n       * @internal\n       */\n      const isBeingAnimated = computed(\n        (): boolean => isVisible.value && (!props.animateOnlyOnHover || isSearchBoxHovered.value)\n      );\n\n      /**\n       * The current placeholder message.\n       *\n       * @returns The message to display as placeholder at any moment.\n       *\n       * @internal\n       */\n      const message = computed((): string | undefined =>\n        isBeingAnimated.value ? props.messages[animationMessageIndex.value] : props.messages[0]\n      );\n\n      /**\n       * Clears the interval used for the animation.\n       *\n       * @internal\n       */\n      const stopAnimationInterval = (): void => {\n        if (animationInterval.value) {\n          clearInterval(animationInterval.value);\n          animationInterval.value = undefined;\n        }\n      };\n\n      /**\n       * Increments animation message index; if the new index exceeds the messages list length, it is\n       * reset to 0.\n       *\n       * @internal\n       */\n      const incrementAnimationMessageIndex = (): void => {\n        animationMessageIndex.value = (animationMessageIndex.value + 1) % props.messages.length;\n      };\n\n      $x.on('UserHoveredInSearchBox', false).subscribe(() => (isSearchBoxHovered.value = true));\n\n      $x.on('UserHoveredOutSearchBox', false).subscribe(() => (isSearchBoxHovered.value = false));\n\n      $x.on('UserFocusedSearchBox', false).subscribe(() => (isSearchBoxFocused.value = true));\n\n      $x.on('UserBlurredSearchBox', false).subscribe(() => (isSearchBoxFocused.value = false));\n\n      /**\n       * Starts or stops the animation depending on the current animation state.\n       *\n       * @internal\n       */\n      const resetAnimation = (): void => {\n        stopAnimationInterval();\n        if (isBeingAnimated.value) {\n          animationInterval.value = window.setInterval((): void => {\n            incrementAnimationMessageIndex();\n          }, props.animationIntervalMs);\n        }\n      };\n\n      watch(() => 'animationIntervalMs', resetAnimation);\n\n      /**\n       * Resets the animation message index to zero.\n       *\n       * @internal\n       */\n      const resetAnimationMessageIndex = (): void => {\n        animationMessageIndex.value = 0;\n      };\n\n      watch(\n        () => props.messages,\n        () => {\n          resetAnimationMessageIndex();\n          resetAnimation();\n        },\n        { deep: true }\n      );\n\n      /**\n       * Sets the animation message index with the right value for the next future iteration when the\n       * current one stops,assuring the user will see always a new message on each animation state\n       * change.\n       *\n       * @internal\n       */\n      watch(\n        isBeingAnimated,\n        () => {\n          if (!isBeingAnimated.value) {\n            if (props.animateOnlyOnHover) {\n              resetAnimationMessageIndex();\n            }\n            incrementAnimationMessageIndex();\n          }\n          resetAnimation();\n        },\n        { immediate: true }\n      );\n\n      onBeforeUnmount(() => {\n        stopAnimationInterval();\n      });\n\n      return {\n        isVisible,\n        message\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-search-input-placeholder-container {\n    position: relative;\n  }\n</style>\n\n<style lang=\"css\" scoped>\n  .x-search-input-placeholder {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere a basic example of how the animated search input placeholder is rendered.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputPlaceholderDemo',\n    components: {\n      SearchInput,\n      SearchInputPlaceholder\n    },\n    data: function () {\n      return {\n        placeholderMessages: [\n          'Find shirts',\n          'Find shoes',\n          'Find watches',\n          'Find handbags',\n          'Find sunglasses'\n        ]\n      };\n    }\n  };\n</script>\n```\n\n### Animating only on hover\n\nIn this example, the placeholder is configured to animate only when the user hovers in the search\ninput, showing the first message of the array the rest of the time.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n      :animate-only-on-hover=\"true\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputPlaceholderDemo',\n    components: {\n      SearchInput,\n      SearchInputPlaceholder\n    },\n    data: function () {\n      return {\n        placeholderMessages: [\n          'Find shirts',\n          'Find shoes',\n          'Find watches',\n          'Find handbags',\n          'Find sunglasses'\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","message","_createElementBlock","_toDisplayString","_createCommentVNode"],"mappings":";;;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,SAAA,IAAAC,SAAA,EAI0D,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACtD,GAAI,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,gDAAA;AALR,IAAA,IAAA,EAAA,QAAA;AAAA,GAAA,EAAA;aAOgBC,OAAO,CAAA,MAAA;AAAA,OAAAH,SAAA,EAAY,EAAAI,kBAAA;AAAA,QAAA,MAAA;AAAA,QAA0B;AAAA,UAAA,GAAA,EAAA,IAAA,CAAA,OAAA;;AAP7D,SAAA;AAAA,QAAAC,eAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,QAAA,CAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}