npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.238 → 6.0.0-alpha.239 - Mend

@empathyco/x-components 6.0.0-alpha.238 → 6.0.0-alpha.239

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 (322) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"inputElement\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-search-input x-input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n aria-label=\"type your query here\"\n @mouseenter=\"emitUserHoveredInSearchBox\"\n @mouseleave=\"emitUserHoveredOutSearchBox\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n @beforeinput=\"preventSpecialKey\"\n />\n</template>\n\n<script lang=\"ts\">\nimport type { ArrowKey } from '../../../utils'\nimport type { DebouncedFunction } from '../../../utils/types'\nimport type { XEvent } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, onMounted, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { debounce } from '../../../utils/debounce'\nimport { searchBoxXModule } from '../x-module'\n\n/*\n This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n \n @public\n /\nexport default defineComponent({\n name: 'SearchInput',\n xModule: searchBoxXModule.name,\n props: {\n /\n Maximum characters allowed in the input search.\n /\n maxLength: {\n type: Number,\n default: 64,\n },\n /\n Allows input autofocus when the search field is rendered.\n /\n autofocus: {\n type: Boolean,\n default: true,\n },\n /\n Enables the auto-accept query after debounce.\n /\n instant: {\n type: Boolean,\n default: true,\n },\n /\n Debounce time for the instant.\n /\n instantDebounceInMs: {\n type: Number,\n default: 500,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const { query } = useState('searchBox')\n\n const inputElement = ref<HTMLInputElement>()\n\n let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>\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 return {\n target: inputElement.value,\n feature: 'search_box',\n }\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n \n @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n /\n const emitUserAcceptedAQuery = (query: string): void => {\n $x.emit('UserAcceptedAQuery', query, createEventMetadata())\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n \n @internal\n * @param query - The query that will be emitted.\n /\n const emitDebouncedUserAcceptedAQuery = (query: string): void => {\n if (props.instant) {\n if (!debouncedUserAcceptedAQuery) {\n debouncedUserAcceptedAQuery = debounce(emitUserAcceptedAQuery, props.instantDebounceInMs)\n }\n debouncedUserAcceptedAQuery(query)\n }\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n \n @internal\n /\n const emitUserHoveredInSearchBox = (): void => {\n $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n \n @internal\n /\n const emitUserHoveredOutSearchBox = (): void => {\n $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n \n @internal\n /\n const emitUserBlurredSearchBox = (): void => {\n $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n \n @internal\n /\n const emitUserClickedSearchBox = (): void => {\n $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n \n @internal\n /\n const emitUserFocusedSearchBox = (): void => {\n $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n \n @internal\n /\n const emitUserIsTypingAQueryEvents = (): void => {\n const query = inputElement.value?.value ?? ''\n\n $x.emit('UserIsTypingAQuery', query, { target: inputElement.value })\n if (query.trim()) {\n emitDebouncedUserAcceptedAQuery(query)\n } else {\n cancelDebouncedUserAcceptedAQuery()\n }\n }\n\n /\n Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n \n @param event - The keyboard event with the arrow key pressed.\n * @internal\n /\n const emitUserPressedArrowKey = (event: KeyboardEvent): void => {\n $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata())\n }\n\n /\n Emits multiple events when the user pressed the enter key.\n \n @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n \n @internal\n /\n const emitUserPressedEnterKey = (): void => {\n const query = inputElement.value?.value.trim()\n if (!!query && query.length > 0) {\n $x.emit('UserPressedEnterKey', query, createEventMetadata())\n emitUserAcceptedAQuery(query)\n }\n inputElement.value?.blur()\n }\n\n /\n Prevents the user from either typing or pasting special characters in the input field.\n \n @internal\n * @param event - The event that will be checked for special characters.\n /\n const preventSpecialKey = (event: InputEvent): void => {\n if (/[<>]/.test(event.data ?? '')) {\n event.preventDefault()\n }\n }\n\n /\n When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search input is focused.\n \n @internal\n /\n function focusInput(): void {\n inputElement.value?.focus()\n }\n ;['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>\n $x.on(event as XEvent, false).subscribe(focusInput),\n )\n\n /\n When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n \n @internal\n */\n function cancelDebouncedUserAcceptedAQuery(): void {\n debouncedUserAcceptedAQuery?.cancel()\n }\n ;['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>\n $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery),\n )\n\n onMounted(() => {\n if (props.autofocus) {\n focusInput()\n }\n })\n\n return {\n query,\n inputElement,\n emitUserHoveredInSearchBox,\n emitUserHoveredOutSearchBox,\n emitUserBlurredSearchBox,\n emitUserClickedSearchBox,\n emitUserFocusedSearchBox,\n emitUserIsTypingAQueryEvents,\n emitUserPressedEnterKey,\n emitUserPressedArrowKey,\n preventSpecialKey,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-search-input::-webkit-search-decoration,\n.x-search-input::-webkit-search-cancel-button,\n.x-search-input::-webkit-search-results-button,\n.x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst value = ref('')\nconst hasFocus = ref(false)\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_withKeys","_withModifiers"],"mappings":";;;;;;;sBACEA,kBAAA,CAoBE,OAAA,EAAA;AAAA,IAnBA,GAAA,EAAI,cAAA;AAAA,IACH,SAAA,EAAW,IAAA,CAAA,SAAA;AAAA,IACX,KAAA,EAAO,IAAA,CAAA,KAAA;AAAA,IACR,YAAA,EAAa,KAAA;AAAA,IACb,KAAA,EAAM,wBAAA;AAAA,IACN,YAAA,EAAa,QAAA;AAAA,IACb,SAAA,EAAU,QAAA;AAAA,IACV,IAAA,EAAK,QAAA;AAAA,IACL,WAAA,EAAU,cAAA;AAAA,IACV,YAAA,EAAW,sBAAA;AAAA,IACV,cAAU,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,0BAAA,IAAA,IAAA,CAAA,0BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACZ,cAAU,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,2BAAA,IAAA,IAAA,CAAA,2BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACZ,QAAI,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACN,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,4BAAA,IAAA,IAAA,CAAA,4BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAA,EAAO;AAAA,MAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,QAAA,CAAA,CAAA,GAAA,IAAA,KAAQ,IAAA,CAAA,uBAAA,IAAA,IAAA,CAAA,uBAAA,CAAA,GAAA,IAAA,CAAA,EAAuB,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,MAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,QAAA,CAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KACb,IAAA,CAAA,uBAAA,IAAA,IAAA,CAAA,uBAAA,CAAA,GAAA,IAAA,CAAA,EAAuB,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,CAAA,CAAA;AAAA,KAAA;AAChD,IAAA,aAAA,EAAW,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,iBAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"inputElement\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-search-input xds:input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n aria-label=\"type your query here\"\n @mouseenter=\"emitUserHoveredInSearchBox\"\n @mouseleave=\"emitUserHoveredOutSearchBox\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n @beforeinput=\"preventSpecialKey\"\n />\n</template>\n\n<script lang=\"ts\">\nimport type { ArrowKey } from '../../../utils'\nimport type { DebouncedFunction } from '../../../utils/types'\nimport type { XEvent } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, onMounted, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { debounce } from '../../../utils/debounce'\nimport { searchBoxXModule } from '../x-module'\n\n/*\n This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n \n @public\n /\nexport default defineComponent({\n name: 'SearchInput',\n xModule: searchBoxXModule.name,\n props: {\n /\n Maximum characters allowed in the input search.\n /\n maxLength: {\n type: Number,\n default: 64,\n },\n /\n Allows input autofocus when the search field is rendered.\n /\n autofocus: {\n type: Boolean,\n default: true,\n },\n /\n Enables the auto-accept query after debounce.\n /\n instant: {\n type: Boolean,\n default: true,\n },\n /\n Debounce time for the instant.\n /\n instantDebounceInMs: {\n type: Number,\n default: 500,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const { query } = useState('searchBox')\n\n const inputElement = ref<HTMLInputElement>()\n\n let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>\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 return {\n target: inputElement.value,\n feature: 'search_box',\n }\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n \n @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n /\n const emitUserAcceptedAQuery = (query: string): void => {\n $x.emit('UserAcceptedAQuery', query, createEventMetadata())\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n \n @internal\n * @param query - The query that will be emitted.\n /\n const emitDebouncedUserAcceptedAQuery = (query: string): void => {\n if (props.instant) {\n if (!debouncedUserAcceptedAQuery) {\n debouncedUserAcceptedAQuery = debounce(emitUserAcceptedAQuery, props.instantDebounceInMs)\n }\n debouncedUserAcceptedAQuery(query)\n }\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n \n @internal\n /\n const emitUserHoveredInSearchBox = (): void => {\n $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n \n @internal\n /\n const emitUserHoveredOutSearchBox = (): void => {\n $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n \n @internal\n /\n const emitUserBlurredSearchBox = (): void => {\n $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n \n @internal\n /\n const emitUserClickedSearchBox = (): void => {\n $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n \n @internal\n /\n const emitUserFocusedSearchBox = (): void => {\n $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n \n @internal\n /\n const emitUserIsTypingAQueryEvents = (): void => {\n const query = inputElement.value?.value ?? ''\n\n $x.emit('UserIsTypingAQuery', query, { target: inputElement.value })\n if (query.trim()) {\n emitDebouncedUserAcceptedAQuery(query)\n } else {\n cancelDebouncedUserAcceptedAQuery()\n }\n }\n\n /\n Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n \n @param event - The keyboard event with the arrow key pressed.\n * @internal\n /\n const emitUserPressedArrowKey = (event: KeyboardEvent): void => {\n $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata())\n }\n\n /\n Emits multiple events when the user pressed the enter key.\n \n @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n \n @internal\n /\n const emitUserPressedEnterKey = (): void => {\n const query = inputElement.value?.value.trim()\n if (!!query && query.length > 0) {\n $x.emit('UserPressedEnterKey', query, createEventMetadata())\n emitUserAcceptedAQuery(query)\n }\n inputElement.value?.blur()\n }\n\n /\n Prevents the user from either typing or pasting special characters in the input field.\n \n @internal\n * @param event - The event that will be checked for special characters.\n /\n const preventSpecialKey = (event: InputEvent): void => {\n if (/[<>]/.test(event.data ?? '')) {\n event.preventDefault()\n }\n }\n\n /\n When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search input is focused.\n \n @internal\n /\n function focusInput(): void {\n inputElement.value?.focus()\n }\n ;['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>\n $x.on(event as XEvent, false).subscribe(focusInput),\n )\n\n /\n When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n \n @internal\n */\n function cancelDebouncedUserAcceptedAQuery(): void {\n debouncedUserAcceptedAQuery?.cancel()\n }\n ;['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>\n $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery),\n )\n\n onMounted(() => {\n if (props.autofocus) {\n focusInput()\n }\n })\n\n return {\n query,\n inputElement,\n emitUserHoveredInSearchBox,\n emitUserHoveredOutSearchBox,\n emitUserBlurredSearchBox,\n emitUserClickedSearchBox,\n emitUserFocusedSearchBox,\n emitUserIsTypingAQueryEvents,\n emitUserPressedEnterKey,\n emitUserPressedArrowKey,\n preventSpecialKey,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-search-input::-webkit-search-decoration,\n.x-search-input::-webkit-search-cancel-button,\n.x-search-input::-webkit-search-results-button,\n.x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst value = ref('')\nconst hasFocus = ref(false)\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_withKeys","_withModifiers"],"mappings":";;;;;;;sBACEA,kBAAA,CAoBE,OAAA,EAAA;AAAA,IAnBA,GAAA,EAAI,cAAA;AAAA,IACH,SAAA,EAAW,IAAA,CAAA,SAAA;AAAA,IACX,KAAA,EAAO,IAAA,CAAA,KAAA;AAAA,IACR,YAAA,EAAa,KAAA;AAAA,IACb,KAAA,EAAM,0BAAA;AAAA,IACN,YAAA,EAAa,QAAA;AAAA,IACb,SAAA,EAAU,QAAA;AAAA,IACV,IAAA,EAAK,QAAA;AAAA,IACL,WAAA,EAAU,cAAA;AAAA,IACV,YAAA,EAAW,sBAAA;AAAA,IACV,cAAU,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,0BAAA,IAAA,IAAA,CAAA,0BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACZ,cAAU,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,2BAAA,IAAA,IAAA,CAAA,2BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACZ,QAAI,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACN,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,4BAAA,IAAA,IAAA,CAAA,4BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAA,EAAO;AAAA,MAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,QAAA,CAAA,CAAA,GAAA,IAAA,KAAQ,IAAA,CAAA,uBAAA,IAAA,IAAA,CAAA,uBAAA,CAAA,GAAA,IAAA,CAAA,EAAuB,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,MAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,QAAA,CAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KACb,IAAA,CAAA,uBAAA,IAAA,IAAA,CAAA,uBAAA,CAAA,GAAA,IAAA,CAAA,EAAuB,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,CAAA,CAAA;AAAA,KAAA;AAChD,IAAA,aAAA,EAAW,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,iBAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"search-input.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"inputElement\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-search-input x-input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n aria-label=\"type your query here\"\n @mouseenter=\"emitUserHoveredInSearchBox\"\n @mouseleave=\"emitUserHoveredOutSearchBox\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n @beforeinput=\"preventSpecialKey\"\n />\n</template>\n\n<script lang=\"ts\">\nimport type { ArrowKey } from '../../../utils'\nimport type { DebouncedFunction } from '../../../utils/types'\nimport type { XEvent } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, onMounted, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { debounce } from '../../../utils/debounce'\nimport { searchBoxXModule } from '../x-module'\n\n/*\n This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n \n @public\n /\nexport default defineComponent({\n name: 'SearchInput',\n xModule: searchBoxXModule.name,\n props: {\n /\n Maximum characters allowed in the input search.\n /\n maxLength: {\n type: Number,\n default: 64,\n },\n /\n Allows input autofocus when the search field is rendered.\n /\n autofocus: {\n type: Boolean,\n default: true,\n },\n /\n Enables the auto-accept query after debounce.\n /\n instant: {\n type: Boolean,\n default: true,\n },\n /\n Debounce time for the instant.\n /\n instantDebounceInMs: {\n type: Number,\n default: 500,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const { query } = useState('searchBox')\n\n const inputElement = ref<HTMLInputElement>()\n\n let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>\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 return {\n target: inputElement.value,\n feature: 'search_box',\n }\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n \n @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n /\n const emitUserAcceptedAQuery = (query: string): void => {\n $x.emit('UserAcceptedAQuery', query, createEventMetadata())\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n \n @internal\n * @param query - The query that will be emitted.\n /\n const emitDebouncedUserAcceptedAQuery = (query: string): void => {\n if (props.instant) {\n if (!debouncedUserAcceptedAQuery) {\n debouncedUserAcceptedAQuery = debounce(emitUserAcceptedAQuery, props.instantDebounceInMs)\n }\n debouncedUserAcceptedAQuery(query)\n }\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n \n @internal\n /\n const emitUserHoveredInSearchBox = (): void => {\n $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n \n @internal\n /\n const emitUserHoveredOutSearchBox = (): void => {\n $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n \n @internal\n /\n const emitUserBlurredSearchBox = (): void => {\n $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n \n @internal\n /\n const emitUserClickedSearchBox = (): void => {\n $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n \n @internal\n /\n const emitUserFocusedSearchBox = (): void => {\n $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n \n @internal\n /\n const emitUserIsTypingAQueryEvents = (): void => {\n const query = inputElement.value?.value ?? ''\n\n $x.emit('UserIsTypingAQuery', query, { target: inputElement.value })\n if (query.trim()) {\n emitDebouncedUserAcceptedAQuery(query)\n } else {\n cancelDebouncedUserAcceptedAQuery()\n }\n }\n\n /\n Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n \n @param event - The keyboard event with the arrow key pressed.\n * @internal\n /\n const emitUserPressedArrowKey = (event: KeyboardEvent): void => {\n $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata())\n }\n\n /\n Emits multiple events when the user pressed the enter key.\n \n @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n \n @internal\n /\n const emitUserPressedEnterKey = (): void => {\n const query = inputElement.value?.value.trim()\n if (!!query && query.length > 0) {\n $x.emit('UserPressedEnterKey', query, createEventMetadata())\n emitUserAcceptedAQuery(query)\n }\n inputElement.value?.blur()\n }\n\n /\n Prevents the user from either typing or pasting special characters in the input field.\n \n @internal\n * @param event - The event that will be checked for special characters.\n /\n const preventSpecialKey = (event: InputEvent): void => {\n if (/[<>]/.test(event.data ?? '')) {\n event.preventDefault()\n }\n }\n\n /\n When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search input is focused.\n \n @internal\n /\n function focusInput(): void {\n inputElement.value?.focus()\n }\n ;['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>\n $x.on(event as XEvent, false).subscribe(focusInput),\n )\n\n /\n When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n \n @internal\n */\n function cancelDebouncedUserAcceptedAQuery(): void {\n debouncedUserAcceptedAQuery?.cancel()\n }\n ;['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>\n $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery),\n )\n\n onMounted(() => {\n if (props.autofocus) {\n focusInput()\n }\n })\n\n return {\n query,\n inputElement,\n emitUserHoveredInSearchBox,\n emitUserHoveredOutSearchBox,\n emitUserBlurredSearchBox,\n emitUserClickedSearchBox,\n emitUserFocusedSearchBox,\n emitUserIsTypingAQueryEvents,\n emitUserPressedEnterKey,\n emitUserPressedArrowKey,\n preventSpecialKey,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-search-input::-webkit-search-decoration,\n.x-search-input::-webkit-search-cancel-button,\n.x-search-input::-webkit-search-results-button,\n.x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst value = ref('')\nconst hasFocus = ref(false)\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"search-input.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"inputElement\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-search-input xds:input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n aria-label=\"type your query here\"\n @mouseenter=\"emitUserHoveredInSearchBox\"\n @mouseleave=\"emitUserHoveredOutSearchBox\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n @beforeinput=\"preventSpecialKey\"\n />\n</template>\n\n<script lang=\"ts\">\nimport type { ArrowKey } from '../../../utils'\nimport type { DebouncedFunction } from '../../../utils/types'\nimport type { XEvent } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, onMounted, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { debounce } from '../../../utils/debounce'\nimport { searchBoxXModule } from '../x-module'\n\n/*\n This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n \n @public\n /\nexport default defineComponent({\n name: 'SearchInput',\n xModule: searchBoxXModule.name,\n props: {\n /\n Maximum characters allowed in the input search.\n /\n maxLength: {\n type: Number,\n default: 64,\n },\n /\n Allows input autofocus when the search field is rendered.\n /\n autofocus: {\n type: Boolean,\n default: true,\n },\n /\n Enables the auto-accept query after debounce.\n /\n instant: {\n type: Boolean,\n default: true,\n },\n /\n Debounce time for the instant.\n /\n instantDebounceInMs: {\n type: Number,\n default: 500,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const { query } = useState('searchBox')\n\n const inputElement = ref<HTMLInputElement>()\n\n let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>\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 return {\n target: inputElement.value,\n feature: 'search_box',\n }\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n \n @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n /\n const emitUserAcceptedAQuery = (query: string): void => {\n $x.emit('UserAcceptedAQuery', query, createEventMetadata())\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n \n @internal\n * @param query - The query that will be emitted.\n /\n const emitDebouncedUserAcceptedAQuery = (query: string): void => {\n if (props.instant) {\n if (!debouncedUserAcceptedAQuery) {\n debouncedUserAcceptedAQuery = debounce(emitUserAcceptedAQuery, props.instantDebounceInMs)\n }\n debouncedUserAcceptedAQuery(query)\n }\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n \n @internal\n /\n const emitUserHoveredInSearchBox = (): void => {\n $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n \n @internal\n /\n const emitUserHoveredOutSearchBox = (): void => {\n $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n \n @internal\n /\n const emitUserBlurredSearchBox = (): void => {\n $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n \n @internal\n /\n const emitUserClickedSearchBox = (): void => {\n $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n \n @internal\n /\n const emitUserFocusedSearchBox = (): void => {\n $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value })\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n \n @internal\n /\n const emitUserIsTypingAQueryEvents = (): void => {\n const query = inputElement.value?.value ?? ''\n\n $x.emit('UserIsTypingAQuery', query, { target: inputElement.value })\n if (query.trim()) {\n emitDebouncedUserAcceptedAQuery(query)\n } else {\n cancelDebouncedUserAcceptedAQuery()\n }\n }\n\n /\n Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n \n @param event - The keyboard event with the arrow key pressed.\n * @internal\n /\n const emitUserPressedArrowKey = (event: KeyboardEvent): void => {\n $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata())\n }\n\n /\n Emits multiple events when the user pressed the enter key.\n \n @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n \n @internal\n /\n const emitUserPressedEnterKey = (): void => {\n const query = inputElement.value?.value.trim()\n if (!!query && query.length > 0) {\n $x.emit('UserPressedEnterKey', query, createEventMetadata())\n emitUserAcceptedAQuery(query)\n }\n inputElement.value?.blur()\n }\n\n /\n Prevents the user from either typing or pasting special characters in the input field.\n \n @internal\n * @param event - The event that will be checked for special characters.\n /\n const preventSpecialKey = (event: InputEvent): void => {\n if (/[<>]/.test(event.data ?? '')) {\n event.preventDefault()\n }\n }\n\n /\n When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search input is focused.\n \n @internal\n /\n function focusInput(): void {\n inputElement.value?.focus()\n }\n ;['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>\n $x.on(event as XEvent, false).subscribe(focusInput),\n )\n\n /\n When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n \n @internal\n */\n function cancelDebouncedUserAcceptedAQuery(): void {\n debouncedUserAcceptedAQuery?.cancel()\n }\n ;['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>\n $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery),\n )\n\n onMounted(() => {\n if (props.autofocus) {\n focusInput()\n }\n })\n\n return {\n query,\n inputElement,\n emitUserHoveredInSearchBox,\n emitUserHoveredOutSearchBox,\n emitUserBlurredSearchBox,\n emitUserClickedSearchBox,\n emitUserFocusedSearchBox,\n emitUserIsTypingAQueryEvents,\n emitUserPressedEnterKey,\n emitUserPressedArrowKey,\n preventSpecialKey,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-search-input::-webkit-search-decoration,\n.x-search-input::-webkit-search-cancel-button,\n.x-search-input::-webkit-search-results-button,\n.x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst value = ref('')\nconst hasFocus = ref(false)\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.238",
+  "version": "6.0.0-alpha.239",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -83,9 +83,10 @@
   },
   "devDependencies": {
     "@babel/preset-env": "7.29.2",
-    "@empathyco/x-tailwindcss": "2.0.0-alpha.37",
+    "@empathyco/x-design-system": "0.1.0-alpha.3",
     "@microsoft/api-documenter": "7.29.9",
     "@microsoft/api-extractor": "7.58.0",
+    "@tailwindcss/vite": "4.2.2",
     "@testing-library/vue": "8.1.0",
     "@types/aria-query": "5.0.4",
     "@types/node": "24.12.2",
@@ -93,13 +94,9 @@
     "@vitest/browser": "4.1.2",
     "@vitest/ui": "4.1.2",
     "@vue/test-utils": "2.4.6",
-    "autoprefixer": "10.4.27",
     "convert-source-map": "2.0.0",
     "esbuild": "0.28.0",
     "jsdom": "28.1.0",
-    "postcss": "8.5.8",
-    "postcss-dir-pseudo-class": "7.0.2",
-    "postcss-logical": "4.0.2",
     "rollup": "4.60.1",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-delete": "2.2.0",
@@ -107,10 +104,10 @@
     "rollup-plugin-typescript2": "0.37.0",
     "rollup-plugin-vue": "6.0.0",
     "start-server-and-test": "2.1.5",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.2.2",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",
-    "vite": "6.4.1",
+    "vite": "6.4.2",
     "vite-plugin-vue-inspector": "5.4.0",
     "vitest": "4.1.2",
     "vue": "3.5.32",
@@ -122,5 +119,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "ed8a34b941dd6c73726c3ed96098a37718a7dd63"
+  "gitHead": "cb1002d210e4731704977a5d86193fcc5f2d0406"
 }

