npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.184 → 6.0.0-alpha.185 - Mend

@empathyco/x-components 6.0.0-alpha.184 → 6.0.0-alpha.185

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (631) hide show

package/js/x-modules/scroll/components/main-scroll-item.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main-scroll-item.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue"],"sourcesContent":["<template>\n <component :is=\"tag\" ref=\"rootRef\" :data-scroll=\"item.id\">\n <slot />\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Identifiable } from '@empathyco/x-types'\nimport type { Component, PropType, Ref, WatchCallback } from 'vue'\nimport type { ScrollVisibilityObserver } from './scroll.types'\nimport { defineComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { scrollXModule } from '../x-module'\nimport { ScrollObserverKey } from './scroll.const'\n\n/*\n Wrapper for elements contained in the {@link MainScroll} that should store/restore its\n * position.\n \n @public\n /\nexport default defineComponent({\n name: 'MainScrollItem',\n xModule: scrollXModule.name,\n props: {\n /* The item data. Used to set the scroll identifier. /\n item: {\n type: Object as PropType<Identifiable>,\n required: true,\n },\n /* The tag to render. /\n tag: {\n type: [String, Object] as PropType<string \| Component>,\n default: 'div',\n },\n },\n setup(props) {\n const xBus = useXBus()\n\n /* Rendered HTML node. /\n const rootRef = ref<HTMLElement>()\n\n /\n Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item\n * `id` property, this component should be scrolled into view.\n /\n const { pendingScrollTo } = useState('scroll')\n\n /* Observer to detect the first visible element. /\n const firstVisibleItemObserver = inject<Ref<ScrollVisibilityObserver> \| null>(\n ScrollObserverKey as string,\n null,\n )\n\n /\n Initialises the element visibility observation, stopping the previous one if it has.\n \n @param newObserver - The new observer for the HTML element.\n * @param oldObserver - The old observer for the HTML element.\n /\n const observeItem: WatchCallback<ScrollVisibilityObserver> = (\n newObserver: ScrollVisibilityObserver \| null,\n oldObserver: ScrollVisibilityObserver \| null,\n ): void => {\n if (rootRef.value) {\n oldObserver?.unobserve(rootRef.value)\n newObserver?.observe(rootRef.value)\n if (pendingScrollTo.value === props.item.id) {\n nextTick(() => {\n rootRef.value!.scrollIntoView({\n block: 'center',\n })\n })\n xBus.emit('ScrollRestoreSucceeded')\n }\n }\n }\n\n /* Detaches the observer from the rendered element to prevent memory leaks. /\n onBeforeUnmount(() => {\n if (rootRef.value) {\n firstVisibleItemObserver?.value.unobserve(rootRef.value)\n }\n })\n\n /\n Initialise scroll behavior.\n * - Observes the rendered element to detect if it is the first visible item.\n * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the\n * element into the first position of the view.\n */\n onMounted(() => {\n nextTick(() => {\n // Mounted does not guarantee that child components are mounted too\n if (firstVisibleItemObserver) {\n watch(firstVisibleItemObserver, observeItem, { immediate: true })\n }\n })\n })\n\n return { rootRef }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis components emits the following events:\n\n- [`ScrollRestoreSucceeded`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component has no predefined template. It renders whatever you decide using the `tag` prop. It's\nmain purpose is to help storing and restoring the scroll position so URLs can be shared, and also to\nallow users to smoothly navigate back and forth.\n\nTo do so, it must be wrapped with the `MainScroll` component. In the following example we make use\nof all of these components. The URL is modified as the user scrolls.\n\n```vue\n<template>\n <div>\n <UrlHandler />\n <SearchInput />\n\n <MainScroll>\n <Scroll>\n <ResultsList #result=\"{ item }\">\n <MainScrollItem :item=\"item\" tag=\"article\">\n <BaseResultLink :item=\"item\">\n <img :src=\"item.images[0]\" />\n <p>{{ item.title }}</p>\n </BaseResultLink>\n </MainScrollItem>\n </ResultsList>\n </Scroll>\n </MainScroll>\n </div>\n</template>\n\n<script>\nimport { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { UrlHandler } from '@empathyco/x-components/url'\n\nexport default {\n name: 'ScrollItemDemo',\n components: {\n Scroll,\n ResultsList,\n MainScroll,\n MainScrollItem,\n SearchInput,\n UrlHandler,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","~~_withCtx","~~_renderSlot"],"mappings":";;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAEYC,wBAFI,IAAG,CAAA,GAAA,CAAA,EAAA;AAAA,IAAE,GAAI,EAAA,SAAA;AAAA,IAAW,eAAa,IAAK,CAAA,IAAA,CAAA,EAAA;AAAA,GAAA,EAAA;~~AADxD~~,~~IAAA,OAAA,EAAAC,OAAA,CAEI,~~MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA~~;AAFZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,aAAA,CAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"main-scroll-item.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue"],"sourcesContent":["<template>\n <component :is=\"tag\" ref=\"rootRef\" :data-scroll=\"item.id\">\n <slot />\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Identifiable } from '@empathyco/x-types'\nimport type { Component, PropType, Ref, WatchCallback } from 'vue'\nimport type { ScrollVisibilityObserver } from './scroll.types'\nimport { defineComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { scrollXModule } from '../x-module'\nimport { ScrollObserverKey } from './scroll.const'\n\n/*\n Wrapper for elements contained in the {@link MainScroll} that should store/restore its\n * position.\n \n @public\n /\nexport default defineComponent({\n name: 'MainScrollItem',\n xModule: scrollXModule.name,\n props: {\n /* The item data. Used to set the scroll identifier. /\n item: {\n type: Object as PropType<Identifiable>,\n required: true,\n },\n /* The tag to render. /\n tag: {\n type: [String, Object] as PropType<string \| Component>,\n default: 'div',\n },\n },\n setup(props) {\n const xBus = useXBus()\n\n /* Rendered HTML node. /\n const rootRef = ref<HTMLElement>()\n\n /\n Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item\n * `id` property, this component should be scrolled into view.\n /\n const { pendingScrollTo } = useState('scroll')\n\n /* Observer to detect the first visible element. /\n const firstVisibleItemObserver = inject<Ref<ScrollVisibilityObserver> \| null>(\n ScrollObserverKey as string,\n null,\n )\n\n /\n Initialises the element visibility observation, stopping the previous one if it has.\n \n @param newObserver - The new observer for the HTML element.\n * @param oldObserver - The old observer for the HTML element.\n /\n const observeItem: WatchCallback<ScrollVisibilityObserver> = (\n newObserver: ScrollVisibilityObserver \| null,\n oldObserver: ScrollVisibilityObserver \| null,\n ): void => {\n if (rootRef.value) {\n oldObserver?.unobserve(rootRef.value)\n newObserver?.observe(rootRef.value)\n if (pendingScrollTo.value === props.item.id) {\n nextTick(() => {\n rootRef.value!.scrollIntoView({\n block: 'center',\n })\n })\n xBus.emit('ScrollRestoreSucceeded')\n }\n }\n }\n\n /* Detaches the observer from the rendered element to prevent memory leaks. /\n onBeforeUnmount(() => {\n if (rootRef.value) {\n firstVisibleItemObserver?.value.unobserve(rootRef.value)\n }\n })\n\n /\n Initialise scroll behavior.\n * - Observes the rendered element to detect if it is the first visible item.\n * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the\n * element into the first position of the view.\n */\n onMounted(() => {\n nextTick(() => {\n // Mounted does not guarantee that child components are mounted too\n if (firstVisibleItemObserver) {\n watch(firstVisibleItemObserver, observeItem, { immediate: true })\n }\n })\n })\n\n return { rootRef }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis components emits the following events:\n\n- [`ScrollRestoreSucceeded`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component has no predefined template. It renders whatever you decide using the `tag` prop. It's\nmain purpose is to help storing and restoring the scroll position so URLs can be shared, and also to\nallow users to smoothly navigate back and forth.\n\nTo do so, it must be wrapped with the `MainScroll` component. In the following example we make use\nof all of these components. The URL is modified as the user scrolls.\n\n```vue\n<template>\n <div>\n <UrlHandler />\n <SearchInput />\n\n <MainScroll>\n <Scroll>\n <ResultsList #result=\"{ item }\">\n <MainScrollItem :item=\"item\" tag=\"article\">\n <BaseResultLink :item=\"item\">\n <img :src=\"item.images[0]\" />\n <p>{{ item.title }}</p>\n </BaseResultLink>\n </MainScrollItem>\n </ResultsList>\n </Scroll>\n </MainScroll>\n </div>\n</template>\n\n<script>\nimport { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { UrlHandler } from '@empathyco/x-components/url'\n\nexport default {\n name: 'ScrollItemDemo',\n components: {\n Scroll,\n ResultsList,\n MainScroll,\n MainScrollItem,\n SearchInput,\n UrlHandler,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_renderSlot"],"mappings":";;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAEYC,wBAFI,IAAG,CAAA,GAAA,CAAA,EAAA;AAAA,IAAE,GAAI,EAAA,SAAA;AAAA,IAAW,eAAa,IAAK,CAAA,IAAA,CAAA,EAAA;AAAA,GAAA,EAAA;qBACpD,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/scroll/components/scroll-to-top.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll-to-top.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <BaseEventButton\n v-if=\"isVisible\"\n class=\"x-scroll-to-top x-button\"\n data-test=\"scroll-to-top\"\n aria-label=\"Scroll to top\"\n :events=\"events\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton, NoAnimation } from '../../../components'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/*\n The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n \n @public\n /\nexport default defineComponent({\n name: 'ScrollToTop',\n xModule: scrollXModule.name,\n components: { BaseEventButton },\n props: {\n /\n Animation to use for showing/hiding the button.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation,\n },\n /\n Threshold in pixels from the top to show the button.\n \n @public\n /\n thresholdPx: Number,\n /\n Id of the target scroll component.\n \n @public\n /\n scrollId: {\n type: String,\n default: MainScrollId,\n },\n },\n setup(props) {\n /\n State of all the scroll components in this module.\n \n @internal\n /\n // TODO: Directly retrieve the needed data in this computed property\n const { data } = useState('scroll')\n\n /\n The scroll data retrieved for this component.\n \n @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n * passed. Otherwise it returns `null`.\n * @internal\n /\n const scrollData = computed(() => {\n return props.scrollId && data.value[props.scrollId]\n ? data.value[props.scrollId]\n : {\n position: 0,\n direction: 'UP',\n hasReachedStart: false,\n hasAlmostReachedEnd: false,\n hasReachedEnd: false,\n }\n })\n\n /\n Event that will be emitted when the scroll to top is clicked.\n \n @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n * @internal\n /\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId }),\n )\n\n /\n Checks if the thresholdPx prop has been provided and if it is a number.\n \n @returns If the thresholdPx is a number or not.\n * @internal\n /\n const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number')\n\n /\n Checks if the threshold has been reached in case the threshold strategy is in use.\n \n @returns If the scrollTop is bigger than the thresholdPx.\n * @internal\n /\n const isThresholdReached = computed(\n () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!,\n )\n\n /\n Returns if the scroll has almost reached its end or not.\n \n @returns True if the scroll has almost reached the end and the user is still scrolling down.\n * @internal\n /\n const hasAlmostReachedScrollEnd = computed(\n () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN',\n )\n\n /\n Whether if the button is visible or not depending on the strategy being used.\n \n @returns If the button should be visible or not.\n * @internal\n */\n const isVisible = computed(() =>\n useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value,\n )\n\n return {\n events,\n isVisible,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the scroll\n that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n <div>\n <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n <span>Scroll to top</span>\n </ScrollToTop>\n </div>\n</template>\n\n<script>\nimport { ScrollToTop } from '@empathyco/x-components/scroll'\n\nexport default {\n name: 'ScrollToTopTest',\n components: {\n ScrollToTop,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_renderSlot"~~,"_createCommentVNode"~~],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAWYC,wBAXI,IAAS,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,~~IAD3B~~,~~iBAEI~~,MASkB;AAAA,MARV,+~~BADRD~~,WASkB,CAAA,0BAAA,EAAA;AAAA,~~QAXtB~~,GAAA,EAAA,CAAA;~~AAAA~~,~~QAIM,~~KAAM,EAAA,0BAAA;AAAA,QACN,WAAU,EAAA,eAAA;AAAA,QACV,YAAW,EAAA,eAAA;AAAA,QACV,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,OAAA,EAAA;~~AAPf~~,~~QAAA,OAAA,EAAAE,OAAA,CAUM,~~MAAQ;AAAA,~~UAARC~~,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,CAAA~~;AAVd,QAAA,CAAA,EAAA,CAAA;AAAA;AAAA,OAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"scroll-to-top.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <BaseEventButton\n v-if=\"isVisible\"\n class=\"x-scroll-to-top x-button\"\n data-test=\"scroll-to-top\"\n aria-label=\"Scroll to top\"\n :events=\"events\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton, NoAnimation } from '../../../components'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/*\n The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n \n @public\n /\nexport default defineComponent({\n name: 'ScrollToTop',\n xModule: scrollXModule.name,\n components: { BaseEventButton },\n props: {\n /\n Animation to use for showing/hiding the button.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation,\n },\n /\n Threshold in pixels from the top to show the button.\n \n @public\n /\n thresholdPx: Number,\n /\n Id of the target scroll component.\n \n @public\n /\n scrollId: {\n type: String,\n default: MainScrollId,\n },\n },\n setup(props) {\n /\n State of all the scroll components in this module.\n \n @internal\n /\n // TODO: Directly retrieve the needed data in this computed property\n const { data } = useState('scroll')\n\n /\n The scroll data retrieved for this component.\n \n @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n * passed. Otherwise it returns `null`.\n * @internal\n /\n const scrollData = computed(() => {\n return props.scrollId && data.value[props.scrollId]\n ? data.value[props.scrollId]\n : {\n position: 0,\n direction: 'UP',\n hasReachedStart: false,\n hasAlmostReachedEnd: false,\n hasReachedEnd: false,\n }\n })\n\n /\n Event that will be emitted when the scroll to top is clicked.\n \n @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n * @internal\n /\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId }),\n )\n\n /\n Checks if the thresholdPx prop has been provided and if it is a number.\n \n @returns If the thresholdPx is a number or not.\n * @internal\n /\n const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number')\n\n /\n Checks if the threshold has been reached in case the threshold strategy is in use.\n \n @returns If the scrollTop is bigger than the thresholdPx.\n * @internal\n /\n const isThresholdReached = computed(\n () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!,\n )\n\n /\n Returns if the scroll has almost reached its end or not.\n \n @returns True if the scroll has almost reached the end and the user is still scrolling down.\n * @internal\n /\n const hasAlmostReachedScrollEnd = computed(\n () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN',\n )\n\n /\n Whether if the button is visible or not depending on the strategy being used.\n \n @returns If the button should be visible or not.\n * @internal\n */\n const isVisible = computed(() =>\n useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value,\n )\n\n return {\n events,\n isVisible,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the scroll\n that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n <div>\n <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n <span>Scroll to top</span>\n </ScrollToTop>\n </div>\n</template>\n\n<script>\nimport { ScrollToTop } from '@empathyco/x-components/scroll'\n\nexport default {\n name: 'ScrollToTopTest',\n components: {\n ScrollToTop,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_renderSlot"],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAWYC,wBAXI,IAAS,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CACvB,MASkB;AAAA,MARV,+BADRF,WASkB,CAAA,0BAAA,EAAA;AAAA,QAAA,GAAA,EAAA,CAAA;QAPhB,KAAM,EAAA,0BAAA;AAAA,QACN,WAAU,EAAA,eAAA;AAAA,QACV,YAAW,EAAA,eAAA;AAAA,QACV,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,OAAA,EAAA;yBAGT,MAAQ;AAAA,UAARG,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,CAAA;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/scroll.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n <BaseScroll\n :id=\"id\"\n ref=\"scrollRef\"\n @scroll=\"emitScroll\"\n @scroll:direction-change=\"emitScrollDirectionChange\"\n @scroll:at-start=\"emitScrollAtStart\"\n @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n @scroll:at-end=\"emitScrollAtEnd\"\n >\n <slot />\n </BaseScroll>\n</template>\n\n<script lang=\"ts\">\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ScrollDirection } from '../../../components/scroll/scroll.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport BaseScroll from '../../../components/scroll/base-scroll.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/*\n Scrollable container that emits scroll related X Events. It exposes all the listeners\n * and props from the {@link BaseScroll} component.\n \n @public\n /\nexport default defineComponent({\n name: 'Scroll',\n xModule: scrollXModule.name,\n components: { BaseScroll },\n props: {\n /\n Id to identify the component.\n \n @public\n /\n id: {\n type: String,\n default: MainScrollId,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const scrollRef = ref<ComponentPublicInstance>()\n\n /\n Creates a {@link WireMetadata} metadata object for all the emitted events.\n \n @internal\n * @returns A new {@link WireMetadata} object.\n /\n const createEventMetadata = (): Partial<WireMetadata> => {\n return {\n target: scrollRef.value?.$el as HTMLElement,\n id: props.id,\n }\n }\n\n /\n Emits the `UserScrolled` event.\n \n @param position - The new position of scroll.\n * @internal\n /\n const emitScroll = (position: number) => {\n $x.emit('UserScrolled', position, createEventMetadata())\n }\n\n /\n Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n \n @param direction - The new direction of scroll.\n * @internal\n /\n const emitScrollDirectionChange = (direction: ScrollDirection) => {\n $x.emit('UserChangedScrollDirection', direction, createEventMetadata())\n }\n\n /\n Emits the 'UserReachedScrollStart' event when the user reaches the start.\n \n @param isAtStart - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n const emitScrollAtStart = (isAtStart: boolean) => {\n $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata())\n }\n\n /\n Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n * @internal\n /\n const emitScrollAlmostAtEnd = (isAlmostAtEnd: boolean) => {\n $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata())\n }\n\n /\n Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n const emitScrollAtEnd = (isAtEnd: boolean) => {\n $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata())\n }\n\n /\n Scrolls to initial position when the user has clicked the scroll to top button.\n \n @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n * @internal\n */\n $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {\n if (scrollId === props.id && scrollRef.value) {\n ;(scrollRef.value.$el as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' })\n }\n })\n\n return {\n scrollRef,\n emitScrollAtEnd,\n emitScrollAlmostAtEnd,\n emitScrollAtStart,\n emitScrollDirectionChange,\n emitScroll,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted after the user scrolls in this container. The payload is the scroll top distance in\n pixels.\n- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted when the user changes the scroll direction. The payload is the new scrolling direction.\n- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted when the user scrolls up to the initial position of the scroll.\n- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted when the user is about to reach the bottom part of the scroll.\n- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted when the user has reached the bottom part of the scroll.\n\n## Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Customized usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n <Scroll id=\"exampleScrollId\" throttleMs=\"50\" distanceToBottom=\"300\">\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nexport default {\n name: 'ScrollIdTest',\n components: {\n Scroll,\n },\n}\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n <Scroll\n @scroll=\"scroll\"\n @scroll:direction-change=\"scrollDirectionChange\"\n @scroll:at-start=\"scrollAtStart\"\n @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n @scroll:at-end=\"scrollAtEnd\"\n id=\"exampleScrollId\"\n throttleMs=\"50\"\n distanceToBottom=\"300\"\n >\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nexport default {\n name: 'ScrollIdTest',\n components: {\n Scroll,\n },\n methods: {\n scroll(position) {\n console.log('scroll', position)\n },\n scrollDirectionChange(direction) {\n console.log('scroll:direction-change', direction)\n },\n scrollAtStart(isAtStart) {\n console.log('scroll:at-start', isAtStart)\n },\n scrollAlmostAtEnd(isAlmostAtEnd) {\n console.log('scroll:almost-at-end', isAlmostAtEnd)\n },\n scrollAtEnd(isAtEnd) {\n console.log('scroll:at-end', isAtEnd)\n },\n },\n}\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nexport default {\n name: 'ScrollIdTest',\n components: {\n Scroll,\n },\n mounted() {\n this.$x.on('UserScrolled').subscribe(distance => {\n console.log(distance)\n })\n this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n console.log(direction)\n })\n this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n console.log(isAtStart)\n })\n this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n console.log(isAlmostAtEnd)\n })\n this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n console.log(isAtEnd)\n })\n },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","~~_withCtx","~~_renderSlot"],"mappings":";;;;;;sBACEA,WAUa,CAAA,qBAAA,EAAA;AAAA,IATV,EAAI,EAAA,IAAA,CAAA,EAAA;AAAA,IACL,GAAI,EAAA,WAAA;AAAA,IACH,QAAQ,EAAA,IAAA,CAAA,UAAA;AAAA,IACR,0BAAyB,EAAA,IAAA,CAAA,yBAAA;AAAA,IACzB,kBAAiB,EAAA,IAAA,CAAA,iBAAA;AAAA,IACjB,sBAAsB,EAAA,IAAA,CAAA,qBAAA;AAAA,IACtB,gBAAe,EAAA,IAAA,CAAA,eAAA;AAAA,GAAA,EAAA;~~AARpB~~,~~IAAA,OAAA,EAAAC,OAAA,CAUI,~~MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA~~;AAVZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,IAAA,EAAA,UAAA,EAAA,0BAAA,EAAA,kBAAA,EAAA,sBAAA,EAAA,gBAAA,CAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n <BaseScroll\n :id=\"id\"\n ref=\"scrollRef\"\n @scroll=\"emitScroll\"\n @scroll:direction-change=\"emitScrollDirectionChange\"\n @scroll:at-start=\"emitScrollAtStart\"\n @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n @scroll:at-end=\"emitScrollAtEnd\"\n >\n <slot />\n </BaseScroll>\n</template>\n\n<script lang=\"ts\">\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ScrollDirection } from '../../../components/scroll/scroll.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport BaseScroll from '../../../components/scroll/base-scroll.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/*\n Scrollable container that emits scroll related X Events. It exposes all the listeners\n * and props from the {@link BaseScroll} component.\n \n @public\n /\nexport default defineComponent({\n name: 'Scroll',\n xModule: scrollXModule.name,\n components: { BaseScroll },\n props: {\n /\n Id to identify the component.\n \n @public\n /\n id: {\n type: String,\n default: MainScrollId,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const scrollRef = ref<ComponentPublicInstance>()\n\n /\n Creates a {@link WireMetadata} metadata object for all the emitted events.\n \n @internal\n * @returns A new {@link WireMetadata} object.\n /\n const createEventMetadata = (): Partial<WireMetadata> => {\n return {\n target: scrollRef.value?.$el as HTMLElement,\n id: props.id,\n }\n }\n\n /\n Emits the `UserScrolled` event.\n \n @param position - The new position of scroll.\n * @internal\n /\n const emitScroll = (position: number) => {\n $x.emit('UserScrolled', position, createEventMetadata())\n }\n\n /\n Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n \n @param direction - The new direction of scroll.\n * @internal\n /\n const emitScrollDirectionChange = (direction: ScrollDirection) => {\n $x.emit('UserChangedScrollDirection', direction, createEventMetadata())\n }\n\n /\n Emits the 'UserReachedScrollStart' event when the user reaches the start.\n \n @param isAtStart - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n const emitScrollAtStart = (isAtStart: boolean) => {\n $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata())\n }\n\n /\n Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n * @internal\n /\n const emitScrollAlmostAtEnd = (isAlmostAtEnd: boolean) => {\n $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata())\n }\n\n /\n Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n const emitScrollAtEnd = (isAtEnd: boolean) => {\n $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata())\n }\n\n /\n Scrolls to initial position when the user has clicked the scroll to top button.\n \n @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n * @internal\n */\n $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {\n if (scrollId === props.id && scrollRef.value) {\n ;(scrollRef.value.$el as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' })\n }\n })\n\n return {\n scrollRef,\n emitScrollAtEnd,\n emitScrollAlmostAtEnd,\n emitScrollAtStart,\n emitScrollDirectionChange,\n emitScroll,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted after the user scrolls in this container. The payload is the scroll top distance in\n pixels.\n- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted when the user changes the scroll direction. The payload is the new scrolling direction.\n- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted when the user scrolls up to the initial position of the scroll.\n- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted when the user is about to reach the bottom part of the scroll.\n- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n emitted when the user has reached the bottom part of the scroll.\n\n## Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Customized usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n <Scroll id=\"exampleScrollId\" throttleMs=\"50\" distanceToBottom=\"300\">\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nexport default {\n name: 'ScrollIdTest',\n components: {\n Scroll,\n },\n}\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n <Scroll\n @scroll=\"scroll\"\n @scroll:direction-change=\"scrollDirectionChange\"\n @scroll:at-start=\"scrollAtStart\"\n @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n @scroll:at-end=\"scrollAtEnd\"\n id=\"exampleScrollId\"\n throttleMs=\"50\"\n distanceToBottom=\"300\"\n >\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nexport default {\n name: 'ScrollIdTest',\n components: {\n Scroll,\n },\n methods: {\n scroll(position) {\n console.log('scroll', position)\n },\n scrollDirectionChange(direction) {\n console.log('scroll:direction-change', direction)\n },\n scrollAtStart(isAtStart) {\n console.log('scroll:at-start', isAtStart)\n },\n scrollAlmostAtEnd(isAlmostAtEnd) {\n console.log('scroll:almost-at-end', isAlmostAtEnd)\n },\n scrollAtEnd(isAtEnd) {\n console.log('scroll:at-end', isAtEnd)\n },\n },\n}\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nexport default {\n name: 'ScrollIdTest',\n components: {\n Scroll,\n },\n mounted() {\n this.$x.on('UserScrolled').subscribe(distance => {\n console.log(distance)\n })\n this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n console.log(direction)\n })\n this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n console.log(isAtStart)\n })\n this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n console.log(isAlmostAtEnd)\n })\n this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n console.log(isAtEnd)\n })\n },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAUa,CAAA,qBAAA,EAAA;AAAA,IATV,EAAI,EAAA,IAAA,CAAA,EAAA;AAAA,IACL,GAAI,EAAA,WAAA;AAAA,IACH,QAAQ,EAAA,IAAA,CAAA,UAAA;AAAA,IACR,0BAAyB,EAAA,IAAA,CAAA,yBAAA;AAAA,IACzB,kBAAiB,EAAA,IAAA,CAAA,iBAAA;AAAA,IACjB,sBAAsB,EAAA,IAAA,CAAA,qBAAA;AAAA,IACtB,gBAAe,EAAA,IAAA,CAAA,eAAA;AAAA,GAAA,EAAA;qBAEhB,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/search/components/banner.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n <component\n :is=\"banner.url ? 'a' : 'figure'\"\n v-if=\"!imageFailed\"\n :href=\"banner.url\"\n class=\"x-banner\"\n data-test=\"banner\"\n v-on=\"banner.url ? anchorEvents() : {}\"\n >\n <img\n :src=\"banner.image\"\n :alt=\"banner.title ? banner.title : 'Banner'\"\n class=\"x-banner__image\"\n data-test=\"banner-image\"\n @error=\"imageFailed = true\"\n />\n <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n {{ banner.title }}\n </h2>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/*.\n A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'Banner',\n xModule: searchXModule.name,\n props: {\n /\n The banner data.\n \n @public\n /\n banner: {\n type: Object as PropType<BannerModel>,\n required: true,\n },\n titleClass: String,\n },\n setup(props) {\n const xBus = useXBus()\n\n /\n Flag to handle banner image errors.\n \n @public\n /\n const imageFailed = ref(false)\n\n /\n Emits the banner click event.\n \n @internal\n /\n const emitClickEvent = (): void => {\n xBus.emit('UserClickedABanner', props.banner)\n }\n\n /\n Returns the events supported by the anchor.\n \n @returns Events supported by the anchor.\n \n @internal\n */\n const anchorEvents = (): Partial<{\n [key in keyof GlobalEventHandlersEventMap]: () => void\n }> => ({\n click: () => emitClickEvent(),\n auxclick: () => emitClickEvent(),\n contextmenu: () => emitClickEvent(),\n })\n\n return {\n imageFailed,\n anchorEvents,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n\n.x-banner__image {\n width: 100%;\n object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n <Banner :banner=\"banner\" />\n</template>\n\n<script>\nimport { Banner } from '@empathyco/x-components/search'\nexport default {\n name: 'BannerDemo',\n components: {\n Banner,\n },\n data() {\n return {\n banner: {\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n },\n }\n },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\nimport { Banner } from '@empathyco/x-components/search'\nexport default {\n name: 'BannerDemo',\n components: {\n Banner,\n },\n data() {\n return {\n banner: {\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n },\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_createElementVNode","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode"],"mappings":"~~;;;;;AAAA,MAAA,UAAA,GAAA,CAAA,KAAA,EAAA,KAAA,CAAA,CAAA;;~~AAGW,EAAA,OAAA,CAAA,IAAA,CAAA,WAAA,IAAAA,SAAA,EAAA,EAFTC,WAkBY,CAAAC,uBAAA,CAjBL,IAAO,CAAA,MAAA,CAAA,GAAA,GAAG,iBADjBC,UAkBY,CAAA;AAAA,~~IAnBd~~,GAAA,EAAA,CAAA;~~AAAA~~,~~IAIK~~,~~MAAM~~,IAAO,CAAA,MAAA,CAAA,GAAA;AAAA,IACd,KAAM,EAAA,UAAA;AAAA,IACN,WAAU,EAAA,QAAA;AAAA,GAAA,EACVC,UAAuC,CAAA,IAAA,CAAjC,MAAO,CAAA,GAAA,GAAM,IAAY,CAAA,YAAA,EAAA,GAAA,EAAA,CAAA,CAAA,EAAA;AAAA,~~IAPnC~~,~~iBASI~~,MAME;AAAA,MANFC,kBAME,CAAA,KAAA,EAAA;AAAA,QALC,KAAK,IAAO,CAAA,MAAA,CAAA,KAAA;AAAA,QACZ,GAAK,EAAA,IAAA,CAAA,MAAA,CAAO,KAAQ,GAAA,IAAA,CAAA,MAAA,CAAO,KAAK,GAAA,QAAA;AAAA,QACjC,KAAM,EAAA,iBAAA;AAAA,QACN,WAAU,EAAA,cAAA;AAAA,QACT,OAAA,EAAK,sCAAE,IAAW,CAAA,WAAA,GAAA,IAAA,CAAA;AAAA,~~OAdzB~~,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;~~AAAA~~,~~MAgBc~~,~~YAAO~~,KAAjB,~~IAAAL~~,SAAA,EAAA,~~EAAAM~~,kBAAA;AAAA,QAEK,IAAA;AAAA,QAAA;AAAA,~~UAlBT~~,GAAA,EAAA,CAAA;~~AAAA~~,~~UAgB4B~~,~~KAAA~~,~~EAhB5BC~~,~~cAgBkC,~~CAAA,~~CAAA~~,~~iBAAA~~,~~EAA0B,~~IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,UAAE,WAAU,EAAA,cAAA;AAAA,SAAA;AACzE,QAAAC,eAAA,CAAA,IAAA,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA,QAAA,CAAA;AAAA;AAAA,~~OAjBrB~~,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA~~;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,EAAA,EAAA,CAAA,MAAA,CAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n <component\n :is=\"banner.url ? 'a' : 'figure'\"\n v-if=\"!imageFailed\"\n :href=\"banner.url\"\n class=\"x-banner\"\n data-test=\"banner\"\n v-on=\"banner.url ? anchorEvents() : {}\"\n >\n <img\n :src=\"banner.image\"\n :alt=\"banner.title ? banner.title : 'Banner'\"\n class=\"x-banner__image\"\n data-test=\"banner-image\"\n @error=\"imageFailed = true\"\n />\n <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n {{ banner.title }}\n </h2>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/*.\n A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'Banner',\n xModule: searchXModule.name,\n props: {\n /\n The banner data.\n \n @public\n /\n banner: {\n type: Object as PropType<BannerModel>,\n required: true,\n },\n titleClass: String,\n },\n setup(props) {\n const xBus = useXBus()\n\n /\n Flag to handle banner image errors.\n \n @public\n /\n const imageFailed = ref(false)\n\n /\n Emits the banner click event.\n \n @internal\n /\n const emitClickEvent = (): void => {\n xBus.emit('UserClickedABanner', props.banner)\n }\n\n /\n Returns the events supported by the anchor.\n \n @returns Events supported by the anchor.\n \n @internal\n */\n const anchorEvents = (): Partial<{\n [key in keyof GlobalEventHandlersEventMap]: () => void\n }> => ({\n click: () => emitClickEvent(),\n auxclick: () => emitClickEvent(),\n contextmenu: () => emitClickEvent(),\n })\n\n return {\n imageFailed,\n anchorEvents,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n\n.x-banner__image {\n width: 100%;\n object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n <Banner :banner=\"banner\" />\n</template>\n\n<script>\nimport { Banner } from '@empathyco/x-components/search'\nexport default {\n name: 'BannerDemo',\n components: {\n Banner,\n },\n data() {\n return {\n banner: {\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n },\n }\n },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\nimport { Banner } from '@empathyco/x-components/search'\nexport default {\n name: 'BannerDemo',\n components: {\n Banner,\n },\n data() {\n return {\n banner: {\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n },\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createElementVNode","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode"],"mappings":";;;;;;;AAGW,EAAA,OAAA,CAAA,IAAA,CAAA,WAAA,IAAAA,SAAA,EAAA,EAFTC,WAkBY,CAAAC,uBAAA,CAjBL,IAAO,CAAA,MAAA,CAAA,GAAA,GAAG,iBADjBC,UAkBY,CAAA;AAAA,IAAA,GAAA,EAAA,CAAA;AAfT,IAAA,IAAA,EAAM,IAAO,CAAA,MAAA,CAAA,GAAA;AAAA,IACd,KAAM,EAAA,UAAA;AAAA,IACN,WAAU,EAAA,QAAA;AAAA,GAAA,EACVC,UAAuC,CAAA,IAAA,CAAjC,MAAO,CAAA,GAAA,GAAM,IAAY,CAAA,YAAA,EAAA,GAAA,EAAA,CAAA,CAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CAE/B,MAME;AAAA,MANFC,kBAME,CAAA,KAAA,EAAA;AAAA,QALC,KAAK,IAAO,CAAA,MAAA,CAAA,KAAA;AAAA,QACZ,GAAK,EAAA,IAAA,CAAA,MAAA,CAAO,KAAQ,GAAA,IAAA,CAAA,MAAA,CAAO,KAAK,GAAA,QAAA;AAAA,QACjC,KAAM,EAAA,iBAAA;AAAA,QACN,WAAU,EAAA,cAAA;AAAA,QACT,OAAA,EAAK,sCAAE,IAAW,CAAA,WAAA,GAAA,IAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAEX,MAAA,IAAA,CAAA,MAAA,CAAO,KAAjB,IAAAN,SAAA,EAAA,EAAAO,kBAAA;AAAA,QAEK,IAAA;AAAA,QAAA;AAAA,UAAA,GAAA,EAAA,CAAA;UAFmB,KAAK,EAAAC,cAAA,CAAA,CAAC,mBAA0B,IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,UAAE,WAAU,EAAA,cAAA;AAAA,SAAA;AACzE,QAAAC,eAAA,CAAA,IAAA,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA,QAAA,CAAA;AAAA;AAAA,OAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/search/components/fallback-disclaimer.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fallback-disclaimer.vue.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n <div\n v-if=\"fromNoResultsWithFilters\"\n class=\"x-fallback-disclaimer\"\n data-test=\"fallback-disclaimer\"\n >\n <slot v-bind=\"{ query }\">\n No results found for {{ query }} with the selected filters. The filters have been unselected.\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n The `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n \n @public\n */\nexport default defineComponent({\n name: 'FallbackDisclaimer',\n xModule: searchXModule.name,\n setup() {\n const { query, fromNoResultsWithFilters } = useState('search')\n\n return { query, fromNoResultsWithFilters }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n <template #default=\"{ query }\">\n No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n </template>\n</FallbackDisclaimer>\n\n<script>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n FallbackDisclaimer,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode","_toDisplayString"~~,"_createCommentVNode"~~],"mappings":"~~;;;;;AAAA,EAAA,GAAA,EAAA,CAAA;AAAA,~~EAGI,KAAM,EAAA,uBAAA;AAAA,EACN,WAAU,EAAA,qBAAA;;;SAFJ,IADR,CAAA,wBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAQM,OARN,UAQM,EAAA;AAAA,IAHJC,UAEO,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,~~EARXC~~,~~cAMoB~~,CAAAC,kBAAA,CAAA,EAAA,KAAA,~~EAAA~~,~~IAAA~~,CAAA,KAAA,~~MAAhB~~,MAEO;AAAA,~~MARXC~~,eAAA;~~AAAA~~,~~QAM6B~~,~~wBAAA~~,~~GACFC~~,~~eAAG~~,~~CAAA~~,~~IAAA,CAAA,KAAK,~~CAAG,GAAA,gEAAA;AAAA,QAClC,CAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA~~;AARJ,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"fallback-disclaimer.vue.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n <div\n v-if=\"fromNoResultsWithFilters\"\n class=\"x-fallback-disclaimer\"\n data-test=\"fallback-disclaimer\"\n >\n <slot v-bind=\"{ query }\">\n No results found for {{ query }} with the selected filters. The filters have been unselected.\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n The `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n \n @public\n */\nexport default defineComponent({\n name: 'FallbackDisclaimer',\n xModule: searchXModule.name,\n setup() {\n const { query, fromNoResultsWithFilters } = useState('search')\n\n return { query, fromNoResultsWithFilters }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n <template #default=\"{ query }\">\n No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n </template>\n</FallbackDisclaimer>\n\n<script>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n FallbackDisclaimer,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode","_toDisplayString"],"mappings":";;;;;;EAGI,KAAM,EAAA,uBAAA;AAAA,EACN,WAAU,EAAA,qBAAA;;;SAFJ,IADR,CAAA,wBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAQM,OARN,UAQM,EAAA;AAAA,IAHJC,UAEO,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAFS,IAAK,CAAA,KAAA,EAAA,CAAA,CAAA,EAArB,MAEO;AAAA,MAAAC,eAAA;QAFkB,wBACF,GAAAC,eAAA,CAAG,UAAK,CAAG,GAAA,gEAAA;AAAA,QAClC,CAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;"}

