@empathyco/x-components/js/x-modules/empathize/components/empathize.vue2.js

Empathy X Components

import { defineComponent, ref, computed } from 'vue';
import '../../../components/animations/animate-width.vue2.js';
import '../../../components/animations/animate-width.vue3.js';
import '../../../components/animations/collapse-height.vue2.js';
import '../../../components/animations/collapse-height.vue3.js';
import '../../../components/animations/collapse-width.vue2.js';
import '../../../components/animations/collapse-width.vue3.js';
import '../../../components/animations/cross-fade.vue2.js';
import '../../../components/animations/cross-fade.vue3.js';
import '../../../components/animations/fade.vue2.js';
import '../../../components/animations/fade.vue3.js';
import '../../../components/animations/fade-and-slide.vue2.js';
import '../../../components/animations/fade-and-slide.vue3.js';
import _sfc_main$1 from '../../../components/animations/no-animation.vue.js';
import '../../../components/animations/staggered-fade-and-slide.vue2.js';
import '../../../components/animations/staggered-fade-and-slide.vue3.js';
import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
import '../../../components/column-picker/base-column-picker-dropdown.vue2.js';
import '../../../components/column-picker/base-column-picker-list.vue2.js';
import '../../../components/currency/base-currency.vue2.js';
import '../../../components/filters/labels/base-price-filter-label.vue.js';
import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
import '../../../components/layouts/fixed-header-and-asides-layout.vue2.js';
import '../../../components/layouts/fixed-header-and-asides-layout.vue3.js';
import '../../../components/layouts/multi-column-max-width-layout.vue2.js';
import '../../../components/layouts/multi-column-max-width-layout.vue3.js';
import '../../../components/layouts/multi-column-max-width-layout.vue4.js';
import '../../../components/layouts/single-column-layout.vue2.js';
import '../../../components/layouts/single-column-layout.vue3.js';
import '../../../components/modals/base-events-modal-close.vue2.js';
import '../../../components/modals/base-events-modal.vue2.js';
import '../../../components/modals/base-events-modal-open.vue2.js';
import '../../../components/modals/base-modal.vue2.js';
import '../../../components/modals/base-modal.vue3.js';
import '../../../components/modals/base-id-modal.vue2.js';
import '../../../components/modals/base-id-modal-close.vue2.js';
import '../../../components/modals/base-id-modal-open.vue2.js';
import '../../../components/modals/close-main-modal.vue2.js';
import '../../../components/modals/main-modal.vue2.js';
import '../../../components/modals/open-main-modal.vue2.js';
import '../../../components/panels/base-header-toggle-panel.vue2.js';
import '../../../components/panels/base-header-toggle-panel.vue3.js';
import '../../../components/panels/base-toggle-panel.vue2.js';
import '../../../components/panels/base-id-toggle-panel.vue2.js';
import '../../../components/panels/base-id-toggle-panel-button.vue2.js';
import '../../../components/panels/base-tabs-panel.vue2.js';
import '../../../components/panels/base-tabs-panel.vue3.js';
import '../../../components/result/base-result-add-to-cart.vue2.js';
import '../../../components/result/base-result-current-price.vue2.js';
import '../../../components/result/base-result-image.vue2.js';
import '../../../components/result/base-result-image.vue3.js';
import '../../../components/result/base-result-link.vue2.js';
import '../../../components/result/base-result-link.vue3.js';
import '../../../components/result/base-result-previous-price.vue2.js';
import '../../../components/result/base-result-rating.vue2.js';
import '../../../components/result/base-result-rating.vue3.js';
import '../../../components/result/result-variants-provider.vue.js';
import '../../../components/result/result-variant-selector.vue2.js';
import '../../../components/result/result-variant-selector.vue3.js';
import '../../../components/scroll/base-scroll.vue2.js';
import '@empathyco/x-utils';
import { use$x } from '../../../composables/use-_x.js';
import '../../../components/suggestions/base-suggestion.vue2.js';
import '../../../components/suggestions/base-suggestions.vue2.js';
import '../../../components/suggestions/base-suggestions.vue3.js';
import '../../../components/auto-progress-bar.vue2.js';
import '../../../components/auto-progress-bar.vue3.js';
import '../../../components/base-dropdown.vue2.js';
import '../../../components/base-dropdown.vue3.js';
import '../../../components/base-event-button.vue2.js';
import '../../../components/base-grid.vue2.js';
import '../../../components/base-grid.vue3.js';
import '../../../components/base-keyboard-navigation.vue2.js';
import '../../../components/base-rating.vue2.js';
import '../../../components/base-rating.vue3.js';
import '../../../components/base-slider.vue2.js';
import '../../../components/base-slider.vue3.js';
import '../../../components/base-switch.vue2.js';
import '../../../components/base-switch.vue3.js';
import '../../../components/base-variable-column-grid.vue2.js';
import '../../../components/display-emitter.vue.js';
import '../../../components/global-x-bus.vue.js';
import '../../../components/highlight.vue2.js';
import '../../../components/items-list.vue2.js';
import '../../../components/location-provider.vue.js';
import '../../../components/sliding-panel.vue2.js';
import '../../../components/sliding-panel.vue3.js';
import '../../../components/snippet-callbacks.vue2.js';
import '../../../components/page-loader-button.vue2.js';
import '../../../components/page-loader-button.vue3.js';
import '../../../components/page-selector.vue2.js';
import '../../../components/page-selector.vue3.js';
import '../../../components/display-click-provider.vue.js';
import '../../../composables/create-use-device.js';
import '@vue/devtools-api';
import '../../../plugins/devtools/timeline.devtools.js';
import 'rxjs/operators';
import 'rxjs';
import '../../../plugins/devtools/colors.utils.js';
import '../../../plugins/x-bus.js';
import '../../../plugins/x-plugin.js';
import 'vuex';
import { useDebounce } from '../../../composables/use-debounce.js';
import '@vueuse/core';
import { AnimationProp } from '../../../types/animation-prop.js';
import { empathizeXModule } from '../x-module.js';
import { getActiveElement } from '../../../utils/html.js';