package/report/x-components.api.json CHANGED Viewed

@@ -3532,7 +3532,7 @@
             },
             {
               "kind": "Content",
-              "text": "<{\n        'x-selected x-all-filter--is-selected': boolean;\n    }>;\n    isSelected: import(\"vue\")."
+              "text": "<{\n        'xds:selected x-all-filter--is-selected': boolean;\n    }>;\n    isSelected: import(\"vue\")."
             },
             {
               "kind": "Reference",
@@ -35077,7 +35077,7 @@
             },
             {
               "kind": "Content",
-              "text": "<{\n        [x: string]: boolean;\n        'x-highlight--has-match': boolean;\n        'x-highlight-text': boolean;\n    }>;\n}, {}, {}, {}, import(\"vue\")."
+              "text": "<{\n        [x: string]: boolean;\n        'x-highlight--has-match': boolean;\n        'xds:highlight-text': boolean;\n    }>;\n}, {}, {}, {}, import(\"vue\")."
             },
             {
               "kind": "Reference",
@@ -74023,7 +74023,7 @@
             },
             {
               "kind": "Content",
-              "text": "<{\n        'x-sliding-panel-at-start': boolean;\n        'x-sliding-panel-at-end': boolean;\n    }>;\n    scrollContainerRef: import(\"vue\")."
+              "text": "<{\n        'xds:sliding-panel-at-start': boolean;\n        'xds:sliding-panel-at-end': boolean;\n    }>;\n    scrollContainerRef: import(\"vue\")."
             },
             {
               "kind": "Reference",

package/report/x-components.api.md CHANGED Viewed

@@ -462,7 +462,7 @@ required: true;
 }>, {
 clickEvent: ComputedRef<Partial<XEventsTypes>>;
 cssClasses: ComputedRef<    {
-'x-selected x-all-filter--is-selected': boolean;
+'xds:selected x-all-filter--is-selected': boolean;
 }>;
 isSelected: ComputedRef<boolean>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
@@ -3868,7 +3868,7 @@ end: string;
 dynamicCSSClasses: ComputedRef<    {
 [x: string]: boolean;
 'x-highlight--has-match': boolean;
-'x-highlight-text': boolean;
+'xds:highlight-text': boolean;
 }>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
 text: {
@@ -8053,8 +8053,8 @@ top: boolean;
 bottom: boolean;
 };
 cssClasses: ComputedRef<    {
-'x-sliding-panel-at-start': boolean;
-'x-sliding-panel-at-end': boolean;
+'xds:sliding-panel-at-start': boolean;
+'xds:sliding-panel-at-end': boolean;
 }>;
 scrollContainerRef: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
 slotContainerWidth: ShallowRef<number, number>;
@@ -9676,7 +9676,7 @@ export type XStoreModuleOptions<StoreModule extends AnyXStoreModule> = StoreModu
 // dist/types/src/components/animations/animate-clip-path.vue.d.ts:5:9 - (ae-forgotten-export) The symbol "AnimationOrigin" needs to be exported by the entry point index.d.ts
 // dist/types/src/components/base-dropdown.vue.d.ts:11:9 - (ae-forgotten-export) The symbol "DropdownItem" needs to be exported by the entry point index.d.ts
 // dist/types/src/components/base-grid.vue.d.ts:37:5 - (ae-forgotten-export) The symbol "GridItem" needs to be exported by the entry point index.d.ts
-// dist/types/src/components/column-picker/base-column-picker-list.vue.d.ts:22:5 - (ae-forgotten-export) The symbol "ColumnPickerItem" needs to be exported by the entry point index.d.ts
+// dist/types/src/components/column-picker/base-column-picker-list.vue.d.ts:29:5 - (ae-forgotten-export) The symbol "ColumnPickerItem" needs to be exported by the entry point index.d.ts
 // dist/types/src/components/filters/labels/base-price-filter-label.vue.d.ts:13:13 - (ae-forgotten-export) The symbol "RangeValue" needs to be exported by the entry point index.d.ts
 // dist/types/src/components/filters/labels/base-rating-filter-label.vue.d.ts:16:9 - (ae-forgotten-export) The symbol "BooleanFilter" needs to be exported by the entry point index.d.ts
 // dist/types/src/components/page-selector.vue.d.ts:65:5 - (ae-forgotten-export) The symbol "PageItem" needs to be exported by the entry point index.d.ts

package/types/demo/main.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import './tailwind/index.css';
+import './tailwind/xds.css';
 //# sourceMappingURL=main.d.ts.map

package/types/demo/main.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../demo/main.ts"],"names":[],"mappings":"AAOA,OAAO,~~sBAAsB~~,CAAA"}
1	+ {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../demo/main.ts"],"names":[],"mappings":"AAOA,OAAO,oBAAoB,CAAA"}

package/types/demo/views/base-config.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-config.d.ts","sourceRoot":"","sources":["../../../../demo/views/base-config.ts"],"names":[],"mappings":"~~AAAA~~,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGpE,eAAO,MAAM,iBAAiB,EAAE,aAK/B,CAAA;~~AAKD~~,eAAO,MAAM,mBAAmB,EAAE,~~eAWjC~~,CAAA"}
1	+ {"version":3,"file":"base-config.d.ts","sourceRoot":"","sources":["../../../../demo/views/base-config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGpE,eAAO,MAAM,iBAAiB,EAAE,aAK/B,CAAA;AASD,eAAO,MAAM,mBAAmB,EAAE,eAUjC,CAAA"}

package/types/demo/views/home/types.d.ts CHANGED Viewed

@@ -21,8 +21,5 @@ export interface HomeControls {
     relatedPromptsList: {
         showOnlyAfterOffset: boolean;
     };
-    adapter: {
-        useE2EAdapter: boolean;
-    };
 }
 //# sourceMappingURL=types.d.ts.map

package/types/demo/views/home/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../demo/views/home/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE;QACX,OAAO,EAAE,OAAO,CAAA;QAChB,mBAAmB,EAAE,MAAM,CAAA;KAC5B,CAAA;IACD,eAAe,EAAE;QACf,gBAAgB,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,aAAa,EAAE;QACb,GAAG,EAAE,MAAM,CAAA;KACZ,CAAA;IACD,cAAc,EAAE;QACd,gBAAgB,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,kBAAkB,EAAE;QAClB,gBAAgB,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,eAAe,EAAE;QACf,mBAAmB,EAAE,OAAO,CAAA;KAC7B,CAAA;IACD,kBAAkB,EAAE;QAClB,mBAAmB,EAAE,OAAO,CAAA;KAC7B,CAAA;~~IACD,OAAO,EAAE;QACP,aAAa,EAAE,OAAO,CAAA;KACvB,CAAA;~~CACF"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../demo/views/home/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE;QACX,OAAO,EAAE,OAAO,CAAA;QAChB,mBAAmB,EAAE,MAAM,CAAA;KAC5B,CAAA;IACD,eAAe,EAAE;QACf,gBAAgB,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,aAAa,EAAE;QACb,GAAG,EAAE,MAAM,CAAA;KACZ,CAAA;IACD,cAAc,EAAE;QACd,gBAAgB,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,kBAAkB,EAAE;QAClB,gBAAgB,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,eAAe,EAAE;QACf,mBAAmB,EAAE,OAAO,CAAA;KAC7B,CAAA;IACD,kBAAkB,EAAE;QAClB,mBAAmB,EAAE,OAAO,CAAA;KAC7B,CAAA;CACF"}

package/types/demo/vite.config.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../../../demo/vite.config.ts"],"names":[],"mappings":"~~AAMA~~,eAAO,MAAM,aAAa;;oBAER,MAAM,MAAM,MAAM;CAGnC,CAAA;;AAED,~~wBAyBE~~"}
1	+ {"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../../../demo/vite.config.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa;;oBAER,MAAM,MAAM,MAAM;CAGnC,CAAA;;AAED,wBA0BE"}

package/types/src/components/base-grid.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-grid.types.d.ts","sourceRoot":"","sources":["../../../../src/components/base-grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;~~AAC7D~~;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,aAAa,CAAA;CACxB"}
1	+ {"version":3,"file":"base-grid.types.d.ts","sourceRoot":"","sources":["../../../../src/components/base-grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE7D;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,aAAa,CAAA;CACxB"}

package/types/src/components/column-picker/base-column-picker-list.vue.d.ts CHANGED Viewed

@@ -1,5 +1,12 @@
 import type { PropType } from 'vue';
-import type { ColumnPickerItem } from './base-column-picker-list.types';
+import type { VueCSSClasses } from '../../utils/types';
+import type { XEventsTypes } from '../../wiring';
+export interface ColumnPickerItem {
+    column: number;
+    cssClasses: VueCSSClasses;
+    events: Partial<XEventsTypes>;
+    isSelected: boolean;
+}
 /**
  * Column picker list component renders a list of buttons to choose the columns number.
  *

package/types/src/components/column-picker/base-column-picker-list.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-column-picker-list.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/components/column-picker/base-column-picker-list.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;AACnC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,~~iCAAiC~~,CAAA;~~AAKvE~~;;;;;;;GAOG;;IAKC,2EAA2E;;cAE1D,QAAQ,CAAC,MAAM,EAAE,CAAC;;;IAGnC,gDAAgD;;IAEhD,sCAAsC;;;;;IAPtC,2EAA2E;;cAE1D,QAAQ,CAAC,MAAM,EAAE,CAAC;;;IAGnC,gDAAgD;;IAEhD,sCAAsC;;;;;;;AAX1C,wBAmFE"}
1	+ {"version":3,"file":"base-column-picker-list.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/components/column-picker/base-column-picker-list.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;AACnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAKhD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,aAAa,CAAA;IACzB,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC7B,UAAU,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;GAOG;;IAKC,2EAA2E;;cAE1D,QAAQ,CAAC,MAAM,EAAE,CAAC;;;IAGnC,gDAAgD;;IAEhD,sCAAsC;;;;;IAPtC,2EAA2E;;cAE1D,QAAQ,CAAC,MAAM,EAAE,CAAC;;;IAGnC,gDAAgD;;IAEhD,sCAAsC;;;;;;;AAX1C,wBAmFE"}

package/types/src/components/highlight.vue.d.ts CHANGED Viewed

@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     dynamicCSSClasses: import("vue").ComputedRef<{
         [x: string]: boolean;
         'x-highlight--has-match': boolean;
-        'x-highlight-text': boolean;
+        'xds:highlight-text': boolean;
     }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** The text to highlight some part of it. */

package/types/src/components/sliding-panel.vue.d.ts CHANGED Viewed

@@ -45,8 +45,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         bottom: boolean;
     };
     cssClasses: import("vue").ComputedRef<{
-        'x-sliding-panel-at-start': boolean;
-        'x-sliding-panel-at-end': boolean;
+        'xds:sliding-panel-at-start': boolean;
+        'xds:sliding-panel-at-end': boolean;
     }>;
     scrollContainerRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
     slotContainerWidth: import("vue").ShallowRef<number, number>;

package/types/src/index.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 /**
  * X-Components is a library usable everywhere not only for search experiences.
- *
  * @packageDocumentation
  */
 export * from './components';

package/types/src/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA~~;;;;GAIG~~;~~AAGH~~,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,6BAA6B,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,6BAA6B,CAAA"}

package/types/src/x-bus/x-bus.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"x-bus.d.ts","sourceRoot":"","sources":["../../../../src/x-bus/x-bus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AACtC,OAAO,KAAK,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,IAAI,EACJ,yBAAyB,EACzB,sBAAsB,EACvB,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAK9D;;;;;;GAMG;AACH,qBAAa,YAAY,CACvB,UAAU,SAAS,UAAU,EAC7B,iBAAiB,SAAS,yBAAyB,CACnD,YAAW,IAAI,CAAC,UAAU,EAAE,iBAAiB,CAAC;IAC9C;;;;;OAKG;IACH,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,UAAU,EAAE,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAElG;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAE1C;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAAA;IAEtC;;;;OAIG;IACH,SAAS,CAAC,aAAa,EAAE,WAAW,EAAE,CAAA;IAEtC;;;;OAIG;IACH,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAK;IAEhE;;;;OAIG;IACH,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAEjC;;;;OAIG;IACH,SAAS,CAAC,cAAc,EAAE,MAAM,EAAE,CAAK;IAEvC;;;;;;;;OAQG;gBAED,MAAM,GAAE;QACN,KAAK,CAAC,EAAE,cAAc,CAAC,UAAU,EAAE,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAA;QACzF,UAAU,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;QAC/B,aAAa,CAAC,EAAE,WAAW,EAAE,CAAA;QAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAA;KACzB;IAUR;;;;;;;;OAQG;IAEH,IAAI,CAAC,SAAS,SAAS,MAAM,UAAU,EACrC,KAAK,EAAE,SAAS,EAEhB,OAAO,CAAC,EAAE,YAAY,CAAC,UAAU,EAAE,SAAS,CAAC,EAC7C,QAAQ,GAAS,iBAAiB,GACjC,OAAO,CAAC,WAAW,CAAC,UAAU,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;IAejE;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAAU,EAAE,QAAQ,EAAE,iBAAiB,GAAG,QAAQ;IAa1F;;;;;;;;;OASG;IACH,SAAS,CAAC,UAAU,IAAI,IAAI;IAgC5B;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAK3B;;;;;;;OAOG;IACH,EAAE,CAAC,SAAS,SAAS,MAAM,UAAU,EACnC,KAAK,EAAE,SAAS,EAChB,YAAY,UAAQ,GACnB,OAAO,YAAY,SAAS,IAAI,GAC/B,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,iBAAiB,CAAC,CAAC,GAClF,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;~~IAgBnD~~;;;;;;;;OAQG;IACH,SAAS,CAAC,UAAU,CAAC,SAAS,SAAS,MAAM,UAAU,EACrD,KAAK,EAAE,SAAS,GACf,OAAO,CAAC,UAAU,EAAE,SAAS,EAAE,iBAAiB,CAAC;IAQpD;;;;;;;;;;OAUG;IACH,SAAS,CAAC,aAAa,CAAC,SAAS,SAAS,MAAM,UAAU,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI;CAKpF"}
1	+ {"version":3,"file":"x-bus.d.ts","sourceRoot":"","sources":["../../../../src/x-bus/x-bus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AACtC,OAAO,KAAK,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,IAAI,EACJ,yBAAyB,EACzB,sBAAsB,EACvB,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAK9D;;;;;;GAMG;AACH,qBAAa,YAAY,CACvB,UAAU,SAAS,UAAU,EAC7B,iBAAiB,SAAS,yBAAyB,CACnD,YAAW,IAAI,CAAC,UAAU,EAAE,iBAAiB,CAAC;IAC9C;;;;;OAKG;IACH,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,UAAU,EAAE,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAElG;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAE1C;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAAA;IAEtC;;;;OAIG;IACH,SAAS,CAAC,aAAa,EAAE,WAAW,EAAE,CAAA;IAEtC;;;;OAIG;IACH,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAK;IAEhE;;;;OAIG;IACH,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAEjC;;;;OAIG;IACH,SAAS,CAAC,cAAc,EAAE,MAAM,EAAE,CAAK;IAEvC;;;;;;;;OAQG;gBAED,MAAM,GAAE;QACN,KAAK,CAAC,EAAE,cAAc,CAAC,UAAU,EAAE,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAA;QACzF,UAAU,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;QAC/B,aAAa,CAAC,EAAE,WAAW,EAAE,CAAA;QAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAA;KACzB;IAUR;;;;;;;;OAQG;IAEH,IAAI,CAAC,SAAS,SAAS,MAAM,UAAU,EACrC,KAAK,EAAE,SAAS,EAEhB,OAAO,CAAC,EAAE,YAAY,CAAC,UAAU,EAAE,SAAS,CAAC,EAC7C,QAAQ,GAAS,iBAAiB,GACjC,OAAO,CAAC,WAAW,CAAC,UAAU,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;IAejE;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAAU,EAAE,QAAQ,EAAE,iBAAiB,GAAG,QAAQ;IAa1F;;;;;;;;;OASG;IACH,SAAS,CAAC,UAAU,IAAI,IAAI;IAgC5B;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAK3B;;;;;;;OAOG;IACH,EAAE,CAAC,SAAS,SAAS,MAAM,UAAU,EACnC,KAAK,EAAE,SAAS,EAChB,YAAY,UAAQ,GACnB,OAAO,YAAY,SAAS,IAAI,GAC/B,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,iBAAiB,CAAC,CAAC,GAClF,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IAanD;;;;;;;;OAQG;IACH,SAAS,CAAC,UAAU,CAAC,SAAS,SAAS,MAAM,UAAU,EACrD,KAAK,EAAE,SAAS,GACf,OAAO,CAAC,UAAU,EAAE,SAAS,EAAE,iBAAiB,CAAC;IAQpD;;;;;;;;;;OAUG;IACH,SAAS,CAAC,aAAa,CAAC,SAAS,SAAS,MAAM,UAAU,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI;CAKpF"}

package/types/src/x-modules/facets/components/filters/all-filter.vue.d.ts CHANGED Viewed

@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     clickEvent: import("vue").ComputedRef<Partial<XEventsTypes>>;
     cssClasses: import("vue").ComputedRef<{
-        'x-selected x-all-filter--is-selected': boolean;
+        'xds:selected x-all-filter--is-selected': boolean;
     }>;
     isSelected: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/types/demo/views/adapter.d.ts DELETED Viewed

@@ -1,3 +0,0 @@
-import type { PlatformAdapter } from '@empathyco/x-adapter-platform';
-export declare const adapter: PlatformAdapter;
-//# sourceMappingURL=adapter.d.ts.map

package/types/demo/views/adapter.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../../../../demo/views/adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,eAAO,MAAM,OAAO,iBAElB,CAAA"}

package/types/src/components/column-picker/base-column-picker-list.types.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-import type { VueCSSClasses } from '../../utils/types';
-import type { XEventsTypes } from '../../wiring';
-export interface ColumnPickerItem {
-    column: number;
-    cssClasses: VueCSSClasses;
-    events: Partial<XEventsTypes>;
-    isSelected: boolean;
-}
-//# sourceMappingURL=base-column-picker-list.types.d.ts.map

package/types/src/components/column-picker/base-column-picker-list.types.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"base-column-picker-list.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/column-picker/base-column-picker-list.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,aAAa,CAAA;IACzB,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC7B,UAAU,EAAE,OAAO,CAAA;CACpB"}