@empathyco/x-components 6.0.0-alpha.24 → 6.0.0-alpha.240

package/js/x-modules/ai/store/module.js

@@ -0,0 +1,115 @@
+import { isFacetFilter } from '@empathyco/x-types';
+import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils.js';
+import { setQuery } from '../../../store/utils/query.utils.js';
+import { groupItemsBy } from '../../../utils/array.js';
+import { UNKNOWN_FACET_KEY } from '../../facets/store/constants.js';
+import { fetchAndSaveAiSuggestionsSearch } from './actions/fetch-and-save-ai-suggestions-search.action.js';
+import { fetchAndSaveAiSuggestions } from './actions/fetch-and-save-ai-suggestions.action.js';
+import { saveOrigin } from './actions/save-origin.action.js';
+import { setUrlParams } from './actions/set-url-params.action.js';
+import { query } from './getters/ai-query.getter.js';
+import { suggestionsRequest } from './getters/suggestions-request.getter.js';
+import { suggestionsSearchRequest } from './getters/suggestions-search-request.getter.js';
+
+/**
+ * {@link XStoreModule} For the ai module.
+ *
+ * @internal
+ */
+const aiXStoreModule = {
+    state: () => ({
+        ...resettableAiState(),
+        selectedFilters: {},
+        query: '',
+        config: {
+            lowResultsThreshold: 50,
+        },
+        params: {},
+        origin: null,
+        relatedTags: [],
+        searchTotalResults: 0,
+    }),
+    getters: {
+        suggestionsRequest,
+        suggestionsSearchRequest,
+        query,
+    },
+    mutations: {
+        /* Streamed fields */
+        setResponseText: (state, responseText) => {
+            state.responseText = responseText;
+        },
+        setSuggestionText: (state, suggestionText) => {
+            state.suggestionText = suggestionText;
+        },
+        setQueries: (state, queries) => {
+            state.queries = queries;
+        },
+        setTagging: (state, tagging) => {
+            state.tagging = tagging;
+        },
+        /* END Streamed fields */
+        setSuggestionsSearch: (state, suggestionsSearch) => {
+            state.suggestionsSearch = suggestionsSearch;
+        },
+        setSuggestionsStatus: (state, status) => {
+            state.suggestionsStatus = status;
+        },
+        setSuggestionsSearchStatus: (state, status) => {
+            state.suggestionsSearchStatus = status;
+        },
+        setQuery,
+        setParams(state, params) {
+            state.params = params;
+        },
+        setOrigin(state, origin = null) {
+            state.origin = origin;
+        },
+        resetAiState(state) {
+            Object.assign(state, resettableAiState());
+        },
+        setAiRelatedTags(state, relatedTags) {
+            state.relatedTags = relatedTags;
+        },
+        setIsNoResults(state, isNoResults) {
+            state.isNoResults = isNoResults;
+        },
+        setSelectedFilters(state, selectedFilters) {
+            state.selectedFilters = groupItemsBy(selectedFilters, filter => isFacetFilter(filter) ? filter.facetId : UNKNOWN_FACET_KEY);
+        },
+        setSearchTotalResults(state, totalResults) {
+            state.searchTotalResults = totalResults;
+        },
+        setConfig,
+        mergeConfig,
+    },
+    actions: {
+        fetchAndSaveAiSuggestions,
+        fetchAndSaveAiSuggestionsSearch,
+        setUrlParams,
+        saveOrigin,
+    },
+};
+/**
+ * Function to return the "resettable" part of the state. This will be used in the `resetState`
+ * mutation to reset to the initial state.
+ *
+ * @returns The "resettable" part of the {@link AiState}.
+ *
+ * @internal
+ */
+function resettableAiState() {
+    return {
+        responseText: '',
+        suggestionText: '',
+        queries: [],
+        tagging: undefined,
+        suggestionsSearch: [],
+        suggestionsStatus: 'initial',
+        suggestionsSearchStatus: 'initial',
+        isNoResults: true,
+    };
+}
+
+export { aiXStoreModule };
+//# sourceMappingURL=module.js.map