/**
 * Component containing the empathize. It has a required slot to define its content and two props
 * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.
 *
 * @public
 */
var _sfc_main = defineComponent({
    name: 'Empathize',
    xModule: empathizeXModule.name,
    props: {
        /** Array of {@link XEvent} to open the empathize. */
        eventsToOpenEmpathize: {
            type: Array,
            default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']
        },
        /** Array of {@link XEvent} to close the empathize. */
        eventsToCloseEmpathize: {
            type: Array,
            default: () => [
                'UserClosedEmpathize',
                'UserSelectedASuggestion',
                'UserPressedEnterKey',
                'UserBlurredSearchBox'
            ]
        },
        /** Animation component that will be used to animate the empathize. */
        animation: {
            type: AnimationProp,
            default: () => _sfc_main$1
        }
    },
    setup(props) {
        const $x = use$x();
        const empathizeRef = ref();
        const isOpen = ref(false);
        const hasContent = computed(() => !!empathizeRef.value?.children?.length);
        /**
         * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`
         * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if
         * the state really changes.
         *
         * @param newOpen - The new open state to assign to {@link Empathize.isOpen}.
         */
        const changeOpen = useDebounce((newOpen) => {
            if (isOpen.value !== newOpen) {
                isOpen.value = newOpen;
                const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';
                $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });
            }
        }, 0);
        /**
         * Open empathize. This method will be executed on any event in
         * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root
         * element.
         */
        function open() {
            if (hasContent.value) {
                changeOpen(true);
            }
        }
        /**
         * Close empathize. This method will be executed on any event in
         * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root
         * element.
         */
        function close() {
            const activeElement = getActiveElement();
            if (!empathizeRef.value?.contains(activeElement)) {
                changeOpen(false);
            }
        }
        props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));
        props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));
        return {
            close,
            empathizeRef,
            hasContent,
            isOpen,
            open
        };
    }
});

export { _sfc_main as default };
//# sourceMappingURL=empathize.vue2.js.map