package/js/x-modules/search/components/partial-query-button.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"partial-query-button.vue.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n <button\n ref=\"partialButtonEl\"\n class=\"x-partial-query-button x-button\"\n data-test=\"partial-query-button\"\n @click=\"emitEvents\"\n >\n <slot v-bind=\"{ query }\">{{ query }}</slot>\n </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { searchXModule } from '../x-module'\n\n/*\n A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n * intention to set the partial query.\n \n @public\n /\nexport default defineComponent({\n name: 'PartialQueryButton',\n xModule: searchXModule.name,\n props: {\n /\n The query property.\n \n @public\n /\n query: {\n type: String,\n required: true,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const partialButtonEl = ref<HTMLElement>()\n\n /\n Generates the {@link WireMetadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n target: partialButtonEl.value,\n feature: 'partial_result',\n })\n\n /\n Emits events when the button is clicked.\n \n @public\n */\n const emitEvents = () => {\n $x.emit('UserAcceptedAQuery', props.query, createEventMetadata())\n $x.emit('UserClickedPartialQuery', props.query, createEventMetadata())\n }\n\n return {\n partialButtonEl,\n emitEvents,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the partial query. The event payload is the partial\n query data.\n- [`UserClickedPartialQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the partial query. The event payload is the partial\n query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n <PartialQueryButton :query=\"query\" />\n</template>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n <PartialQueryButton>\n <template #default=\"{ query }\">\n <span class=\"x-partial-query-button__text\">\n Set the Partial query as the new query: {{ query }}!\n </span>\n </template>\n </PartialQueryButton>\n</template>\n\n<script>\nimport { PartialQueryButton } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n PartialQueryButton,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode"~~,"_toDisplayString"~~],"mappings":";;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAOS,QAAA;AAAA,IAAA;AAAA,MANP,GAAI,EAAA,iBAAA;AAAA,MACJ,KAAM,EAAA,iCAAA;AAAA,MACN,WAAU,EAAA,sBAAA;AAAA,MACT,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;~~AAER~~,~~MAAAC~~,~~UAAA~~,~~CAA2C~~,~~IAP/C,~~CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,~~EAOoB~~,IAAK,CAAA,KAAA,EAAA,CAAA,CAAA,EAArB,MAA2C;AAAA,~~QAP/CC~~,eAAA;~~AAAA~~,~~UAAAC,eAAA,CAOgC,~~IAAK,CAAA,KAAA,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
1	+ {"version":3,"file":"partial-query-button.vue.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n <button\n ref=\"partialButtonEl\"\n class=\"x-partial-query-button x-button\"\n data-test=\"partial-query-button\"\n @click=\"emitEvents\"\n >\n <slot v-bind=\"{ query }\">{{ query }}</slot>\n </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { searchXModule } from '../x-module'\n\n/*\n A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n * intention to set the partial query.\n \n @public\n /\nexport default defineComponent({\n name: 'PartialQueryButton',\n xModule: searchXModule.name,\n props: {\n /\n The query property.\n \n @public\n /\n query: {\n type: String,\n required: true,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const partialButtonEl = ref<HTMLElement>()\n\n /\n Generates the {@link WireMetadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n target: partialButtonEl.value,\n feature: 'partial_result',\n })\n\n /\n Emits events when the button is clicked.\n \n @public\n */\n const emitEvents = () => {\n $x.emit('UserAcceptedAQuery', props.query, createEventMetadata())\n $x.emit('UserClickedPartialQuery', props.query, createEventMetadata())\n }\n\n return {\n partialButtonEl,\n emitEvents,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the partial query. The event payload is the partial\n query data.\n- [`UserClickedPartialQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the partial query. The event payload is the partial\n query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n <PartialQueryButton :query=\"query\" />\n</template>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n <PartialQueryButton>\n <template #default=\"{ query }\">\n <span class=\"x-partial-query-button__text\">\n Set the Partial query as the new query: {{ query }}!\n </span>\n </template>\n </PartialQueryButton>\n</template>\n\n<script>\nimport { PartialQueryButton } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n PartialQueryButton,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode"],"mappings":";;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAOS,QAAA;AAAA,IAAA;AAAA,MANP,GAAI,EAAA,iBAAA;AAAA,MACJ,KAAM,EAAA,iCAAA;AAAA,MACN,WAAU,EAAA,sBAAA;AAAA,MACT,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;MAERC,UAA2C,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAA3B,IAAK,CAAA,KAAA,EAAA,CAAA,CAAA,EAArB,MAA2C;AAAA,QAAAC,eAAA;0BAAf,IAAK,CAAA,KAAA,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/search/components/partial-results-list.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"partialResults.length\"\n class=\"x-partial-results-list\"\n data-test=\"partial-results\"\n tag=\"ul\"\n >\n <li\n v-for=\"(partialResult, index) in partialResults\"\n :key=\"`${partialResult.query}-${index}`\"\n class=\"x-partial-result\"\n data-test=\"partial-result\"\n >\n <!--\n @slot (Required) Partial results item content\n @binding {Partial} partialResult - Partial Result data\n -->\n <slot :partial-result=\"partialResult\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n \n @public\n /\nexport default defineComponent({\n name: 'PartialResultsList',\n xModule: searchXModule.name,\n props: {\n /\n Animation component that will be used to animate the partial results.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n\n /\n Maximum number of partial results to show.\n \n @public\n /\n maxItemsToRender: {\n type: Number,\n default: 5,\n },\n },\n setup(props) {\n /\n The partials results from the search state.\n \n @public\n /\n const items = useState('search').partialResults\n\n /\n A limited number of partial results.\n \n @returns The partial results sliced by the maxItemsToRender.\n \n @internal\n */\n const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n return {\n partialResults,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n display: flex;\n flex-flow: column nowrap;\n list-style-type: none;\n padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n <PartialResultsList :maxItemsToRender=\"3\">\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <span>{{ partialResult.query }}</span>\n <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n <template #default=\"{ item }\">\n <BaseResultImage :result=\"item\" />\n <span class=\"x-result__title\">{{ item.name }}</span>\n </template>\n </BaseResultLink>\n </template>\n </BaseGrid>\n <PartialQueryButton :query=\"partialResult.query\">\n <template #default=\"{ query }\">Ver todos {{ query }}</template>\n </PartialQueryButton>\n </template>\n </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","~~_withCtx","~~_createElementBlock","_Fragment","_renderList","_renderSlot"~~,"_createCommentVNode"~~],"mappings":";;;;;;SAGU,IAAe,CAAA,cAAA,CAAA,MAAA,IAAAA,SAAA,EAAA,EAFvBC,WAmBY,CAAAC,uBAAA,CAlBL,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,~~IAFlB~~,GAAA,EAAA,CAAA;~~AAAA~~,~~IAII,~~KAAM,EAAA,wBAAA;AAAA,IACN,WAAU,EAAA,iBAAA;AAAA,IACV,GAAI,EAAA,IAAA;AAAA,GAAA,EAAA;~~AANR~~,~~IAAA,OAAA,EAAAC,OAAA,CASM,~~MAAgD;AAAA,~~OADlDH~~,SAAA,CAAA,IAAA,CAAA,~~EAAAI~~,kBAAA;AAAA,QAWKC,QAAA;AAAA,QAAA,IAAA;AAAA,~~QAnBTC~~,~~UASuC~~,CAAA,IAAA,CAAA,cAAA,~~EATvC~~,~~CASc~~,aAAA,EAAe,KAAK,KAAA;8BAD9BF,kBAWK,CAAA,IAAA,EAAA;AAAA,YATF,GAAG,EAAA,CAAA,EAAK,aAAc,CAAA,KAAK,IAAI,KAAK,CAAA,CAAA;AAAA,YACrC,KAAM,EAAA,kBAAA;AAAA,YACN,WAAU,EAAA,gBAAA;AAAA,WAAA,EAAA;AAMV,YAAAG,UAAA,CAAwC,0BAAjC,aAA6B,EAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,WAAA,CAAA,CAAA~~;;;;;;AAlB1C,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"partialResults.length\"\n class=\"x-partial-results-list\"\n data-test=\"partial-results\"\n tag=\"ul\"\n >\n <li\n v-for=\"(partialResult, index) in partialResults\"\n :key=\"`${partialResult.query}-${index}`\"\n class=\"x-partial-result\"\n data-test=\"partial-result\"\n >\n <!--\n @slot (Required) Partial results item content\n @binding {Partial} partialResult - Partial Result data\n -->\n <slot :partial-result=\"partialResult\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n \n @public\n /\nexport default defineComponent({\n name: 'PartialResultsList',\n xModule: searchXModule.name,\n props: {\n /\n Animation component that will be used to animate the partial results.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n\n /\n Maximum number of partial results to show.\n \n @public\n /\n maxItemsToRender: {\n type: Number,\n default: 5,\n },\n },\n setup(props) {\n /\n The partials results from the search state.\n \n @public\n /\n const items = useState('search').partialResults\n\n /\n A limited number of partial results.\n \n @returns The partial results sliced by the maxItemsToRender.\n \n @internal\n */\n const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n return {\n partialResults,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n display: flex;\n flex-flow: column nowrap;\n list-style-type: none;\n padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n <PartialResultsList :maxItemsToRender=\"3\">\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <span>{{ partialResult.query }}</span>\n <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n <template #default=\"{ item }\">\n <BaseResultImage :result=\"item\" />\n <span class=\"x-result__title\">{{ item.name }}</span>\n </template>\n </BaseResultLink>\n </template>\n </BaseGrid>\n <PartialQueryButton :query=\"partialResult.query\">\n <template #default=\"{ query }\">Ver todos {{ query }}</template>\n </PartialQueryButton>\n </template>\n </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot"],"mappings":";;;;;;SAGU,IAAe,CAAA,cAAA,CAAA,MAAA,IAAAA,SAAA,EAAA,EAFvBC,WAmBY,CAAAC,uBAAA,CAlBL,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAEd,KAAM,EAAA,wBAAA;AAAA,IACN,WAAU,EAAA,iBAAA;AAAA,IACV,GAAI,EAAA,IAAA;AAAA,GAAA,EAAA;qBAGF,MAAgD;AAAA,OADlDF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAWKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAV8BC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAc,CAAvC,aAAA,EAAe,KAAK,KAAA;8BAD9BF,kBAWK,CAAA,IAAA,EAAA;AAAA,YATF,GAAG,EAAA,CAAA,EAAK,aAAc,CAAA,KAAK,IAAI,KAAK,CAAA,CAAA;AAAA,YACrC,KAAM,EAAA,kBAAA;AAAA,YACN,WAAU,EAAA,gBAAA;AAAA,WAAA,EAAA;AAMV,YAAAG,UAAA,CAAwC,0BAAjC,aAA6B,EAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,WAAA,CAAA,CAAA;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/promoted.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n <a\n :href=\"promoted.url\"\n class=\"x-promoted\"\n data-test=\"promoted\"\n @click=\"emitUserClickedAPromoted\"\n @click.right=\"emitUserClickedAPromoted\"\n @click.middle=\"emitUserClickedAPromoted\"\n >\n <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n {{ promoted.title }}\n </h2>\n </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Promoted as PromotedModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/*\n A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'Promoted',\n xModule: searchXModule.name,\n props: {\n /\n The promoted data.\n \n @public\n /\n promoted: {\n type: Object as PropType<PromotedModel>,\n required: true,\n },\n titleClass: String,\n },\n setup(props) {\n const xBus = useXBus()\n\n /\n Emits the promoted click event.\n \n @internal\n */\n const emitUserClickedAPromoted = () => {\n xBus.emit('UserClickedAPromoted', props.promoted)\n }\n\n return {\n emitUserClickedAPromoted,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-promoted {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n\n.x-promoted__image {\n width: 100%;\n object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\nimport { Promoted } from '@empathyco/x-components/search'\n\nexport default {\n name: 'PromotedDemo',\n components: {\n Promoted,\n },\n data() {\n return {\n promoted: {\n modelName: 'Promoted',\n id: 'promoted-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n },\n }\n },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the promoted title.\n\n```vue\n<template>\n <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\nimport { Promoted } from '@empathyco/x-components/search'\n\nexport default {\n name: 'PromotedDemo',\n components: {\n Promoted,\n },\n data() {\n return {\n promoted: {\n modelName: 'Promoted',\n id: 'promoted-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n },\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass","_toDisplayString"],"mappings":"~~;;;;;AAAA,MAAA,UAAA,GAAA,CAAA,MAAA,CAAA,CAAA;AAAA,MAAA,UAAA,GAAA,CAAA,KAAA,EAAA,KAAA,CAAA,CAAA;;~~sBACEA,kBAYI,CAAA,GAAA,EAAA;AAAA,IAXD,MAAM,IAAS,CAAA,QAAA,CAAA,GAAA;AAAA,IAChB,KAAM,EAAA,YAAA;AAAA,IACN,WAAU,EAAA,UAAA;AAAA,IACT,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,~~IALZ~~,~~oEAMkB~~,IAAwB,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,~~IAN1C~~,~~gEAOmB~~,IAAwB,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;AAAA,GAAA,EAAA;IAEvCC,kBAA6E,CAAA,KAAA,EAAA;AAAA,MAAvE,KAAK,IAAS,CAAA,QAAA,CAAA,KAAA;AAAA,MAAO,KAAM,EAAA,mBAAA;AAAA,MAAqB,KAAK,IAAS,CAAA,QAAA,CAAA,KAAA;AAAA,~~KATxE~~,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA;~~AAAA~~,~~IAUIA~~,kBAAA;AAAA,MAEK,IAAA;AAAA,MAAA;AAAA,QAFD,KAAA,~~EAVRC~~,~~cAUc~~,CAAA,CAAA,mBAAA,EAA4B,IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,QAAE,WAAU,EAAA,gBAAA;AAAA,OAAA;AACvD,MAAAC,eAAA,CAAA,IAAA,CAAA,QAAA,CAAS,KAAK,CAAA;AAAA,MAAA,CAAA;AAAA;AAAA,KAAA;AAAA,~~GAXvB~~,EAAA,EAAA,EAAA,UAAA,CAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n <a\n :href=\"promoted.url\"\n class=\"x-promoted\"\n data-test=\"promoted\"\n @click=\"emitUserClickedAPromoted\"\n @click.right=\"emitUserClickedAPromoted\"\n @click.middle=\"emitUserClickedAPromoted\"\n >\n <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n {{ promoted.title }}\n </h2>\n </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Promoted as PromotedModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/*\n A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'Promoted',\n xModule: searchXModule.name,\n props: {\n /\n The promoted data.\n \n @public\n /\n promoted: {\n type: Object as PropType<PromotedModel>,\n required: true,\n },\n titleClass: String,\n },\n setup(props) {\n const xBus = useXBus()\n\n /\n Emits the promoted click event.\n \n @internal\n */\n const emitUserClickedAPromoted = () => {\n xBus.emit('UserClickedAPromoted', props.promoted)\n }\n\n return {\n emitUserClickedAPromoted,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-promoted {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n\n.x-promoted__image {\n width: 100%;\n object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\nimport { Promoted } from '@empathyco/x-components/search'\n\nexport default {\n name: 'PromotedDemo',\n components: {\n Promoted,\n },\n data() {\n return {\n promoted: {\n modelName: 'Promoted',\n id: 'promoted-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n },\n }\n },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the promoted title.\n\n```vue\n<template>\n <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\nimport { Promoted } from '@empathyco/x-components/search'\n\nexport default {\n name: 'PromotedDemo',\n components: {\n Promoted,\n },\n data() {\n return {\n promoted: {\n modelName: 'Promoted',\n id: 'promoted-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n },\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_withModifiers","_createElementVNode","_normalizeClass","_toDisplayString"],"mappings":";;;;;;;;sBACEA,kBAYI,CAAA,GAAA,EAAA;AAAA,IAXD,MAAM,IAAS,CAAA,QAAA,CAAA,GAAA;AAAA,IAChB,KAAM,EAAA,YAAA;AAAA,IACN,WAAU,EAAA,UAAA;AAAA,IACT,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,aAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KACM,IAAwB,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,IAAA,SAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,aAAA,CAAA,CAAA,GAAA,IAAA,KACvB,IAAwB,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;AAAA,GAAA,EAAA;IAEvCC,kBAA6E,CAAA,KAAA,EAAA;AAAA,MAAvE,KAAK,IAAS,CAAA,QAAA,CAAA,KAAA;AAAA,MAAO,KAAM,EAAA,mBAAA;AAAA,MAAqB,KAAK,IAAS,CAAA,QAAA,CAAA,KAAA;AAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA;AACpE,IAAAA,kBAAA;AAAA,MAEK,IAAA;AAAA,MAAA;AAAA,QAFD,KAAA,EAAKC,cAAC,CAAA,CAAA,mBAAA,EAA4B,IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,QAAE,WAAU,EAAA,gBAAA;AAAA,OAAA;AACvD,MAAAC,eAAA,CAAA,IAAA,CAAA,QAAA,CAAS,KAAK,CAAA;AAAA,MAAA,CAAA;AAAA;AAAA,KAAA;AAAA,GAAA,EAAA,EAAA,EAAA,UAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/redirection.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"redirection.vue.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n <div v-if=\"redirection && slots.default\" class=\"x-redirection\" data-test=\"redirection\">\n <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Redirection as RedirectionModel } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { XEvent } from '../../../wiring/events.types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\nexport default defineComponent({\n name: 'Redirection',\n xModule: searchXModule.name,\n props: {\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n mode: {\n type: String as PropType<'auto' \| 'manual'>,\n default: 'auto',\n },\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n delayInSeconds: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n const { redirections } = useState('search')\n\n /\n List of events to stop the animation.\n /\n const eventsToStopAnimation: XEvent[] = [\n 'UserAcceptedAQuery',\n 'UserClearedQuery',\n 'UserSelectedARelatedTag',\n ]\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n const timeoutId: Ref<number> = ref(0)\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n const isRedirecting = ref(true)\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n const redirection = computed((): RedirectionModel \| null => redirections?.value[0] ?? null)\n\n /\n Stops the animation if the user search another query.\n \n @internal\n /\n const cancelRedirect = () => {\n clearTimeout(timeoutId.value)\n isRedirecting.value = false\n }\n\n eventsToStopAnimation.forEach(event => $x.on(event, false).subscribe(cancelRedirect))\n\n /\n Dispatches the redirection, updating the url.\n \n @public\n /\n const redirect = () => {\n clearTimeout(timeoutId.value)\n $x.emit('UserClickedARedirection', redirection.value!)\n window.location.replace(redirection.value!.url)\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n const abortRedirect = () => {\n cancelRedirect()\n $x.emit('UserClickedAbortARedirection')\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n watch(\n redirections,\n () => {\n isRedirecting.value = true\n if (props.mode === 'auto' && redirection.value) {\n timeoutId.value = window.setTimeout(redirect, props.delayInSeconds 1000)\n }\n },\n { immediate: true },\n )\n\n return {\n redirection,\n redirect,\n abortRedirect,\n isRedirecting,\n slots,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the abort redirection button.\n\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n <span>In a few seconds you're going to be redirected!</span>\n <span>{{ redirection.url }}</span>\n <button @click=\"redirection\">Redirect now!</button>\n <button @click=\"abortRedirect\">Abort redirection!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n}\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect }\">\n <span>{{ redirection.url }}</span>\n <button @click=\"redirect\">Redirect now!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n data() {\n return {\n mode: 'manual',\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":"~~;;;;;AAAA,EAAA,GAAA,EAAA,CAAA;AAAA,~~EAC2C,KAAM,EAAA,eAAA;AAAA,EAAgB,WAAU,EAAA,aAAA;;;AAA9D,EAAA,OAAA,IAAA,CAAA,WAAA,IAAe,IAAM,CAAA,KAAA,CAAA,OAAA,IAAAA,SAAA,EAAA,EAAhCC,kBAEM,CAAA,KAAA,EAFN,UAEM,EAAA;AAAA,IADJC,UAAA,CAAyF,~~IAF7F~~,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,WAAA,~~EAEoB~~,~~IAAW~~,CAAA,WAAA,~~EAAA~~,~~QAAA~~,~~EAAE~~,~~IAAQ~~,CAAA,QAAA,~~EAAA~~,~~aAAA~~,~~EAAE,~~IAAa,CAAA,aAAA,EAAA,aAAA,EAAE,IAAa,CAAA,aAAA,EAAA,cAAA,EAAE,IAAc,CAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAAA,~~GAFvF~~,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"redirection.vue.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n <div v-if=\"redirection && slots.default\" class=\"x-redirection\" data-test=\"redirection\">\n <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Redirection as RedirectionModel } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { XEvent } from '../../../wiring/events.types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\nexport default defineComponent({\n name: 'Redirection',\n xModule: searchXModule.name,\n props: {\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n mode: {\n type: String as PropType<'auto' \| 'manual'>,\n default: 'auto',\n },\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n delayInSeconds: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n const { redirections } = useState('search')\n\n /\n List of events to stop the animation.\n /\n const eventsToStopAnimation: XEvent[] = [\n 'UserAcceptedAQuery',\n 'UserClearedQuery',\n 'UserSelectedARelatedTag',\n ]\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n const timeoutId: Ref<number> = ref(0)\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n const isRedirecting = ref(true)\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n const redirection = computed((): RedirectionModel \| null => redirections?.value[0] ?? null)\n\n /\n Stops the animation if the user search another query.\n \n @internal\n /\n const cancelRedirect = () => {\n clearTimeout(timeoutId.value)\n isRedirecting.value = false\n }\n\n eventsToStopAnimation.forEach(event => $x.on(event, false).subscribe(cancelRedirect))\n\n /\n Dispatches the redirection, updating the url.\n \n @public\n /\n const redirect = () => {\n clearTimeout(timeoutId.value)\n $x.emit('UserClickedARedirection', redirection.value!)\n window.location.replace(redirection.value!.url)\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n const abortRedirect = () => {\n cancelRedirect()\n $x.emit('UserClickedAbortARedirection')\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n watch(\n redirections,\n () => {\n isRedirecting.value = true\n if (props.mode === 'auto' && redirection.value) {\n timeoutId.value = window.setTimeout(redirect, props.delayInSeconds 1000)\n }\n },\n { immediate: true },\n )\n\n return {\n redirection,\n redirect,\n abortRedirect,\n isRedirecting,\n slots,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the abort redirection button.\n\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n <span>In a few seconds you're going to be redirected!</span>\n <span>{{ redirection.url }}</span>\n <button @click=\"redirection\">Redirect now!</button>\n <button @click=\"abortRedirect\">Abort redirection!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n}\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect }\">\n <span>{{ redirection.url }}</span>\n <button @click=\"redirect\">Redirect now!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n data() {\n return {\n mode: 'manual',\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;;;EAC2C,KAAM,EAAA,eAAA;AAAA,EAAgB,WAAU,EAAA,aAAA;;;AAA9D,EAAA,OAAA,IAAA,CAAA,WAAA,IAAe,IAAM,CAAA,KAAA,CAAA,OAAA,IAAAA,SAAA,EAAA,EAAhCC,kBAEM,CAAA,KAAA,EAFN,UAEM,EAAA;AAAA,IADJC,UAAA,CAAyF,IAAzE,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,CAAA,WAAA,EAAW,QAAE,EAAA,IAAA,CAAA,QAAA,EAAQ,eAAE,IAAa,CAAA,aAAA,EAAA,aAAA,EAAE,IAAa,CAAA,aAAA,EAAA,cAAA,EAAE,IAAc,CAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/sort-dropdown.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n ref=\"rootRef\"\n :items=\"items\"\n :model-value=\"selectedSort\"\n :animation=\"animation\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n aria-label=\"Select sorting\"\n @update:model-value=\"emitUserClickedASort\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\n\nimport BaseDropdown from '../../../components/base-dropdown.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n /\nexport default defineComponent({\n name: 'SortDropdown',\n xModule: searchXModule.name,\n components: { BaseDropdown },\n props: {\n /* The list of possible sort values. /\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /* The transition to use for opening and closing the dropdown. /\n animation: [String, Object] as PropType<string \| typeof Vue>,\n },\n emits: ['change'],\n setup(_, { emit }) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n const rootRef = ref<typeof BaseDropdown>()\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /\n Emits the events related to the selection of a sort value.\n \n @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n \n @param sort - The selected sort.\n */\n function emitUserClickedASort(sort: Sort) {\n $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el })\n emit('change', sort)\n }\n\n return {\n emitUserClickedASort,\n rootRef,\n selectedSort,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortDropdown :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\nimport { SortDropdown } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortDropdown,\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\nimport { SortDropdown } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortDropdown,\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc'],\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode"~~,"_toDisplayString"~~],"mappings":";;;;;;sBACEA,WA6Be,CAAA,uBAAA,EAAA;AAAA,IA5Bb,GAAI,EAAA,SAAA;AAAA,IACH,KAAO,EAAA,IAAA,CAAA,KAAA;AAAA,IACP,aAAa,EAAA,IAAA,CAAA,YAAA;AAAA,IACb,SAAW,EAAA,IAAA,CAAA,SAAA;AAAA,IACZ,KAAM,EAAA,iBAAA;AAAA,IACN,WAAU,EAAA,eAAA;AAAA,IACV,YAAW,EAAA,gBAAA;AAAA,IACV,qBAAoB,EAAA,IAAA,CAAA,oBAAA;AAAA,GAAA,EAAA;AAEV,IAAA,MAAA,EAAMC,OAOf,CAAA,CAA+D,EAP5C,MAAA,EAAQ,IAAI,EAAA,KAAA;AAAA,MAO/BC,~~WAA~~+D,~~IAlBrE~~,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,~~EAkBsB~~,MAAQ,EAAA,IAAA,MAAxB,MAA+D;AAAA,~~QAlBrEC~~,eAAA;~~AAAA~~,~~UAAAC,eAAA,CAkBuD,~~IAAI,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;;AAE5C,IAAA,IAAA,~~EAAIL~~,OAQb,CAAA,CAAgF,EAR/D,IAAA,EAAM,eAAe,UAAU,EAAA,KAAA;AAAA,MAQhDC,WAAgF,~~IA5BtF~~,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,~~EA4BsB~~,~~MAAM~~,aAAe,EAAA,UAAA,MAArC,MAAgF;AAAA,~~QA5BtFC~~,eAAA;~~AAAA~~,~~UAAAC,eAAA,CA4BwE,~~IAAI,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA~~;;AA5B5E,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,aAAA,EAAA,WAAA,EAAA,qBAAA,CAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n ref=\"rootRef\"\n :items=\"items\"\n :model-value=\"selectedSort\"\n :animation=\"animation\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n aria-label=\"Select sorting\"\n @update:model-value=\"emitUserClickedASort\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\n\nimport BaseDropdown from '../../../components/base-dropdown.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n /\nexport default defineComponent({\n name: 'SortDropdown',\n xModule: searchXModule.name,\n components: { BaseDropdown },\n props: {\n /* The list of possible sort values. /\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /* The transition to use for opening and closing the dropdown. /\n animation: [String, Object] as PropType<string \| typeof Vue>,\n },\n emits: ['change'],\n setup(_, { emit }) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n const rootRef = ref<typeof BaseDropdown>()\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /\n Emits the events related to the selection of a sort value.\n \n @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n \n @param sort - The selected sort.\n */\n function emitUserClickedASort(sort: Sort) {\n $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el })\n emit('change', sort)\n }\n\n return {\n emitUserClickedASort,\n rootRef,\n selectedSort,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortDropdown :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\nimport { SortDropdown } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortDropdown,\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\nimport { SortDropdown } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortDropdown,\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc'],\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode"],"mappings":";;;;;;sBACEA,WA6Be,CAAA,uBAAA,EAAA;AAAA,IA5Bb,GAAI,EAAA,SAAA;AAAA,IACH,KAAO,EAAA,IAAA,CAAA,KAAA;AAAA,IACP,aAAa,EAAA,IAAA,CAAA,YAAA;AAAA,IACb,SAAW,EAAA,IAAA,CAAA,SAAA;AAAA,IACZ,KAAM,EAAA,iBAAA;AAAA,IACN,WAAU,EAAA,eAAA;AAAA,IACV,YAAW,EAAA,gBAAA;AAAA,IACV,qBAAoB,EAAA,IAAA,CAAA,oBAAA;AAAA,GAAA,EAAA;AAEV,IAAA,MAAA,EAAMC,OAOf,CAAA,CAA+D,EAP5C,MAAA,EAAQ,IAAI,EAAA,KAAA;AAAA,MAO/BC,UAA+D,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAA/C,MAAQ,EAAA,IAAA,MAAxB,MAA+D;AAAA,QAAAC,eAAA;0BAAd,IAAI,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;;AAE5C,IAAA,IAAA,EAAIJ,OAQb,CAAA,CAAgF,EAR/D,IAAA,EAAM,eAAe,UAAU,EAAA,KAAA;AAAA,MAQhDC,WAAgF,IAAhE,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,IAAA,EAAM,aAAe,EAAA,UAAA,MAArC,MAAgF;AAAA,QAAAC,eAAA;0BAAd,IAAI,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/search/components/sort-list.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n <li\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-sort-list__item\"\n >\n <BaseEventButton\n class=\"x-sort-list__button x-button\"\n data-test=\"x-sort-button\"\n :events=\"event\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n Sort list item options.\n /\ninterface SortListItem {\n item: Sort\n cssClasses: VueCSSClasses\n event: Partial<XEventsTypes>\n}\n\n/\n The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n /\nexport default defineComponent({\n name: 'SortList',\n xModule: searchXModule.name,\n components: { BaseEventButton },\n props: {\n /* The list of possible sort values. /\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /* The transition to use for rendering the list. /\n animation: {\n type: [String, Object] as PropType<string \| typeof Vue>,\n default: () => 'ul',\n },\n },\n setup(props) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /\n Sort list items.\n \n @returns A list of items with their css class and the event associate to it.\n */\n const listItems = computed<SortListItem[]>(() =>\n props.items.map(item => ({\n item,\n cssClasses: {\n 'x-sort-list__item--is-selected': item === selectedSort.value,\n 'x-option-list__item--is-selected': item === selectedSort.value,\n },\n event: { UserClickedASort: item },\n })),\n )\n\n return {\n listItems,\n selectedSort,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sort-list {\n list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortList :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortList,\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortList,\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc'],\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","~~_withCtx","~~_createElementBlock","_Fragment","_renderList","_normalizeClass","_createVNode","_renderSlot","_mergeProps","_createTextVNode"~~,"_toDisplayString"~~],"mappings":";;;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAiBYC,wBAjBI,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,IAAE,GAAI,EAAA,IAAA;AAAA,IAAK,KAAM,EAAA,2BAAA;AAAA,IAA4B,WAAU,EAAA,WAAA;AAAA,GAAA,EAAA;~~AADlF~~,~~IAAA,OAAA,EAAAC,OAAA,CAGM,~~MAAgD;AAAA,~~OADlDH~~,SAAA,CAAA,IAAA,CAAA,~~EAAAI~~,kBAAA;AAAA,QAeKC,QAAA;AAAA,QAAA,IAAA;AAAA,~~QAjBTC~~,~~UAG4C~~,~~CAAA~~,~~IAAA~~,CAAA,SAAA,~~EAH5C~~,~~CAGe~~,EAAA,~~IAAA~~,~~EAAM~~,~~YAAY,~~KAAK,EAAA,KAAA;AADlC,UAAA,~~OAAAN~~,SAAA,EAAA,~~EAAAI~~,kBAAA;AAAA,YAeK,IAAA;AAAA,YAAA;AAAA,cAbF,GAAK,EAAA,IAAA;AAAA,cACL,KAAA,~~EALPG~~,~~cAKc~~,CAAA,CAAA,UAAA,EACF,uCAAuC,CAAA,CAAA;AAAA,aAAA;;cAE7CC,WAQkB,CAAA,0BAAA,EAAA;AAAA,gBAPhB,KAAM,EAAA,8BAAA;AAAA,gBACN,WAAU,EAAA,eAAA;AAAA,gBACT,MAAQ,EAAA,KAAA;AAAA,eAAA,EAAA;~~AAXjB~~,~~gBAAA,OAAA,EAAAL,OAAA,CAaQ,~~MAEO;AAAA,~~kBAFPM~~,UAAA,CAEO,~~IAFP~~,CAAA,~~MAAA,~~EAAA,~~SAAA,EAAAC,UAAA,CAEO,EAff,~~OAAA,EAAA,IAAA,EAAA,EAAA,~~EAawB~~,MAAI,UAAc,EAAA,IAAA,KAAS,IAAY,CAAA,YAAA,EAAA,CAAA,EAAvD,MAEO;AAAA,~~oBAffC~~,eAAA;~~AAAA~~,~~sBAAAC,eAAA,CAca,~~IAAI,CAAA;AAAA,sBAAA,CAAA;AAAA;AAAA,qBAAA;AAAA,mBAAA,EAAA,IAAA,CAAA~~;;AAdjB,gBAAA,CAAA,EAAA,CAAA;AAAA;AAAA,eAAA,EAAA,IAAA,EAAA,CAAA,QAAA,CAAA,CAAA;;;;;;;;;;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n <li\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-sort-list__item\"\n >\n <BaseEventButton\n class=\"x-sort-list__button x-button\"\n data-test=\"x-sort-button\"\n :events=\"event\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n Sort list item options.\n /\ninterface SortListItem {\n item: Sort\n cssClasses: VueCSSClasses\n event: Partial<XEventsTypes>\n}\n\n/\n The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n /\nexport default defineComponent({\n name: 'SortList',\n xModule: searchXModule.name,\n components: { BaseEventButton },\n props: {\n /* The list of possible sort values. /\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /* The transition to use for rendering the list. /\n animation: {\n type: [String, Object] as PropType<string \| typeof Vue>,\n default: () => 'ul',\n },\n },\n setup(props) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /\n Sort list items.\n \n @returns A list of items with their css class and the event associate to it.\n */\n const listItems = computed<SortListItem[]>(() =>\n props.items.map(item => ({\n item,\n cssClasses: {\n 'x-sort-list__item--is-selected': item === selectedSort.value,\n 'x-option-list__item--is-selected': item === selectedSort.value,\n },\n event: { UserClickedASort: item },\n })),\n )\n\n return {\n listItems,\n selectedSort,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sort-list {\n list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortList :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortList,\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortList,\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc'],\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createVNode","_renderSlot","_mergeProps","_createTextVNode"],"mappings":";;;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAiBYC,wBAjBI,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,IAAE,GAAI,EAAA,IAAA;AAAA,IAAK,KAAM,EAAA,2BAAA;AAAA,IAA4B,WAAU,EAAA,WAAA;AAAA,GAAA,EAAA;qBAE5E,MAAgD;AAAA,OADlDF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAeKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAdmC,IAAS,CAAA,SAAA,EAAA,CAAA,EAAtC,IAAM,EAAA,UAAA,EAAY,KAAK,EAAA,KAAA;AADlC,UAAA,OAAAL,SAAA,EAAA,EAAAG,kBAAA;AAAA,YAeK,IAAA;AAAA,YAAA;AAAA,cAbF,GAAK,EAAA,IAAA;AAAA,cACL,KAAA,EAAKG,cAAE,CAAA,CAAA,UAAA,EACF,uCAAuC,CAAA,CAAA;AAAA,aAAA;;cAE7CC,WAQkB,CAAA,0BAAA,EAAA;AAAA,gBAPhB,KAAM,EAAA,8BAAA;AAAA,gBACN,WAAU,EAAA,eAAA;AAAA,gBACT,MAAQ,EAAA,KAAA;AAAA,eAAA,EAAA;iCAET,MAEO;AAAA,kBAFPC,UAAA,CAEO,wBAFPC,UAEO,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAFS,MAAI,UAAc,EAAA,IAAA,KAAS,IAAY,CAAA,YAAA,EAAA,CAAA,EAAvD,MAEO;AAAA,oBAAAC,eAAA;sCADF,IAAI,CAAA;AAAA,sBAAA,CAAA;AAAA;AAAA,qBAAA;AAAA,mBAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/sort-picker-list.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n tag=\"div\"\n class=\"x-sort-picker-list\"\n data-test=\"sort-picker\"\n role=\"list\"\n >\n <BaseEventButton\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"[cssClasses, buttonClass]\"\n data-test=\"sort-picker-button\"\n :events=\"event\"\n :aria-pressed=\"item === selectedSort \|\| null\"\n role=\"listitem\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n Sort Picker item options.\n /\ninterface SortPickerItem {\n item: Sort\n cssClasses: VueCSSClasses\n event: Partial<XEventsTypes>\n}\n\n/\n The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n /\nexport default defineComponent({\n name: 'SortPickerList',\n xModule: searchXModule.name,\n components: { BaseEventButton },\n props: {\n /* The list of possible sort values. /\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /* The transition to use for rendering the list. /\n animation: {\n type: [String, Object] as PropType<string \| typeof Vue>,\n default: () => 'div',\n },\n /* Class inherited by each sort button. /\n buttonClass: String,\n },\n setup(props) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /\n Sort list items.\n \n @returns A list of items with their css class and the event associate to it.\n */\n const listItems = computed<SortPickerItem[]>(() =>\n props.items.map(item => ({\n item,\n cssClasses: {\n 'x-selected': item === selectedSort.value,\n },\n event: { UserClickedASort: item },\n })),\n )\n\n return {\n listItems,\n selectedSort,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortPickerList,\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortPickerList,\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc'],\n }\n },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortPickerList,\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","~~_withCtx","~~_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","_mergeProps","_createTextVNode"~~,"_toDisplayString"~~],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAoBYC,wBAnBL,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,IACd,GAAI,EAAA,KAAA;AAAA,IACJ,KAAM,EAAA,oBAAA;AAAA,IACN,WAAU,EAAA,aAAA;AAAA,IACV,IAAK,EAAA,MAAA;AAAA,GAAA,EAAA;~~AANT~~,~~IAAA,OAAA,EAAAC,OAAA,CASM,~~MAAgD;AAAA,~~OADlDH~~,SAAA,CAAA,IAAA,CAAA,~~EAAAI~~,kBAAA;AAAA,QAYkBC,QAAA;AAAA,QAAA,IAAA;AAAA,~~QApBtBC~~,~~UAS4C~~,~~CAAA~~,~~IAAA~~,CAAA,SAAA,~~EAT5C~~,~~CASe~~,EAAA,~~IAAA~~,~~EAAM~~,~~YAAY,~~KAAK,EAAA,KAAA;~~8BADlCL~~,WAYkB,CAAA,0BAAA,EAAA;AAAA,YAVf,GAAK,EAAA,IAAA;AAAA,YACL,KAAA,~~EAXPM~~,~~cAWe~~,CAAA,CAAA,UAAA,EAAY,IAAW,CAAA,WAAA,CAAA,CAAA;AAAA,YAChC,WAAU,EAAA,oBAAA;AAAA,YACT,MAAQ,EAAA,KAAA;AAAA,YACR,cAAA,EAAc,SAAS,IAAY,CAAA,YAAA,IAAA,IAAA;AAAA,YACpC,IAAK,EAAA,UAAA;AAAA,WAAA,EAAA;~~AAfX~~,~~YAAA,OAAA,EAAAJ,OAAA,CAiBM,~~MAEO;AAAA,~~cAFPK~~,UAAA,CAEO,~~IAFP~~,CAAA,~~MAAA,~~EAAA,~~SAAA,EAAAC,UAAA,CAEO,EAnBb,~~OAAA,EAAA,IAAA,EAAA,EAAA,~~EAiBsB~~,MAAI,UAAc,EAAA,IAAA,KAAS,IAAY,CAAA,YAAA,EAAA,CAAA,EAAvD,MAEO;AAAA,~~gBAnBbC~~,eAAA;~~AAAA~~,~~kBAAAC,eAAA,CAkBW,~~IAAI,CAAA;AAAA,kBAAA,CAAA;AAAA;AAAA,iBAAA;AAAA,eAAA,CAAA~~;;AAlBf,YAAA,CAAA,EAAA,CAAA;AAAA;AAAA,WAAA,EAAA,IAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,cAAA,CAAA,CAAA,CAAA;;;;;;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n tag=\"div\"\n class=\"x-sort-picker-list\"\n data-test=\"sort-picker\"\n role=\"list\"\n >\n <BaseEventButton\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"[cssClasses, buttonClass]\"\n data-test=\"sort-picker-button\"\n :events=\"event\"\n :aria-pressed=\"item === selectedSort \|\| null\"\n role=\"listitem\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n Sort Picker item options.\n /\ninterface SortPickerItem {\n item: Sort\n cssClasses: VueCSSClasses\n event: Partial<XEventsTypes>\n}\n\n/\n The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n /\nexport default defineComponent({\n name: 'SortPickerList',\n xModule: searchXModule.name,\n components: { BaseEventButton },\n props: {\n /* The list of possible sort values. /\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /* The transition to use for rendering the list. /\n animation: {\n type: [String, Object] as PropType<string \| typeof Vue>,\n default: () => 'div',\n },\n /* Class inherited by each sort button. /\n buttonClass: String,\n },\n setup(props) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /\n Sort list items.\n \n @returns A list of items with their css class and the event associate to it.\n */\n const listItems = computed<SortPickerItem[]>(() =>\n props.items.map(item => ({\n item,\n cssClasses: {\n 'x-selected': item === selectedSort.value,\n },\n event: { UserClickedASort: item },\n })),\n )\n\n return {\n listItems,\n selectedSort,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortPickerList,\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortPickerList,\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc'],\n }\n },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n SortPickerList,\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","_mergeProps","_createTextVNode"],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAoBYC,wBAnBL,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,IACd,GAAI,EAAA,KAAA;AAAA,IACJ,KAAM,EAAA,oBAAA;AAAA,IACN,WAAU,EAAA,aAAA;AAAA,IACV,IAAK,EAAA,MAAA;AAAA,GAAA,EAAA;qBAGH,MAAgD;AAAA,OADlDF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAYkBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAXsB,IAAS,CAAA,SAAA,EAAA,CAAA,EAAtC,IAAM,EAAA,UAAA,EAAY,KAAK,EAAA,KAAA;8BADlCJ,WAYkB,CAAA,0BAAA,EAAA;AAAA,YAVf,GAAK,EAAA,IAAA;AAAA,YACL,KAAA,EAAKK,cAAG,CAAA,CAAA,UAAA,EAAY,IAAW,CAAA,WAAA,CAAA,CAAA;AAAA,YAChC,WAAU,EAAA,oBAAA;AAAA,YACT,MAAQ,EAAA,KAAA;AAAA,YACR,cAAA,EAAc,SAAS,IAAY,CAAA,YAAA,IAAA,IAAA;AAAA,YACpC,IAAK,EAAA,UAAA;AAAA,WAAA,EAAA;6BAEL,MAEO;AAAA,cAFPC,UAAA,CAEO,wBAFPC,UAEO,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAFS,MAAI,UAAc,EAAA,IAAA,KAAS,IAAY,CAAA,YAAA,EAAA,CAAA,EAAvD,MAEO;AAAA,gBAAAC,eAAA;kCADF,IAAI,CAAA;AAAA,kBAAA,CAAA;AAAA;AAAA,iBAAA;AAAA,eAAA,CAAA;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/spellcheck-button.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spellcheck-button.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n <button\n v-if=\"spellcheckedQuery\"\n ref=\"el\"\n class=\"x-spellcheck-button\"\n data-test=\"set-spellcheck\"\n @click=\"emitEvents\"\n >\n <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n * intention to set the spellchecked query.\n \n @public\n /\nexport default defineComponent({\n name: 'SpellcheckButton',\n xModule: searchXModule.name,\n setup() {\n const $x = use$x()\n\n const el = ref<HTMLElement>()\n\n /\n The spellcheckedQuery from the search state.\n \n @public\n /\n const { spellcheckedQuery } = useState('search')\n\n /\n Generates the {@link WireMetadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n target: el.value as HTMLElement,\n feature: 'spellcheck',\n })\n\n /\n Emits events when the button is clicked.\n \n @public\n */\n const emitEvents = () => {\n $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata())\n $x.emit(\n 'UserAcceptedSpellcheckQuery',\n spellcheckedQuery.value as string,\n createEventMetadata(),\n )\n }\n\n return {\n el,\n spellcheckedQuery,\n emitEvents,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the spellchecked query\n data.\n- [`UserAcceptedSpellcheckQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the spellchecked query\n data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n <template #default=\"{ spellcheckedQuery }\">\n <span class=\"x-spellcheck__text\">\n Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n </span>\n </template>\n</SpellcheckButton>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode"~~,"_toDisplayString","_createCommentVNode"~~],"mappings":";;;;;SAEU,IADR,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAQS,QAAA;AAAA,IAAA;AAAA,~~MATX~~,GAAA,EAAA,CAAA;~~AAAA~~,~~MAGI,~~GAAI,EAAA,IAAA;AAAA,MACJ,KAAM,EAAA,qBAAA;AAAA,MACN,WAAU,EAAA,gBAAA;AAAA,MACT,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;~~AAER~~,~~MAAAC~~,~~UAAA~~,~~CAAmE~~,~~IARvE,~~CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,iBAAA,~~EAQoB~~,IAAiB,CAAA,iBAAA,EAAA,CAAA,CAAA,EAAjC,MAAmE;AAAA,~~QARvEC~~,eAAA;~~AAAA~~,~~UAAAC,eAAA,CAQ4C,~~IAAiB,CAAA,iBAAA,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA~~;;;;AAR7D,GAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"spellcheck-button.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n <button\n v-if=\"spellcheckedQuery\"\n ref=\"el\"\n class=\"x-spellcheck-button\"\n data-test=\"set-spellcheck\"\n @click=\"emitEvents\"\n >\n <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n * intention to set the spellchecked query.\n \n @public\n /\nexport default defineComponent({\n name: 'SpellcheckButton',\n xModule: searchXModule.name,\n setup() {\n const $x = use$x()\n\n const el = ref<HTMLElement>()\n\n /\n The spellcheckedQuery from the search state.\n \n @public\n /\n const { spellcheckedQuery } = useState('search')\n\n /\n Generates the {@link WireMetadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n target: el.value as HTMLElement,\n feature: 'spellcheck',\n })\n\n /\n Emits events when the button is clicked.\n \n @public\n */\n const emitEvents = () => {\n $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata())\n $x.emit(\n 'UserAcceptedSpellcheckQuery',\n spellcheckedQuery.value as string,\n createEventMetadata(),\n )\n }\n\n return {\n el,\n spellcheckedQuery,\n emitEvents,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the spellchecked query\n data.\n- [`UserAcceptedSpellcheckQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the spellchecked query\n data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n <template #default=\"{ spellcheckedQuery }\">\n <span class=\"x-spellcheck__text\">\n Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n </span>\n </template>\n</SpellcheckButton>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode"],"mappings":";;;;;SAEU,IADR,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAQS,QAAA;AAAA,IAAA;AAAA,MAAA,GAAA,EAAA,CAAA;MANP,GAAI,EAAA,IAAA;AAAA,MACJ,KAAM,EAAA,qBAAA;AAAA,MACN,WAAU,EAAA,gBAAA;AAAA,MACT,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;MAERC,UAAmE,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,iBAAA,EAAnD,IAAiB,CAAA,iBAAA,EAAA,CAAA,CAAA,EAAjC,MAAmE;AAAA,QAAAC,eAAA;0BAA3B,IAAiB,CAAA,iBAAA,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/search/components/spellcheck.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spellcheck.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n \n The component will only render itself if the `spellcheckedQuery` property has value.\n \n @public\n /\nexport default defineComponent({\n name: 'Spellcheck',\n xModule: searchXModule.name,\n setup() {\n /\n The query and the spellcheckedQuery from the search state.\n \n @public\n */\n const { query, spellcheckedQuery } = useState('search')\n\n return {\n query,\n spellcheckedQuery,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n### Basic usage\n\n```vue\n<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n <template #default=\"{ query, spellcheckedQuery }\">\n No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n </template>\n</Spellcheck>\n\n<script>\nimport { Spellcheck } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n Spellcheck,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode","_toDisplayString"~~,"_createCommentVNode"~~],"mappings":"~~;;;;;AAAA,EAAA,GAAA,EAAA,CAAA;AAAA,~~EACgC,KAAM,EAAA,cAAA;AAAA,EAAe,WAAU,EAAA,YAAA;;;SAAlD,IAAX,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAEM,OAFN,UAEM,EAAA;AAAA,IADJC,WAAwF,~~IAF5F~~,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,~~EAEoB~~,~~YAAK~~,iBAAE,EAAA,IAAA,CAAA,iBAAA,MAAvB,MAAwF;AAAA,~~MAF5FC~~,eAAA;~~AAAA~~,~~QAAAC,eAAA,CAEmD,~~IAAK,CAAA,KAAA,CAAA,GAAG,KAAG,~~GAAAA~~,eAAA,CAAG,IAAiB,CAAA,iBAAA,CAAA;AAAA,QAAA,CAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA~~;AAFlF,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"spellcheck.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n \n The component will only render itself if the `spellcheckedQuery` property has value.\n \n @public\n /\nexport default defineComponent({\n name: 'Spellcheck',\n xModule: searchXModule.name,\n setup() {\n /\n The query and the spellcheckedQuery from the search state.\n \n @public\n */\n const { query, spellcheckedQuery } = useState('search')\n\n return {\n query,\n spellcheckedQuery,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n### Basic usage\n\n```vue\n<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n <template #default=\"{ query, spellcheckedQuery }\">\n No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n </template>\n</Spellcheck>\n\n<script>\nimport { Spellcheck } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n Spellcheck,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode","_toDisplayString"],"mappings":";;;;;;EACgC,KAAM,EAAA,cAAA;AAAA,EAAe,WAAU,EAAA,YAAA;;;SAAlD,IAAX,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAEM,OAFN,UAEM,EAAA;AAAA,IADJC,WAAwF,IAAxE,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAK,iBAAE,EAAA,IAAA,CAAA,iBAAA,MAAvB,MAAwF;AAAA,MAAAC,eAAA;wBAAzC,IAAK,CAAA,KAAA,CAAA,GAAG,KAAG,GAAAC,eAAA,CAAG,IAAiB,CAAA,iBAAA,CAAA;AAAA,QAAA,CAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;"}

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

@@ -11,7 +11,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default", {}, () => [
-        createTextVNode("✕")
+        _cache[0] || (_cache[0] = createTextVNode(
+          "✕",
+          -1
+          /* CACHED */
+        ))
       ])
     ]),
     _: 3