package/js/x-modules/ai/store/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/ai/store/module.ts"],"sourcesContent":["import type { AiSuggestionQuery, AiSuggestionSearch } from '@empathyco/x-types'\nimport type { RequestStatus } from '../../../store/utils/status-store.utils'\nimport type { AiState, AiXStoreModule } from './types'\nimport { isFacetFilter } from '@empathyco/x-types'\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils'\nimport { setQuery } from '../../../store/utils/query.utils'\nimport { groupItemsBy } from '../../../utils/array'\nimport { UNKNOWN_FACET_KEY } from '../../facets/store/constants'\nimport { fetchAndSaveAiSuggestionsSearch } from './actions/fetch-and-save-ai-suggestions-search.action'\nimport { fetchAndSaveAiSuggestions } from './actions/fetch-and-save-ai-suggestions.action'\nimport { saveOrigin } from './actions/save-origin.action'\nimport { setUrlParams } from './actions/set-url-params.action'\nimport {\n  aiQuery as query,\n  aiSuggestionsRequest as suggestionsRequest,\n  aiSuggestionsSearchRequest as suggestionsSearchRequest,\n} from './getters'\n\n/**\n * {@link XStoreModule} For the ai module.\n *\n * @internal\n */\nexport const aiXStoreModule: AiXStoreModule = {\n  state: () => ({\n    ...resettableAiState(),\n    selectedFilters: {},\n    query: '',\n    config: {\n      lowResultsThreshold: 50,\n    },\n    params: {},\n    origin: null,\n    relatedTags: [],\n    searchTotalResults: 0,\n  }),\n  getters: {\n    suggestionsRequest,\n    suggestionsSearchRequest,\n    query,\n  },\n  mutations: {\n    /* Streamed fields */\n    setResponseText: (state, responseText: string) => {\n      state.responseText = responseText\n    },\n    setSuggestionText: (state, suggestionText: string) => {\n      state.suggestionText = suggestionText\n    },\n    setQueries: (state, queries: AiSuggestionQuery[]) => {\n      state.queries = queries\n    },\n    setTagging: (state, tagging) => {\n      state.tagging = tagging\n    },\n    /* END Streamed fields */\n    setSuggestionsSearch: (state, suggestionsSearch: AiSuggestionSearch[]) => {\n      state.suggestionsSearch = suggestionsSearch\n    },\n    setSuggestionsStatus: (state, status: RequestStatus) => {\n      state.suggestionsStatus = status\n    },\n    setSuggestionsSearchStatus: (state, status: RequestStatus) => {\n      state.suggestionsSearchStatus = status\n    },\n    setQuery,\n    setParams(state, params) {\n      state.params = params\n    },\n    setOrigin(state, origin = null) {\n      state.origin = origin\n    },\n    resetAiState(state) {\n      Object.assign(state, resettableAiState())\n    },\n    setAiRelatedTags(state, relatedTags) {\n      state.relatedTags = relatedTags\n    },\n    setIsNoResults(state, isNoResults: boolean) {\n      state.isNoResults = isNoResults\n    },\n    setSelectedFilters(state, selectedFilters) {\n      state.selectedFilters = groupItemsBy(selectedFilters, filter =>\n        isFacetFilter(filter) ? filter.facetId : UNKNOWN_FACET_KEY,\n      )\n    },\n    setSearchTotalResults(state, totalResults) {\n      state.searchTotalResults = totalResults\n    },\n    setConfig,\n    mergeConfig,\n  },\n  actions: {\n    fetchAndSaveAiSuggestions,\n    fetchAndSaveAiSuggestionsSearch,\n    setUrlParams,\n    saveOrigin,\n  },\n}\n\n/**\n * Function to return the \"resettable\" part of the state. This will be used in the `resetState`\n * mutation to reset to the initial state.\n *\n * @returns The \"resettable\" part of the {@link AiState}.\n *\n * @internal\n */\nfunction resettableAiState() {\n  return {\n    responseText: '',\n    suggestionText: '',\n    queries: [],\n    tagging: undefined,\n    suggestionsSearch: [],\n    suggestionsStatus: 'initial' as RequestStatus,\n    suggestionsSearchStatus: 'initial' as RequestStatus,\n    isNoResults: true,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;;AAIG;AACI,MAAM,cAAc,GAAmB;AAC5C,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,GAAG,iBAAiB,EAAE;AACtB,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,MAAM,EAAE;AACN,YAAA,mBAAmB,EAAE,EAAE;AACxB,SAAA;AACD,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,MAAM,EAAE,IAAI;AACZ,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,kBAAkB,EAAE,CAAC;KACtB,CAAC;AACF,IAAA,OAAO,EAAE;QACP,kBAAkB;QAClB,wBAAwB;QACxB,KAAK;AACN,KAAA;AACD,IAAA,SAAS,EAAE;;AAET,QAAA,eAAe,EAAE,CAAC,KAAK,EAAE,YAAoB,KAAI;AAC/C,YAAA,KAAK,CAAC,YAAY,GAAG,YAAY;QACnC,CAAC;AACD,QAAA,iBAAiB,EAAE,CAAC,KAAK,EAAE,cAAsB,KAAI;AACnD,YAAA,KAAK,CAAC,cAAc,GAAG,cAAc;QACvC,CAAC;AACD,QAAA,UAAU,EAAE,CAAC,KAAK,EAAE,OAA4B,KAAI;AAClD,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO;QACzB,CAAC;AACD,QAAA,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAI;AAC7B,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO;QACzB,CAAC;;AAED,QAAA,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAuC,KAAI;AACvE,YAAA,KAAK,CAAC,iBAAiB,GAAG,iBAAiB;QAC7C,CAAC;AACD,QAAA,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAqB,KAAI;AACrD,YAAA,KAAK,CAAC,iBAAiB,GAAG,MAAM;QAClC,CAAC;AACD,QAAA,0BAA0B,EAAE,CAAC,KAAK,EAAE,MAAqB,KAAI;AAC3D,YAAA,KAAK,CAAC,uBAAuB,GAAG,MAAM;QACxC,CAAC;QACD,QAAQ;QACR,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM;QACvB,CAAC;AACD,QAAA,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAA;AAC5B,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM;QACvB,CAAC;AACD,QAAA,YAAY,CAAC,KAAK,EAAA;YAChB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAC;QAC3C,CAAC;QACD,gBAAgB,CAAC,KAAK,EAAE,WAAW,EAAA;AACjC,YAAA,KAAK,CAAC,WAAW,GAAG,WAAW;QACjC,CAAC;QACD,cAAc,CAAC,KAAK,EAAE,WAAoB,EAAA;AACxC,YAAA,KAAK,CAAC,WAAW,GAAG,WAAW;QACjC,CAAC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAA;YACvC,KAAK,CAAC,eAAe,GAAG,YAAY,CAAC,eAAe,EAAE,MAAM,IAC1D,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,iBAAiB,CAC3D;QACH,CAAC;QACD,qBAAqB,CAAC,KAAK,EAAE,YAAY,EAAA;AACvC,YAAA,KAAK,CAAC,kBAAkB,GAAG,YAAY;QACzC,CAAC;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,yBAAyB;QACzB,+BAA+B;QAC/B,YAAY;QACZ,UAAU;AACX,KAAA;;AAGH;;;;;;;AAOG;AACH,SAAS,iBAAiB,GAAA;IACxB,OAAO;AACL,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,cAAc,EAAE,EAAE;AAClB,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,iBAAiB,EAAE,EAAE;AACrB,QAAA,iBAAiB,EAAE,SAA0B;AAC7C,QAAA,uBAAuB,EAAE,SAA0B;AACnD,QAAA,WAAW,EAAE,IAAI;KAClB;AACH;;;;"}

