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

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

@@ -1,152 +1,9 @@
-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.vue2.js';
-import '../../../components/animations/staggering-transition-group.vue3.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 { defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
 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/currency/base-currency.vue.js';
-import '../../../components/filters/labels/base-price-filter-label.vue2.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/cart-filled.vue.js';
-import '../../../components/icons/check-tiny.vue.js';
-import '../../../components/icons/check.vue.js';
-import '../../../components/icons/checkbox-selected.vue.js';
-import '../../../components/icons/checkbox-selected-filled.vue.js';
-import '../../../components/icons/checkbox-unselected.vue.js';
-import '../../../components/icons/checkbox-unselected-filled.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/corner-arrow-left.vue.js';
-import '../../../components/icons/corner-arrow-right.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/curated-check-filled.vue.js';
-import '../../../components/icons/curated-check-tiny.vue.js';
-import '../../../components/icons/curated-check-tiny-filled.vue.js';
-import '../../../components/icons/diagonal-arrow-left-down.vue.js';
-import '../../../components/icons/diagonal-arrow-left-top.vue.js';
-import '../../../components/icons/diagonal-arrow-right-down.vue.js';
-import '../../../components/icons/diagonal-arrow-right-top.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/heart.vue.js';
-import '../../../components/icons/heart-filled.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/plus.vue.js';
-import '../../../components/icons/plus-tiny.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/sort-az.vue.js';
-import '../../../components/icons/sort-price-down.vue.js';
-import '../../../components/icons/sort-price-up.vue.js';
-import '../../../components/icons/sort-relevancy.vue.js';
-import '../../../components/icons/sort-za.vue.js';
-import '../../../components/icons/star.vue.js';
-import '../../../components/icons/star-filled.vue.js';
-import '../../../components/icons/search-tiny.vue.js';
-import '../../../components/icons/tag.vue.js';
-import '../../../components/icons/tag-filled.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/icons/user-filled.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.vue2.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/display-emitter.vue.js';
-import '../../../components/global-x-bus.vue2.js';
-import '../../../components/highlight.vue.js';
-import '../../../components/items-list.vue.js';
-import '../../../components/location-provider.vue2.js';
-import '../../../components/no-element.js';
-import '../../../components/sliding-panel.vue.js';
-import '../../../components/snippet-callbacks.vue.js';
-import '../../../components/page-loader-button.vue.js';
-import { XOn } from '../../../components/decorators/bus.decorators.js';
-import 'vue-class-component';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { use$x } from '../../../composables/use-_x.js';
+import { useState } from '../../../composables/use-state.js';
 import { searchBoxXModule } from '../x-module.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
 
 /**.
  * This component renders an animated placeholder for the search input in the shape of a list of
@@ -154,175 +11,175 @@ import { searchBoxXModule } from '../x-module.js';
  *
  * @public
  */
