@empathyco/x-components 3.0.0-alpha.3 → 3.0.0-alpha.300

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

@@ -0,0 +1,62 @@
+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 { searchBoxXModule } from '../x-module.js';
+
+/**
+ * This component renders a button to submit the query.
+ *
+ * @remarks
+ * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and
+ * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.
+ * It also adds `x-search-button--has-empty-query` as class when there is no query.
+ *
+ * @public
+ */
+let SearchButton = class SearchButton extends Vue {
+    get isQueryEmpty() {
+        return this.query.length === 0;
+    }
+    /**
+     * Generates the {@link WireMetadata | event metadata} 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());
+        }
+    }
+    get dynamicClasses() {
+        return {
+            'x-search-button--has-empty-query': this.isQueryEmpty
+        };
+    }
+};
+__decorate([
+    State('searchBox', 'query')
+], SearchButton.prototype, "query", void 0);
+SearchButton = __decorate([
+    Component({
+        mixins: [xComponentMixin(searchBoxXModule)]
+    })
+], SearchButton);
+var script = SearchButton;
+
+export { script as default };
+//# sourceMappingURL=search-button.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-button.vue_rollup-plugin-vue_script.vue.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 | event metadata} 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;;;;"}

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

@@ -0,0 +1,66 @@
+import script from './search-input-placeholder.vue_rollup-plugin-vue_script.vue.js';
+import './search-input-placeholder.vue_rollup-plugin-vue_styles.0.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+
+/* 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,
+        {
+          tag: "component",
+          staticClass: "x-input-placeholder x-search-input-placeholder",
+          attrs: { mode: "out-in" },
+        },
+        [
+          _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;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = "data-v-c64849b2";
+  /* 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 };
+//# sourceMappingURL=search-input-placeholder.vue.js.map

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

@@ -0,0 +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 = 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\" scoped>\n  .x-search-input-placeholder {\n    display: flex;\n    align-items: center;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,311 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Watch, Component } from 'vue-property-decorator';
+import '../../../components/animations/animate-width.vue.js';
+import '../../../components/animations/collapse-height.vue.js';
+import '../../../components/animations/collapse-width.vue.js';
+import '../../../components/animations/cross-fade.vue.js';
+import '../../../components/animations/fade.vue.js';
+import '../../../components/animations/fade-and-slide.vue.js';
+import '../../../components/animations/staggered-fade-and-slide.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_styles.0.vue.js';
+import 'vue-runtime-helpers/dist/normalize-component.mjs';
+import '../../../components/animations/disable-animation.mixin.js';
+import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
+import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
+import { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory.js';
+import '../../../components/column-picker/base-column-picker-dropdown.vue.js';
+import '../../../components/column-picker/base-column-picker-list.vue.js';
+import '../../../components/column-picker/column-picker.mixin.js';
+import '../../../components/currency/base-currency.vue.js';
+import '../../../components/filters/labels/base-price-filter-label.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/filters/labels/base-rating-filter-label.vue.js';
+import '../../../components/icons/arrow-down.vue.js';
+import '../../../components/icons/arrow-left.vue.js';
+import '../../../components/icons/arrow-right.vue.js';
+import '../../../components/icons/arrow-up.vue.js';
+import '../../../components/icons/bag.vue.js';
+import '../../../components/icons/bar-code.vue.js';
+import '../../../components/icons/barcode-tiny.vue.js';
+import '../../../components/icons/cart.vue.js';
+import '../../../components/icons/check-tiny.vue.js';
+import '../../../components/icons/check.vue.js';
+import '../../../components/icons/checkbox-card-selected.vue.js';
+import '../../../components/icons/checkbox-card-unselected.vue.js';
+import '../../../components/icons/checkbox-selected.vue.js';
+import '../../../components/icons/checkbox-unselected.vue.js';
+import '../../../components/icons/chevron-down.vue.js';
+import '../../../components/icons/chevron-left.vue.js';
+import '../../../components/icons/chevron-right.vue.js';
+import '../../../components/icons/chevron-tiny-down.vue.js';
+import '../../../components/icons/chevron-tiny-left.vue.js';
+import '../../../components/icons/chevron-tiny-right.vue.js';
+import '../../../components/icons/chevron-tiny-up.vue.js';
+import '../../../components/icons/chevron-up.vue.js';
+import '../../../components/icons/cross-tiny.vue.js';
+import '../../../components/icons/cross.vue.js';
+import '../../../components/icons/curated-check.vue.js';
+import '../../../components/icons/filters.vue.js';
+import '../../../components/icons/grid-1-col.vue.js';
+import '../../../components/icons/grid-2-col.vue.js';
+import '../../../components/icons/grid-4-col.vue.js';
+import '../../../components/icons/grid-2-rows.vue.js';
+import '../../../components/icons/hide.vue.js';
+import '../../../components/icons/history-tiny.vue.js';
+import '../../../components/icons/history.vue.js';
+import '../../../components/icons/light-bulb-off.vue.js';
+import '../../../components/icons/light-bulb-on.vue.js';
+import '../../../components/icons/menu.vue.js';
+import '../../../components/icons/minus-tiny.vue.js';
+import '../../../components/icons/minus.vue.js';
+import '../../../components/icons/nq-1.vue.js';
+import '../../../components/icons/nq-2.vue.js';
+import '../../../components/icons/nq-3.vue.js';
+import '../../../components/icons/nq-4.vue.js';
+import '../../../components/icons/plus.vue.js';
+import '../../../components/icons/radiobutton-selected.vue.js';
+import '../../../components/icons/radiobutton-unselected.vue.js';
+import '../../../components/icons/search.vue.js';
+import '../../../components/icons/settings.vue.js';
+import '../../../components/icons/show.vue.js';
+import '../../../components/icons/star.vue.js';
+import '../../../components/icons/search-tiny.vue.js';
+import '../../../components/icons/tag.vue.js';
+import '../../../components/icons/trash-open.vue.js';
+import '../../../components/icons/trash.vue.js';
+import '../../../components/icons/trending-tiny.vue.js';
+import '../../../components/icons/trending.vue.js';
+import '../../../components/icons/user.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
+import '../../../components/modals/base-events-modal.vue.js';
+import '../../../components/modals/base-events-modal-open.vue.js';
+import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import '../../../components/modals/base-id-modal-close.vue.js';
+import '../../../components/modals/base-id-modal-open.vue.js';
+import '../../../components/modals/close-main-modal.vue.js';
+import '../../../components/modals/main-modal.vue.js';
+import '../../../components/modals/open-main-modal.vue.js';
+import '../../../components/panels/base-header-toggle-panel.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel-button.vue.js';
+import '../../../components/panels/base-tabs-panel.vue.js';
+import '../../../components/result/base-result-add-to-cart.vue.js';
+import '../../../components/result/base-result-current-price.vue.js';
+import '../../../components/result/base-result-image.vue.js';
+import '../../../components/result/base-result-link.vue.js';
+import '../../../components/result/base-result-previous-price.vue.js';
+import '../../../components/result/base-result-fallback-image.vue.js';
+import '../../../components/result/base-result-placeholder-image.vue.js';
+import '../../../components/result/base-result-rating.vue.js';
+import '../../../components/result/result-variants-provider.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/result/result-variant-selector.vue.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/suggestions/base-suggestion.vue.js';
+import '../../../components/suggestions/base-suggestions.vue.js';
+import '../../../components/auto-progress-bar.vue.js';
+import '../../../components/base-dropdown.vue.js';
+import '../../../components/base-event-button.vue.js';
+import '../../../components/base-grid.vue.js';
+import '../../../components/base-keyboard-navigation.vue.js';
+import '../../../components/base-rating.vue.js';
+import '../../../components/base-switch.vue.js';
+import '../../../components/base-variable-column-grid.vue.js';
+import '../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/highlight.vue.js';
+import '../../../components/items-list.vue.js';
+import '../../../components/location-provider.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/no-element.js';
+import '../../../components/sliding-panel.vue.js';
+import '../../../components/snippet-callbacks.vue.js';
+import { XOn } from '../../../components/decorators/bus.decorators.js';
+import 'vue-class-component';
+import { State } from '../../../components/decorators/store.decorators.js';
+import '../../../components/items-list-injection.mixin.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { searchBoxXModule } from '../x-module.js';
+
+/**.
+ * This component renders an animated placeholder for the search input in the shape of a list of
+ * iterating messages that can be configured to happen always or only when hovering the input
+ *
+ * @public
+ */
+let SearchInputPlaceholder = class SearchInputPlaceholder extends Vue {
+    constructor() {
+        super(...arguments);
+        /**.
+         * The search box hover status
+         *
+         * @internal
+         */
+        this.isSearchBoxHovered = false;
+        /**.
+         * The search box focus status
+         *
+         * @internal
+         */
+        this.isSearchBoxFocused = false;
+        /**
+         * The index used to point to the current animation message in the list.
+         *
+         * @internal
+         */
+        this.animationMessageIndex = 0;
+    }
+    /**
+     * The visibility state of the component.
+     *
+     * @returns The visibility state based on the search input state (query & focus).
+     *
+     * @internal
+     */
+    get isVisible() {
+        return !this.query && !this.isSearchBoxFocused;
+    }
+    /**
+     * The animation state of the component.
+     *
+     * @returns Whether the animation is active or not.
+     *
+     * @internal
+     */
+    get isBeingAnimated() {
+        return this.isVisible && (!this.animateOnlyOnHover || this.isSearchBoxHovered);
+    }
+    /**
+     * The current placeholder message.
+     *
+     * @returns The message to display as placeholder at any moment.
+     *
+     * @internal
+     */
+    get message() {
+        return this.isBeingAnimated ? this.messages[this.animationMessageIndex] : this.messages[0];
+    }
+    /**
+     * Starts or stops the animation depending on the current animation state.
+     *
+     * @internal
+     */
+    resetAnimation() {
+        this.stopAnimationInterval();
+        if (this.isBeingAnimated) {
+            this.animationInterval = setInterval(() => {
+                this.incrementAnimationMessageIndex();
+            }, this.animationIntervalMs);
+        }
+    }
+    /**
+     * Clears the interval used for the animation.
+     *
+     * @internal
+     */
+    stopAnimationInterval() {
+        if (this.animationInterval) {
+            clearInterval(this.animationInterval);
+            this.animationInterval = undefined;
+        }
+    }
+    /**
+     * Increments animation message index; if the new index exceeds the messages list length, it is
+     * reset to 0.
+     *
+     * @internal
+     */
+    incrementAnimationMessageIndex() {
+        this.animationMessageIndex = (this.animationMessageIndex + 1) % this.messages.length;
+    }
+    /**
+     * Sets the animation message index with the right value for the next future iteration when the
+     * current one stops,assuring the user will see always a new message on each animation state
+     * change.
+     *
+     * @internal
+     */
+    prepareMessageIndexForNextAnimation() {
+        if (!this.isBeingAnimated) {
+            if (this.animateOnlyOnHover) {
+                this.resetAnimationMessageIndex();
+            }
+            this.incrementAnimationMessageIndex();
+        }
+    }
+    /**
+     * Resets the animation message index to zero.
+     *
+     * @internal
+     */
+    resetAnimationMessageIndex() {
+        this.animationMessageIndex = 0;
+    }
+    // TODO: EX-7173 - Get search input state(s) from the store instead of using events
+    onUserHoveredInSearchBox() {
+        this.isSearchBoxHovered = true;
+    }
+    onUserHoveredOutSearchBox() {
+        this.isSearchBoxHovered = false;
+    }
+    onUserFocusedSearchBox() {
+        this.isSearchBoxFocused = true;
+    }
+    onUserBlurredSearchBox() {
+        this.isSearchBoxFocused = false;
+    }
+    beforeDestroy() {
+        this.stopAnimationInterval();
+    }
+};
+__decorate([
+    Prop({ required: true })
+], SearchInputPlaceholder.prototype, "messages", void 0);
+__decorate([
+    Prop({ default: () => animateTranslate('bottom-to-top') })
+], SearchInputPlaceholder.prototype, "animation", void 0);
+__decorate([
+    Prop({ default: 1500 })
+], SearchInputPlaceholder.prototype, "animationIntervalMs", void 0);
+__decorate([
+    Prop({ default: false })
+], SearchInputPlaceholder.prototype, "animateOnlyOnHover", void 0);
+__decorate([
+    State('searchBox', 'query')
+], SearchInputPlaceholder.prototype, "query", void 0);
+__decorate([
+    Watch('isBeingAnimated', { immediate: true }),
+    Watch('messages', { deep: true }),
+    Watch('animationIntervalMs')
+], SearchInputPlaceholder.prototype, "resetAnimation", null);
+__decorate([
+    Watch('isBeingAnimated', { immediate: true })
+], SearchInputPlaceholder.prototype, "prepareMessageIndexForNextAnimation", null);
+__decorate([
+    Watch('messages', { deep: true })
+], SearchInputPlaceholder.prototype, "resetAnimationMessageIndex", null);
+__decorate([
+    XOn('UserHoveredInSearchBox')
+], SearchInputPlaceholder.prototype, "onUserHoveredInSearchBox", null);
+__decorate([
+    XOn('UserHoveredOutSearchBox')
+], SearchInputPlaceholder.prototype, "onUserHoveredOutSearchBox", null);
+__decorate([
+    XOn('UserFocusedSearchBox')
+], SearchInputPlaceholder.prototype, "onUserFocusedSearchBox", null);
+__decorate([
+    XOn('UserBlurredSearchBox')
+], SearchInputPlaceholder.prototype, "onUserBlurredSearchBox", null);
+SearchInputPlaceholder = __decorate([
+    Component({
+        mixins: [xComponentMixin(searchBoxXModule)]
+    })
+], SearchInputPlaceholder);
+var script = SearchInputPlaceholder;
+
+export { script as default };
+//# sourceMappingURL=search-input-placeholder.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-input-placeholder.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\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 = 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"],"names":[],"mappings":"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"}

package/js/x-modules/search-box/components/search-input-placeholder.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,16 @@
+import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+
+var css = ".x-search-input-placeholder[data-v-c64849b2] {\n  display: flex;\n  align-items: center;\n}";
+           const isBrowser = /*#__PURE__*/ (function () {
+             return (
+                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
+                '[object process]'
+             );
+           })();
+           const useBrowserInjector =
+             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
+           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
+           injector('/__w/x/x/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=search-input-placeholder.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/x-modules/search-box/components/search-input-placeholder.vue_rollup-plugin-vue_styles.0.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input-placeholder.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,103 @@
+import script from './search-input.vue_rollup-plugin-vue_script.vue.js';
+import './search-input.vue_rollup-plugin-vue_styles.0.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+
+/* 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;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = "data-v-5910e4e5";
+  /* 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 };
+//# sourceMappingURL=search-input.vue.js.map