package/js/x-modules/ai/wiring.js

@@ -0,0 +1,77 @@
+import { namespacedWireCommit, namespacedWireDispatch, namespacedWireCommitWithoutPayload } from '../../wiring/namespaced-wires.factory.js';
+import 'rxjs/operators';
+import 'rxjs';
+import { createWiring } from '../../wiring/wiring.utils.js';
+
+/** AI XModule name. */
+const moduleName = 'ai';
+/** WireCommit for AiXModule. */
+const wireCommit = namespacedWireCommit(moduleName);
+/** WireCommitWithoutPayload for AiXModule. */
+const wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName);
+/** WireDispatch for AiXModule.*/
+const wireDispatch = namespacedWireDispatch(moduleName);
+/** Sets the AI state from URL data. */
+const setUrlParamsWire = wireDispatch('setUrlParams');
+/** Sets the AI state `params`. */
+const setExtraParamsWire = wireCommit('setParams');
+/** Resets the AI state `query`. */
+const resetAiQueryWire = wireCommit('setQuery', '');
+/** Sets the AI state `query`. */
+const setAiQueryWire = wireCommit('setQuery', ({ eventPayload: { request } }) => request.query);
+/** Fetches the AI suggestions streaming response. */
+const fetchAndSaveAiSuggestionsWire = wireDispatch('fetchAndSaveAiSuggestions');
+/** Fetches and save the AI suggestions search response. */
+const fetchAndSaveAiSuggestionsSearchWire = wireDispatch('fetchAndSaveAiSuggestionsSearch', true);
+/** Sets the AI state `relatedTags`.*/
+const setAiRelatedTagsWire = wireCommit('setAiRelatedTags');
+/** Resets the related prompts state. */
+const resetAiStateWire = wireCommitWithoutPayload('resetAiState');
+/** Sets the origin for the AI requests. */
+const saveAiOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata);
+/** Sets the AI state `selectedFilters`. */
+const setSelectedFiltersWire = wireCommit('setSelectedFilters');
+/** Resets the AI state `searchTotalResults`. */
+const resetSearchTotalResultsWire = wireCommit('setSearchTotalResults', 0);
+/** Sets the AI state `searchTotalResults`. */
+const setSearchTotalResultsWire = wireCommit('setSearchTotalResults', ({ eventPayload }) => eventPayload.totalResults);
+/**
+ *  Wiring configuration for the {@link AiXModule | AI module}.
+ *
+ * @internal
+ */
+const aiWiring = createWiring({
+    ParamsLoadedFromUrl: {
+        setUrlParamsWire,
+    },
+    ExtraParamsChanged: {
+        setExtraParamsWire,
+    },
+    UserClearedQuery: {
+        resetAiQueryWire,
+        resetSearchTotalResultsWire,
+    },
+    AiSuggestionsRequestUpdated: {
+        resetAiStateWire,
+        fetchAndSaveAiSuggestionsWire,
+    },
+    AiSuggestionsSearchRequestUpdated: {
+        fetchAndSaveAiSuggestionsSearchWire,
+    },
+    SelectedRelatedTagsChanged: {
+        setAiRelatedTagsWire,
+    },
+    SelectedFiltersForRequestChanged: {
+        setSelectedFiltersWire,
+    },
+    AiComponentMounted: {
+        saveAiOriginWire,
+    },
+    SearchResponseChanged: {
+        setAiQueryWire,
+        setSearchTotalResultsWire,
+    },
+});
+
+export { aiWiring };
+//# sourceMappingURL=wiring.js.map