package/js/x-modules/search-box/components/clear-search-input.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"clear-search-input.vue.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\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport { computed, defineComponent, ref } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { 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 /\nexport default defineComponent({\n name: 'ClearSearchInput',\n components: { BaseEventButton },\n xModule: searchBoxXModule.name,\n setup() {\n const { query } = useState('searchBox')\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>\nimport { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'ClearSearchInputDemo',\n components: {\n SearchInput,\n ClearSearchInput,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_normalizeClass","~~_withCtx","~~_renderSlot","_createTextVNode"],"mappings":";;;;;;sBACEA,WAQkB,CAAA,0BAAA,EAAA;AAAA,IAPhB,KAAA,~~EAFJC~~,~~cAEU~~,CAAA,CAAA,+BAAA,EACE,IAAc,CAAA,cAAA,CAAA,CAAA;AAAA,IACrB,MAAQ,EAAA,IAAA,CAAA,sBAAA;AAAA,IACT,WAAU,EAAA,oBAAA;AAAA,GAAA,EAAA;~~AALd~~,~~IAAA,OAAA,EAAAC,OAAA,CAQI,~~MAAc;AAAA,MAAdC,UAAA,CAAc,4BAAd,MAAc;AAAA,~~QARlBC~~,~~gBAQU~~,~~GAAC~~,CAAA~~;AAAA~~,~~OAAA~~,CAAA~~;;AARX~~,~~IAAA~~,CAAA,~~EAAA~~,~~CAAA~~;~~AAAA~~;AAAA,~~GAAA~~,~~EAAA~~,CAAA,~~EAAA~~,CAAA,OAAA,~~EAAA,QAAA,~~CAAA~~,CAAA,CAAA;;;;;;~~"}
1	+ {"version":3,"file":"clear-search-input.vue.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\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport { computed, defineComponent, ref } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { 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 /\nexport default defineComponent({\n name: 'ClearSearchInput',\n components: { BaseEventButton },\n xModule: searchBoxXModule.name,\n setup() {\n const { query } = useState('searchBox')\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>\nimport { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'ClearSearchInputDemo',\n components: {\n SearchInput,\n ClearSearchInput,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_normalizeClass","_renderSlot","_createTextVNode"],"mappings":";;;;;;sBACEA,WAQkB,CAAA,0BAAA,EAAA;AAAA,IAPhB,KAAA,EAAKC,cAAC,CAAA,CAAA,+BAAA,EACE,IAAc,CAAA,cAAA,CAAA,CAAA;AAAA,IACrB,MAAQ,EAAA,IAAA,CAAA,sBAAA;AAAA,IACT,WAAU,EAAA,oBAAA;AAAA,GAAA,EAAA;qBAGV,MAAc;AAAA,MAAdC,UAAA,CAAc,4BAAd,MAAc;AAAA,QAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,eAAA;AAAR,UAAA,GAAA;AAAA,UAAC,CAAA,CAAA;AAAA;AAAA,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

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