-let SearchInputPlaceholder = class SearchInputPlaceholder extends Vue {
-    constructor() {
-        super(...arguments);
+var _sfc_main = defineComponent({
+    name: 'SearchInputPlaceholder',
+    xModule: searchBoxXModule.name,
+    props: {
+        /**
+         * List of messages to animate.
+         *
+         * @public
+         */
+        messages: {
+            type: Array,
+            required: true
+        },
+        /**
+         * Animation component used for the messages.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: () => animateTranslate('bottom-to-top')
+        },
+        /**
+         * Time in milliseconds during which each message is visible.
+         *
+         * @public
+         */
+        animationIntervalMs: {
+            type: Number,
+            default: 1500
+        },
+        /**
+         * Whether the messages animation is active only when hovering the search input or always.
+         *
+         * @public
+         */
+        animateOnlyOnHover: Boolean
+    },
+    setup: function (props) {
+        const $x = use$x();
+        /**.
+         * The search box written query
+         *
+         * @internal
+         */
+        const { query } = useState('searchBox', ['query']);
         /**.
          * The search box hover status
          *
          * @internal
          */
-        this.isSearchBoxHovered = false;
+        const isSearchBoxHovered = ref(false);
         /**.
          * The search box focus status
          *
          * @internal
          */
-        this.isSearchBoxFocused = false;
+        const isSearchBoxFocused = ref(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 = window.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();
+        const animationMessageIndex = ref(0);
+        /**
+         * The interval used for the animation.
+         *
+         * @internal
+         */
+        const animationInterval = ref(undefined);
+        /**
+         * The visibility state of the component.
+         *
+         * @returns The visibility state based on the search input state (query & focus).
+         *
+         * @internal
+         */
+        const isVisible = computed(() => !query.value && !isSearchBoxFocused.value);
+        /**
+         * The animation state of the component.
+         *
+         * @returns Whether the animation is active or not.
+         *
+         * @internal
+         */
+        const isBeingAnimated = computed(() => isVisible.value && (!props.animateOnlyOnHover || isSearchBoxHovered.value));
+        /**
+         * The current placeholder message.
+         *
+         * @returns The message to display as placeholder at any moment.
+         *
+         * @internal
+         */
+        const message = computed(() => isBeingAnimated.value ? props.messages[animationMessageIndex.value] : props.messages[0]);
+        /**
+         * Clears the interval used for the animation.
+         *
+         * @internal
+         */
+        const stopAnimationInterval = () => {
+            if (animationInterval.value) {
+                clearInterval(animationInterval.value);
+                animationInterval.value = undefined;
             }
-            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();
+        };
+        /**
+         * Increments animation message index; if the new index exceeds the messages list length, it is
+         * reset to 0.
+         *
+         * @internal
+         */
+        const incrementAnimationMessageIndex = () => {
+            animationMessageIndex.value = (animationMessageIndex.value + 1) % props.messages.length;
+        };
+        $x.on('UserHoveredInSearchBox', false).subscribe(() => (isSearchBoxHovered.value = true));
+        $x.on('UserHoveredOutSearchBox', false).subscribe(() => (isSearchBoxHovered.value = false));
+        $x.on('UserFocusedSearchBox', false).subscribe(() => (isSearchBoxFocused.value = true));
+        $x.on('UserBlurredSearchBox', false).subscribe(() => (isSearchBoxFocused.value = false));
+        /**
+         * Starts or stops the animation depending on the current animation state.
+         *
+         * @internal
+         */
+        const resetAnimation = () => {
+            stopAnimationInterval();
+            if (isBeingAnimated.value) {
+                animationInterval.value = window.setInterval(() => {
+                    incrementAnimationMessageIndex();
+                }, props.animationIntervalMs);
+            }
+        };
+        watch(() => 'animationIntervalMs', resetAnimation);
+        /**
+         * Resets the animation message index to zero.
+         *
+         * @internal
+         */
+        const resetAnimationMessageIndex = () => {
+            animationMessageIndex.value = 0;
+        };
+        watch(() => props.messages, () => {
+            resetAnimationMessageIndex();
+            resetAnimation();
+        }, { deep: true });
+        /**
+         * 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
+         */
+        watch(isBeingAnimated, () => {
+            if (!isBeingAnimated.value) {
+                if (props.animateOnlyOnHover) {
+                    resetAnimationMessageIndex();
+                }
+                incrementAnimationMessageIndex();
+            }
+            resetAnimation();
+        }, { immediate: true });
+        onBeforeUnmount(() => {
+            stopAnimationInterval();
+        });
+        return {
+            isVisible,
+            message
+        };
     }
-};
-__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 };
+export { _sfc_main as default };
 //# sourceMappingURL=search-input-placeholder.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"search-input-placeholder.vue2.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 = 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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBE;;;;;AAKG;AAIY,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,GAAG,CAAA;AAAxC,IAAA,WAAA,GAAA;;AAyCb;;;;AAIG;QACO,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAAC;AAErC;;;;AAIG;QACO,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAAC;AAErC;;;;AAIG;QACO,IAAqB,CAAA,qBAAA,GAAG,CAAC,CAAC;KAqIrC;AA5HC;;;;;;AAMG;AACH,IAAA,IAAc,SAAS,GAAA;QACrB,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC;KAChD;AAED;;;;;;AAMG;AACH,IAAA,IAAc,eAAe,GAAA;AAC3B,QAAA,OAAO,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAChF;AAED;;;;;;AAMG;AACH,IAAA,IAAc,OAAO,GAAA;QACnB,OAAO,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;KAC5F;AAED;;;;AAIG;IAIO,cAAc,GAAA;QACtB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,MAAW;gBACrD,IAAI,CAAC,8BAA8B,EAAE,CAAC;AACxC,aAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;AAC9B,SAAA;KACF;AAED;;;;AAIG;IACO,qBAAqB,GAAA;QAC7B,IAAI,IAAI,CAAC,iBAAiB,EAAE;AAC1B,YAAA,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;AACtC,YAAA,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;AACpC,SAAA;KACF;AAED;;;;;AAKG;IACO,8BAA8B,GAAA;AACtC,QAAA,IAAI,CAAC,qBAAqB,GAAG,CAAC,IAAI,CAAC,qBAAqB,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;KACtF;AAED;;;;;;AAMG;IAEO,mCAAmC,GAAA;AAC3C,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,IAAI,CAAC,kBAAkB,EAAE;gBAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;AACnC,aAAA;YACD,IAAI,CAAC,8BAA8B,EAAE,CAAC;AACvC,SAAA;KACF;AAED;;;;AAIG;IAEO,0BAA0B,GAAA;AAClC,QAAA,IAAI,CAAC,qBAAqB,GAAG,CAAC,CAAC;KAChC;;IAID,wBAAwB,GAAA;AACtB,QAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;KAChC;IAGD,yBAAyB,GAAA;AACvB,QAAA,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;KACjC;IAGD,sBAAsB,GAAA;AACpB,QAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;KAChC;IAGD,sBAAsB,GAAA;AACpB,QAAA,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;KACjC;IAED,aAAa,GAAA;QACX,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;CACF,CAAA;AA1LC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACU,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQnC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,eAAe,CAAC,EAAE,CAAC;AACjC,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ1B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACe,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQvC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACc,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQvC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC;AACN,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuEtB,UAAA,CAAA;IAHC,KAAK,CAAC,iBAAiB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAC7C,KAAK,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACjC,KAAK,CAAC,qBAAqB,CAAC;AAS5B,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,CAAA;AAgCD,UAAA,CAAA;IADC,KAAK,CAAC,iBAAiB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAQ7C,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,qCAAA,EAAA,IAAA,CAAA,CAAA;AAQD,UAAA,CAAA;IADC,KAAK,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAGjC,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,4BAAA,EAAA,IAAA,CAAA,CAAA;AAID,UAAA,CAAA;IADC,GAAG,CAAC,wBAAwB,CAAC;AAG7B,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,0BAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,GAAG,CAAC,yBAAyB,CAAC;AAG9B,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,2BAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,GAAG,CAAC,sBAAsB,CAAC;AAG3B,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,GAAG,CAAC,sBAAsB,CAAC;AAG3B,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,CAAA;AA5LkB,sBAAsB,GAAA,UAAA,CAAA;AAH1C,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;KAC5C,CAAC;AACmB,CAAA,EAAA,sBAAsB,CAiM1C,CAAA;aAjMoB,sBAAsB;;;;"}
+{"version":3,"file":"search-input-placeholder.vue2.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":[],"mappings":"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"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-search-input-placeholder-container {\n  position: relative;\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('/home/runner/work/x/x/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-search-input-placeholder-container{position:relative}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=search-input-placeholder.vue3.js.map

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

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

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-search-input-placeholder[data-v-53b5cec9] {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\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('/home/runner/work/x/x/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue?rollup-plugin-vue=styles.1.css',{source:css});
+var css = ".x-search-input-placeholder[data-v-db4f79d1]{align-items:center;bottom:0;display:flex;left:0;pointer-events:none;position:absolute;right:0;top:0}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=search-input-placeholder.vue4.js.map

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

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