package/js/x-modules/ai/wiring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/ai/wiring.ts"],"sourcesContent":["import type { InternalSearchResponse } from '../search/index'\nimport {\n  createWiring,\n  namespacedWireCommit,\n  namespacedWireCommitWithoutPayload,\n  namespacedWireDispatch,\n} from '../../wiring'\n\n/** AI XModule name. */\nconst moduleName = 'ai'\n/** WireCommit for AiXModule. */\nconst wireCommit = namespacedWireCommit(moduleName)\n/** WireCommitWithoutPayload for AiXModule. */\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName)\n/** WireDispatch for AiXModule.*/\nconst wireDispatch = namespacedWireDispatch(moduleName)\n\n/** Sets the AI state from URL data. */\nconst setUrlParamsWire = wireDispatch('setUrlParams')\n/** Sets the AI state `params`. */\nconst setExtraParamsWire = wireCommit('setParams')\n\n/** Resets the AI state `query`. */\nconst resetAiQueryWire = wireCommit('setQuery', '')\n\n/** Sets the AI state `query`. */\nconst setAiQueryWire = wireCommit(\n  'setQuery',\n  ({ eventPayload: { request } }: { eventPayload: InternalSearchResponse }) => request.query,\n)\n\n/** Fetches the AI suggestions streaming response. */\nconst fetchAndSaveAiSuggestionsWire = wireDispatch('fetchAndSaveAiSuggestions')\n\n/** Fetches and save the AI suggestions search response. */\nconst fetchAndSaveAiSuggestionsSearchWire = wireDispatch('fetchAndSaveAiSuggestionsSearch', true)\n\n/** Sets the AI state `relatedTags`.*/\nconst setAiRelatedTagsWire = wireCommit('setAiRelatedTags')\n\n/** Resets the related prompts state. */\nconst resetAiStateWire = wireCommitWithoutPayload('resetAiState')\n\n/** Sets the origin for the AI requests. */\nconst saveAiOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata)\n\n/** Sets the AI state `selectedFilters`. */\nconst setSelectedFiltersWire = wireCommit('setSelectedFilters')\n\n/** Resets the AI state `searchTotalResults`. */\nconst resetSearchTotalResultsWire = wireCommit('setSearchTotalResults', 0)\n\n/** Sets the AI state `searchTotalResults`. */\nconst setSearchTotalResultsWire = wireCommit(\n  'setSearchTotalResults',\n  ({ eventPayload }: { eventPayload: { totalResults: number } }) => eventPayload.totalResults,\n)\n\n/**\n *  Wiring configuration for the {@link AiXModule | AI module}.\n *\n * @internal\n */\nexport const aiWiring = createWiring({\n  ParamsLoadedFromUrl: {\n    setUrlParamsWire,\n  },\n  ExtraParamsChanged: {\n    setExtraParamsWire,\n  },\n  UserClearedQuery: {\n    resetAiQueryWire,\n    resetSearchTotalResultsWire,\n  },\n  AiSuggestionsRequestUpdated: {\n    resetAiStateWire,\n    fetchAndSaveAiSuggestionsWire,\n  },\n  AiSuggestionsSearchRequestUpdated: {\n    fetchAndSaveAiSuggestionsSearchWire,\n  },\n  SelectedRelatedTagsChanged: {\n    setAiRelatedTagsWire,\n  },\n  SelectedFiltersForRequestChanged: {\n    setSelectedFiltersWire,\n  },\n  AiComponentMounted: {\n    saveAiOriginWire,\n  },\n  SearchResponseChanged: {\n    setAiQueryWire,\n    setSearchTotalResultsWire,\n  },\n})\n"],"names":[],"mappings":";;;;;AAQA;AACA,MAAM,UAAU,GAAG,IAAI;AACvB;AACA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC;AACnD;AACA,MAAM,wBAAwB,GAAG,kCAAkC,CAAC,UAAU,CAAC;AAC/E;AACA,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC;AAEvD;AACA,MAAM,gBAAgB,GAAG,YAAY,CAAC,cAAc,CAAC;AACrD;AACA,MAAM,kBAAkB,GAAG,UAAU,CAAC,WAAW,CAAC;AAElD;AACA,MAAM,gBAAgB,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,CAAC;AAEnD;AACA,MAAM,cAAc,GAAG,UAAU,CAC/B,UAAU,EACV,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAA4C,KAAK,OAAO,CAAC,KAAK,CAC3F;AAED;AACA,MAAM,6BAA6B,GAAG,YAAY,CAAC,2BAA2B,CAAC;AAE/E;AACA,MAAM,mCAAmC,GAAG,YAAY,CAAC,iCAAiC,EAAE,IAAI,CAAC;AAEjG;AACA,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,CAAC;AAE3D;AACA,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,cAAc,CAAC;AAEjE;AACA,MAAM,gBAAgB,GAAG,YAAY,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAC;AAE/E;AACA,MAAM,sBAAsB,GAAG,UAAU,CAAC,oBAAoB,CAAC;AAE/D;AACA,MAAM,2BAA2B,GAAG,UAAU,CAAC,uBAAuB,EAAE,CAAC,CAAC;AAE1E;AACA,MAAM,yBAAyB,GAAG,UAAU,CAC1C,uBAAuB,EACvB,CAAC,EAAE,YAAY,EAA8C,KAAK,YAAY,CAAC,YAAY,CAC5F;AAED;;;;AAIG;AACI,MAAM,QAAQ,GAAG,YAAY,CAAC;AACnC,IAAA,mBAAmB,EAAE;QACnB,gBAAgB;AACjB,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,kBAAkB;AACnB,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,gBAAgB;QAChB,2BAA2B;AAC5B,KAAA;AACD,IAAA,2BAA2B,EAAE;QAC3B,gBAAgB;QAChB,6BAA6B;AAC9B,KAAA;AACD,IAAA,iCAAiC,EAAE;QACjC,mCAAmC;AACpC,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,oBAAoB;AACrB,KAAA;AACD,IAAA,gCAAgC,EAAE;QAChC,sBAAsB;AACvB,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,gBAAgB;AACjB,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,cAAc;QACd,yBAAyB;AAC1B,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/ai/x-module.js