@@ -2,13 +2,6 @@ import _sfc_main from './search-button.vue2.js';
 import { openBlock, createElementBlock, normalizeClass, renderSlot, createElementVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
-const _hoisted_1 = /* @__PURE__ */ createElementVNode(
-  "span",
-  { class: "x-icon" },
-  "⌕",
-  -1
-  /* HOISTED */
-);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "button",
@@ -20,7 +13,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     },
     [
       renderSlot(_ctx.$slots, "default", {}, () => [
-        _hoisted_1
+        _cache[1] || (_cache[1] = createElementVNode(
+          "span",
+          { class: "x-icon" },
+          "⌕",
+          -1
+          /* CACHED */
+        ))
       ])
     ],
     2

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

	@@ -1 +1 @@
1	- {"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 class=\"x-search-button x-button\"\n :class=\"dynamicClasses\"\n data-test=\"search-button\"\n @click=\"emitEvents\"\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\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { 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 /\nexport default defineComponent({\n name: 'SearchButton',\n xModule: searchBoxXModule.name,\n setup() {\n const $x = use$x()\n\n const buttonRef = ref<HTMLElement \| null>(null)\n\n const { query } = useState('searchBox')\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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { SearchButton, SearchInput } from '@empathyco/x-components/search-box'\n\nexport 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":["~~_createElementVNode","~~_openBlock","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":"~~;;;;AASU~~,~~MAAA,UAAA,mBAAAA,kBAAA;AAAA,EAA6B,MAAA;AAAA,~~EAAA,~~EAAvB~~,~~OAAM,QAAQ,EAAA;AAAA,EAAC,GAAA;AAAA,EAAC,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA;;AAR9B,EAAA,OAAAC,~~SAAA,EAAA,EAAAC,kBAAA;AAAA,IASS,QAAA;AAAA,IAAA;AAAA,MARP,GAAI,EAAA,WAAA;AAAA,MACJ,KAAA,~~EAHJC~~,~~cAGU~~,CAAA,CAAA,0BAAA,EACE,IAAc,CAAA,cAAA,CAAA,CAAA;AAAA,MACtB,WAAU,EAAA,eAAA;AAAA,MACT,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;AAGR,MAAAC,UAAA,CAA0C,4BAA1C,MAA0C;AAAA,QAApC,UAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
1	+ {"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 class=\"x-search-button x-button\"\n :class=\"dynamicClasses\"\n data-test=\"search-button\"\n @click=\"emitEvents\"\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\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { 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 /\nexport default defineComponent({\n name: 'SearchButton',\n xModule: searchBoxXModule.name,\n setup() {\n const $x = use$x()\n\n const buttonRef = ref<HTMLElement \| null>(null)\n\n const { query } = useState('searchBox')\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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { SearchButton, SearchInput } from '@empathyco/x-components/search-box'\n\nexport 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","_renderSlot","_createElementVNode"],"mappings":";;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IASS,QAAA;AAAA,IAAA;AAAA,MARP,GAAI,EAAA,WAAA;AAAA,MACJ,KAAA,EAAKC,cAAC,CAAA,CAAA,0BAAA,EACE,IAAc,CAAA,cAAA,CAAA,CAAA;AAAA,MACtB,WAAU,EAAA,eAAA;AAAA,MACT,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;AAGR,MAAAC,UAAA,CAA0C,4BAA1C,MAA0C;AAAA,QAApC,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,kBAAA;AAAA,UAA6B,MAAA;AAAA,UAAA,EAAvB,OAAM,QAAQ,EAAA;AAAA,UAAC,GAAA;AAAA,UAAC,CAAA,CAAA;AAAA;AAAA,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}