@@ -0,0 +1,23 @@
+import '../../plugins/x-bus.js';
+import '@empathyco/x-utils';
+import { XPlugin } from '../../plugins/x-plugin.js';
+import { aiEmitters } from './store/emitters.js';
+import { aiXStoreModule } from './store/module.js';
+import { aiWiring } from './wiring.js';
+
+/**
+ * AI {@link XModule} implementation. This module is auto-registered as soon as you
+ * import any component from the `AI` entry point.
+ *
+ * @public
+ */
+const aiXModule = {
+    name: 'ai',
+    storeModule: aiXStoreModule,
+    storeEmitters: aiEmitters,
+    wiring: aiWiring,
+};
+XPlugin.registerXModule(aiXModule);
+
+export { aiXModule };
+//# sourceMappingURL=x-module.js.map

package/js/x-modules/ai/x-module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/ai/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { AiXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins'\nimport { aiEmitters } from './store/emitters'\nimport { aiXStoreModule } from './store/module'\nimport { aiWiring } from './wiring'\n\n/**\n * Ai {@link XModule} alias.\n *\n * @public\n */\nexport type AiXModule = XModule<AiXStoreModule>\n\n/**\n * AI {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `AI` entry point.\n *\n * @public\n */\nexport const aiXModule: AiXModule = {\n  name: 'ai',\n  storeModule: aiXStoreModule,\n  storeEmitters: aiEmitters,\n  wiring: aiWiring,\n}\n\nXPlugin.registerXModule(aiXModule)\n"],"names":[],"mappings":";;;;;;;AAcA;;;;;AAKG;AACI,MAAM,SAAS,GAAc;AAClC,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,WAAW,EAAE,cAAc;AAC3B,IAAA,aAAa,EAAE,UAAU;AACzB,IAAA,MAAM,EAAE,QAAQ;;AAGlB,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC;;;;"}

package/js/x-modules/device/components/device-detector.vue.js

@@ -6,8 +6,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_GlobalEvents = resolveComponent("GlobalEvents");
   return !_ctx.force ? (openBlock(), createBlock(_component_GlobalEvents, {
     key: 0,
-    onResize: _ctx.throttledStoreWindowWidth,
-    target: "window"
+    target: "window",
+    onResize: _ctx.throttledStoreWindowWidth
   }, null, 8, ["onResize"])) : createCommentVNode("v-if", true);
 }
 var deviceDetector = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/js/x-modules/device/components/device-detector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'DeviceDetector',\n    xModule: deviceXModule.name,\n    components: { GlobalEvents },\n    props: {\n      /**\n       * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n       * the max width in pixels for that device.\n       *\n       * @public\n       */\n      breakpoints: {\n        type: Object as PropType<Record<Device, MaxWidth>>,\n        default: () => ({})\n      },\n      /**\n       * Forces a device, ignoring the breakpoints prop.\n       *\n       * @public\n       */\n      force: String as PropType<Device>,\n\n      /**\n       * Time in milliseconds to throttle the resize events used to detect the device.\n       *\n       * @public\n       */\n      throttleMs: {\n        type: Number,\n        default: 100\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * The width in pixels of the window where the app is being rendered.\n       *\n       * @internal\n       */\n      const windowWidthPx: Ref<number | null> = ref(null);\n\n      /**\n       * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n       *\n       * @internal\n       */\n      const storeWindowWidth = (): void => {\n        windowWidthPx.value = window.innerWidth;\n      };\n\n      /**\n       * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n       *\n       * @internal\n       */\n      let throttledStoreWindowWidth = storeWindowWidth;\n\n      /**\n       * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n       * max width.\n       *\n       * @returns A list of the breakpoints sorted by its max width in ascending order.\n       *\n       * @internal\n       */\n      const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n        Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth)\n      );\n\n      /**\n       * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @internal\n       */\n      const detectedDevice = computed((): string | null => {\n        if (props.force) {\n          return props.force;\n        } else if (windowWidthPx.value === null) {\n          return null;\n        } else {\n          return (\n            sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n          );\n        }\n      });\n\n      watch(\n        detectedDevice,\n        device => {\n          xBus.emit('DeviceProvided', device);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n       * {@link DeviceDetector.throttleMs}.\n       *\n       * @param throttleMs - The new duration in milliseconds for the throttle.\n       *\n       * @internal\n       */\n      watch(\n        () => props.throttleMs,\n        throttleMs => {\n          throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Initialises the store window width.\n       *\n       * @remarks This is done this way to ensure SSR compatibility.\n       *\n       * @internal\n       */\n      onMounted(() => {\n        storeWindowWidth();\n      });\n\n      return {\n        throttledStoreWindowWidth\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;AAC4B,EAAA,MAAA,uBAAA,GAAAA,gBAAA,CAAA,cAAA,CAAA,CAAA;AAD5B,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAC,SAAA,EACgE,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,GAAA,EAAA,CAAA;AAAA,IAAA,QAAA,EAAA,IAAA,CAAA,yBAAA;AADlE,IAAA,MAAA,EAAA,QAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ x.device }}\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue'\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ x.device }}\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue'\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a ref and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script setup>\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { reactive, ref } from 'vue'\nconst device = ref('unknown')\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\nfunction storeDevice(newDevice) {\n  device.value = newDevice\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;;AACuB,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAA,SAAA,EAAA,EAArBC,WAAA,CAAkF,uBAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAAtD,MAAA,EAAO,QAAA;AAAA,IAAU,QAAA,EAAQ,IAAA,CAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;"}

package/js/x-modules/device/components/device-detector.vue2.js

@@ -1,126 +1,126 @@
 import { defineComponent, ref, computed, watch, onMounted } from 'vue';
 import { GlobalEvents } from 'vue-global-events';
+import { useXBus } from '../../../composables/use-x-bus.js';
 import { throttle } from '../../../utils/throttle.js';
 import { deviceXModule } from '../x-module.js';
-import { useXBus } from '../../../composables/use-x-bus.js';
 
-/**
- * This component helps to detect or setting a device, that can be used later to create
- * different layouts optimized for different devices. This detected device is available under
- * the {@link XComponentAliasAPI.device} property.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'DeviceDetector',
-    xModule: deviceXModule.name,
-    components: { GlobalEvents },
-    props: {
-        /**
-         * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And
-         * the max width in pixels for that device.
-         *
-         * @public
-         */
-        breakpoints: {
-            type: Object,
-            default: () => ({})
-        },
-        /**
-         * Forces a device, ignoring the breakpoints prop.
-         *
-         * @public
-         */
-        force: String,
-        /**
-         * Time in milliseconds to throttle the resize events used to detect the device.
-         *
-         * @public
-         */
-        throttleMs: {
-            type: Number,
-            default: 100
-        }
-    },
-    setup(props) {
-        const xBus = useXBus();
-        /**
-         * The width in pixels of the window where the app is being rendered.
-         *
-         * @internal
-         */
-        const windowWidthPx = ref(null);
-        /**
-         * Stores the window width in {@link DeviceDetector.windowWidthPx}.
-         *
-         * @internal
-         */
-        const storeWindowWidth = () => {
-            windowWidthPx.value = window.innerWidth;
-        };
-        /**
-         * Throttled version of {@link DeviceDetector.storeWindowWidth} function.
-         *
-         * @internal
-         */
-        let throttledStoreWindowWidth = storeWindowWidth;
-        /**
-         * List of each of the entries of the breakpoints sorted from the smallest to the biggest
-         * max width.
-         *
-         * @returns A list of the breakpoints sorted by its max width in ascending order.
-         *
-         * @internal
-         */
-        const sortedBreakpoints = computed(() => Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth));
-        /**
-         * The device detected by this component, or the value provided in {@link DeviceDetector.force}
-         * prop.
-         *
-         * @returns The detected device, or the value provided in {@link DeviceDetector.force}
-         * prop.
-         *
-         * @internal
-         */
-        const detectedDevice = computed(() => {
-            if (props.force) {
-                return props.force;
-            }
-            else if (windowWidthPx.value === null) {
-                return null;
-            }
-            else {
-                return (sortedBreakpoints.value.find(([, width]) => windowWidthPx.value <= width)?.[0] ?? null);
-            }
-        });
-        watch(detectedDevice, device => {
-            xBus.emit('DeviceProvided', device);
-        }, { immediate: true });
-        /**
-         * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at
-         * {@link DeviceDetector.throttleMs}.
-         *
-         * @param throttleMs - The new duration in milliseconds for the throttle.
-         *
-         * @internal
-         */
-        watch(() => props.throttleMs, throttleMs => {
-            throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);
-        }, { immediate: true });
-        /**
-         * Initialises the store window width.
-         *
-         * @remarks This is done this way to ensure SSR compatibility.
-         *
-         * @internal
-         */
-        onMounted(() => {
-            storeWindowWidth();
-        });
-        return {
-            throttledStoreWindowWidth
-        };
-    }
+/**
+ * This component helps to detect or setting a device, that can be used later to create
+ * different layouts optimized for different devices. This detected device is available under
+ * the {@link XComponentAliasAPI.device} property.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'DeviceDetector',
+    xModule: deviceXModule.name,
+    components: { GlobalEvents },
+    props: {
+        /**
+         * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And
+         * the max width in pixels for that device.
+         *
+         * @public
+         */
+        breakpoints: {
+            type: Object,
+            default: () => ({}),
+        },
+        /**
+         * Forces a device, ignoring the breakpoints prop.
+         *
+         * @public
+         */
+        force: String,
+        /**
+         * Time in milliseconds to throttle the resize events used to detect the device.
+         *
+         * @public
+         */
+        throttleMs: {
+            type: Number,
+            default: 100,
+        },
+    },
+    setup(props) {
+        const xBus = useXBus();
+        /**
+         * The width in pixels of the window where the app is being rendered.
+         *
+         * @internal
+         */
+        const windowWidthPx = ref(null);
+        /**
+         * Stores the window width in {@link DeviceDetector.windowWidthPx}.
+         *
+         * @internal
+         */
+        const storeWindowWidth = () => {
+            windowWidthPx.value = window.innerWidth;
+        };
+        /**
+         * Throttled version of {@link DeviceDetector.storeWindowWidth} function.
+         *
+         * @internal
+         */
+        let throttledStoreWindowWidth = storeWindowWidth;
+        /**
+         * List of each of the entries of the breakpoints sorted from the smallest to the biggest
+         * max width.
+         *
+         * @returns A list of the breakpoints sorted by its max width in ascending order.
+         *
+         * @internal
+         */
+        const sortedBreakpoints = computed(() => Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth));
+        /**
+         * The device detected by this component, or the value provided in {@link DeviceDetector.force}
+         * prop.
+         *
+         * @returns The detected device, or the value provided in {@link DeviceDetector.force}
+         * prop.
+         *
+         * @internal
+         */
+        const detectedDevice = computed(() => {
+            if (props.force) {
+                return props.force;
+            }
+            else if (windowWidthPx.value === null) {
+                return null;
+            }
+            else {
+                return (sortedBreakpoints.value.find(([, width]) => windowWidthPx.value <= width)?.[0] ?? null);
+            }
+        });
+        watch(detectedDevice, device => {
+            xBus.emit('DeviceProvided', device);
+        }, { immediate: true });
+        /**
+         * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at
+         * {@link DeviceDetector.throttleMs}.
+         *
+         * @param throttleMs - The new duration in milliseconds for the throttle.
+         *
+         * @internal
+         */
+        watch(() => props.throttleMs, throttleMs => {
+            throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);
+        }, { immediate: true });
+        /**
+         * Initialises the store window width.
+         *
+         * @remarks This is done this way to ensure SSR compatibility.
+         *
+         * @internal
+         */
+        onMounted(() => {
+            storeWindowWidth();
+        });
+        return {
+            throttledStoreWindowWidth,
+        };
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/device/components/device-detector.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'DeviceDetector',\n    xModule: deviceXModule.name,\n    components: { GlobalEvents },\n    props: {\n      /**\n       * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n       * the max width in pixels for that device.\n       *\n       * @public\n       */\n      breakpoints: {\n        type: Object as PropType<Record<Device, MaxWidth>>,\n        default: () => ({})\n      },\n      /**\n       * Forces a device, ignoring the breakpoints prop.\n       *\n       * @public\n       */\n      force: String as PropType<Device>,\n\n      /**\n       * Time in milliseconds to throttle the resize events used to detect the device.\n       *\n       * @public\n       */\n      throttleMs: {\n        type: Number,\n        default: 100\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * The width in pixels of the window where the app is being rendered.\n       *\n       * @internal\n       */\n      const windowWidthPx: Ref<number | null> = ref(null);\n\n      /**\n       * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n       *\n       * @internal\n       */\n      const storeWindowWidth = (): void => {\n        windowWidthPx.value = window.innerWidth;\n      };\n\n      /**\n       * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n       *\n       * @internal\n       */\n      let throttledStoreWindowWidth = storeWindowWidth;\n\n      /**\n       * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n       * max width.\n       *\n       * @returns A list of the breakpoints sorted by its max width in ascending order.\n       *\n       * @internal\n       */\n      const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n        Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth)\n      );\n\n      /**\n       * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @internal\n       */\n      const detectedDevice = computed((): string | null => {\n        if (props.force) {\n          return props.force;\n        } else if (windowWidthPx.value === null) {\n          return null;\n        } else {\n          return (\n            sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n          );\n        }\n      });\n\n      watch(\n        detectedDevice,\n        device => {\n          xBus.emit('DeviceProvided', device);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n       * {@link DeviceDetector.throttleMs}.\n       *\n       * @param throttleMs - The new duration in milliseconds for the throttle.\n       *\n       * @internal\n       */\n      watch(\n        () => props.throttleMs,\n        throttleMs => {\n          throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Initialises the store window width.\n       *\n       * @remarks This is done this way to ensure SSR compatibility.\n       *\n       * @internal\n       */\n      onMounted(() => {\n        storeWindowWidth();\n      });\n\n      return {\n        throttledStoreWindowWidth\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAgBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAA4C;AAClD,YAAA,OAAO,EAAE,OAAO,EAAE,CAAA;AACnB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACb,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAC,CAAA;AAEnD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,aAAa,CAAC,KAAM,GAAE,MAAM,CAAC,UAAU,CAAA;AACzC,SAAC,CAAA;AAED;;;;AAIE;QACF,IAAI,yBAAwB,GAAI,gBAAgB,CAAA;AAEhD;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAK,GAAI,MAAM,CAAA,CACnF,CAAA;AAED;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAqB;YACnD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAK,CAAA;AACpB,aAAA;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAM,KAAI,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAI,CAAA;AACX,aAAA;AAAK,iBAAA;AACL,gBAAA,QACE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,aAAa,CAAC,KAAK,IAAK,KAAK,CAAC,GAAG,CAAC,CAAA,IAAK,IAAG,EACvF;AACH,aAAA;AACF,SAAC,CAAC,CAAA;AAEF,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAK;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAA;AACrC,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAW,IAAG;AACZ,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AACpE,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;AAME;QACF,SAAS,CAAC,MAAM;AACd,YAAA,gBAAgB,EAAE,CAAA;AACpB,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ x.device }}\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue'\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ x.device }}\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue'\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a ref and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script setup>\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { reactive, ref } from 'vue'\nconst device = ref('unknown')\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\nfunction storeDevice(newDevice) {\n  device.value = newDevice\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAiBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAA4C;AAClD,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;AAErB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAA;AAElD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAU;AACjC,YAAA,aAAa,CAAC,KAAI,GAAI,MAAM,CAAC,UAAS;AACxC,QAAA,CAAA;AAEA;;;;AAIE;QACF,IAAI,4BAA4B,gBAAe;AAE/C;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAK,GAAI,MAAM,CAAC,CACrF;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAmB;AACjD,YAAA,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAI;YACnB;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAI,KAAM,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAG;YACZ;iBAAO;AACL,gBAAA,QACE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,aAAa,CAAC,KAAK,IAAK,KAAK,CAAC,GAAG,CAAC,CAAA,IAAK,IAAG;YAE1F;AACF,QAAA,CAAC,CAAA;AAED,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAG;AACN,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAA;AACpC,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;AAEA;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAS,IAAG;AACV,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAA;AACnE,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;AAEA;;;;;;AAME;QACF,SAAS,CAAC,MAAI;AACZ,YAAA,gBAAgB,EAAC;AACnB,QAAA,CAAC,CAAA;QAED,OAAO;YACL,yBAAyB;SAC3B;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/device/store/emitters.js

@@ -2,11 +2,11 @@ import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { deviceXStoreModule } from './module.js';
 
-/**
- * {@link StoreEmitters} For the device module.
- *
- * @internal
- */
+/**
+ * {@link StoreEmitters} For the device module.
+ *
+ * @internal
+ */
 const deviceEmitters = createStoreEmitters(deviceXStoreModule, {});
 
 export { deviceEmitters };

package/js/x-modules/device/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { deviceXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the device module.\n *\n * @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {});\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store'\nimport { deviceXStoreModule } from './module'\n\n/**\n * {@link StoreEmitters} For the device module.\n *\n * @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {})\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACI,MAAM,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}