npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.7 → 6.0.0-alpha.70 - Mend

@empathyco/x-components 6.0.0-alpha.7 → 6.0.0-alpha.70

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

package/js/wiring/wires.operators.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wires.operators.js","sources":["../../../src/wiring/wires.operators.ts"],"sourcesContent":["import {\n debounce as debounceRx,\n filter as filterRx,\n map,\n throttle as throttleRx\n} from 'rxjs/operators';\nimport { ~~XModuleName } from '../x-modules/x-modules.types';\nimport {~~ createTimer, normalizeTime } from './wires-operators.utils'~~;\nimport { TimedWireOperatorOptions, TimeSelector, Wire, WireParams } from './wiring.types';\~~n\n/*\n Creates a {@link Wire} that is only executed whenever the condition in the filterFn is true.\n \n @param wire - The wire to filter.\n * @param filterFn - A function which must return a boolean and that will be executed every time\n * the wire is called.\n * @returns The Wire function filter.\n \n @public\n /\nexport function filter<Payload>(\n wire: Wire<Payload>,\n filterFn: (parameters: WireParams<Payload>) => boolean\n): Wire<Payload> {\n return (observable, store, on) =>\n wire(observable.pipe(filterRx(wirePayload => filterFn({ ...wirePayload, store }))), store, on);\n}\n\n/\n Creates a {@link Wire} that is only executed when the payload is truthy. A truthy value is\n * whatever is not a {@link https://developer.mozilla.org/en-US/docs/Glossary/Falsy \| falsy value}.\n \n @param wire - The wire to avoid executing when the payload is falsy.\n * @returns The Wire function falsy filter.\n \n @public\n /\nexport function filterFalsyPayload<Payload>(\n wire: Wire<Exclude<Payload, null \| undefined \| false \| 0 \| ''~~>>\~~n): Wire<Payload> {\n return filter(wire, ({ eventPayload }) => !!eventPayload) as Wire<Payload~~>;\~~n}\n\n/\n Creates a {@link Wire} that is only executed when the payload is a\n * {@link https://developer.mozilla.org/en-US/docs/Glossary/Falsy \| falsy value}.\n \n @param wire - The wire to avoid executing when the payload is truthy.\n * @returns The Wire function truthy filter.\n \n @public\n /\nexport function filterTruthyPayload<Payload>(wire: Wire<Payload>): Wire<Payload> {\n return filter(wire, ({ eventPayload }) => !eventPayload);\n}\n\n/\n Creates a {@link Wire} that is only executed if the event is emitted from a {@link XModule}\n * that is included\n * in the `whitelist` array passed as parameter.\n \n @param wire - The wire to filter using the whitelist.\n * @param whitelist - An array of {@link XModuleName} or null.\n * @returns The Wire function with whitelisted modules filter.\n \n @public\n /\nexport function filterWhitelistedModules<Payload>(\n wire: Wire<Payload>,\n whitelist: Array<XModuleName \| null>\n): Wire<Payload> {\n const whitelistSet = new Set(whitelist);\n return filter(wire, ({ metadata }) => whitelistSet.has(metadata.moduleName));\n}\n\n/\n Creates a {@link Wire} that is only executed if the event is emitted from a {@link XModule}\n * that is NOT included\n * in the `blacklist` array passed as parameter.\n \n @param wire - The wire to filter using the whitelist.\n * @param blacklist - An array of {@link XModuleName} or null.\n * @returns The Wire function with blacklisted modules filter.\n \n @public\n /\nexport function filterBlacklistedModules<Payload>(\n wire: Wire<Payload>,\n blacklist: Array<XModuleName \| null>\n): Wire<Payload> {\n const blacklistSet = new Set(blacklist);\n return filter(wire, ({ metadata }) => !blacklistSet.has(metadata.moduleName));\n}\n\n/\n Creates a debounced {@link Wire}. Being debounced means that it will only be executed after\n * the time given by `timeInMs` has passed without invoking it.\n \n @param wire - The wire to debounce.\n * @param timeInMs - The time in milliseconds to debounce the wire execution or a function to\n * retrieve it from the store.\n * @param options - Options to configure this wire with, like an event to force it or cancel it.\n * @returns The Wire function with a debounced timing.\n \n @public\n /\nexport function debounce<Payload>(\n wire: Wire<Payload>,\n timeInMs: TimeSelector \| number,\n options: TimedWireOperatorOptions = {}\n): Wire<Payload> {\n return (observable, store, on) => {\n return wire(\n observable.pipe(debounceRx(() => createTimer(normalizeTime(timeInMs, store), options, on))),\n store,\n on\n );\n };\n}\n\n/\n Creates a throttled {@link Wire}. Being throttled means that it will only be executed once\n * every couple of milliseconds given by the `timeInMs` parameter.\n \n @param wire - The wire to throttle.\n * @param timeInMs - The time in milliseconds to throttle the wire execution or a function to\n * retrieve it from the store.\n * @param options - Options to configure this wire with, like an event to force it or cancel it.\n * @returns The Wire function with a throttle timing.\n \n @public\n /\nexport function throttle<Payload>(\n wire: Wire<Payload>,\n timeInMs: TimeSelector \| number,\n options: TimedWireOperatorOptions = {}\n): Wire<Payload> {\n return (observable, store, on) => {\n return wire(\n observable.pipe(\n throttleRx(() => createTimer(normalizeTime(timeInMs, store), options, on), {\n leading: true,\n trailing: true\n })\n ),\n store,\n on\n );\n };\n}\n\n/\n Creates a {@link Wire} from other `toWire` wire. It uses `mapFn` to transform the\n * `FromPayload` received to `ToPayload` which `toWire` requires. This is\n * useful to reuse wires in different Events where the payload doesn't fit exactly.\n \n @param toWire - The wire which the new Wire is created from.\n * @param mapFn - Function to map the payload from `FromPayload` to `ToPayload`.\n * @returns A new {@link Wire}.\n \n @public\n */\nexport function mapWire<FromPayload, ToPayload>(\n toWire: Wire<ToPayload>,\n mapFn: (payload: FromPayload) => ToPayload\n): Wire<FromPayload> {\n return (observable, ...restWireParams) =>\n toWire(\n observable.pipe(\n map(({ eventPayload, ...restWirePayload }) => ({\n eventPayload: mapFn(eventPayload),\n ...restWirePayload\n }))\n ),\n ...restWireParams\n );\n}\n"],"names":["filterRx","debounceRx","throttleRx"],"mappings":";;;AAUA;;;;;;;;;AASG;AACa,SAAA,MAAM,CACpB,IAAmB,EACnB,QAAsD,EAAA;AAEtD,IAAA,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAACA,QAAQ,CAAC,WAAW,IAAI,QAAQ,CAAC,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,~~CAAC~~;~~AACnG~~,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,kBAAkB,CAChC,IAA+D,EAAA;AAE/D,IAAA,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,YAAY,CAAkB,~~CAAC~~;~~AAC7E~~,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,mBAAmB,CAAU,IAAmB,EAAA;AAC9D,IAAA,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,~~CAAC~~;~~AAC3D~~,CAAC;AAED;;;;;;;;;;AAUG;AACa,SAAA,wBAAwB,CACtC,IAAmB,EACnB,SAAoC,EAAA;AAEpC,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,~~CAAC~~;~~IACxC~~,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,~~CAAC~~;~~AAC/E~~,CAAC;AAED;;;;;;;;;;AAUG;AACa,SAAA,wBAAwB,CACtC,IAAmB,EACnB,SAAoC,EAAA;AAEpC,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,~~CAAC~~;~~IACxC~~,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,~~CAAC~~;~~AAChF~~,CAAC;AAED;;;;;;;;;;;AAWG;AACG,SAAU,QAAQ,CACtB,IAAmB,EACnB,QAA+B,EAC/B,UAAoC,EAAE,EAAA;AAEtC,IAAA,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAI;AAC/B,QAAA,OAAO,IAAI,CACT,UAAU,CAAC,IAAI,CAACC,UAAU,CAAC,MAAM,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,EAC3F,KAAK,EACL,EAAE,CACH,~~CAAC~~;~~AACJ~~,KAAC,~~CAAC~~;~~AACJ~~,CAAC;AAED;;;;;;;;;;;AAWG;AACG,SAAU,QAAQ,CACtB,IAAmB,EACnB,QAA+B,EAC/B,UAAoC,EAAE,EAAA;AAEtC,IAAA,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAI;QAC/B,OAAO,IAAI,CACT,UAAU,CAAC,IAAI,CACbC,UAAU,CAAC,MAAM,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE;AACzE,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH,EACD,KAAK,EACL,EAAE,CACH,~~CAAC~~;~~AACJ~~,KAAC,~~CAAC~~;~~AACJ~~,CAAC;AAED;;;;;;;;;;AAUG;AACa,SAAA,OAAO,CACrB,MAAuB,EACvB,KAA0C,EAAA;IAE1C,OAAO,CAAC,UAAU,EAAE,GAAG,cAAc,KACnC,MAAM,CACJ,UAAU,CAAC,IAAI,CACb,GAAG,CAAC,CAAC,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,MAAM;AAC7C,QAAA,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;AACjC,QAAA,GAAG,eAAe;AACnB,KAAA,CAAC,CAAC,CACJ,EACD,GAAG,cAAc,CAClB,~~CAAC~~;~~AACN~~;;;;"}
1	+ {"version":3,"file":"wires.operators.js","sources":["../../../src/wiring/wires.operators.ts"],"sourcesContent":["import type { XModuleName } from '../x-modules/x-modules.types'\nimport type { TimedWireOperatorOptions, TimeSelector, Wire, WireParams } from './wiring.types'\nimport {\n debounce as debounceRx,\n filter as filterRx,\n map,\n throttle as throttleRx,\n} from 'rxjs/operators'\nimport { createTimer, normalizeTime } from './wires-operators.utils'\n\n/*\n Creates a {@link Wire} that is only executed whenever the condition in the filterFn is true.\n \n @param wire - The wire to filter.\n * @param filterFn - A function which must return a boolean and that will be executed every time\n * the wire is called.\n * @returns The Wire function filter.\n \n @public\n /\nexport function filter<Payload>(\n wire: Wire<Payload>,\n filterFn: (parameters: WireParams<Payload>) => boolean,\n): Wire<Payload> {\n return (observable, store, on) =>\n wire(observable.pipe(filterRx(wirePayload => filterFn({ ...wirePayload, store }))), store, on)\n}\n\n/\n Creates a {@link Wire} that is only executed when the payload is truthy. A truthy value is\n * whatever is not a {@link https://developer.mozilla.org/en-US/docs/Glossary/Falsy \| falsy value}.\n \n @param wire - The wire to avoid executing when the payload is falsy.\n * @returns The Wire function falsy filter.\n \n @public\n /\nexport function filterFalsyPayload<Payload>(\n wire: Wire<Exclude<Payload, null \| undefined \| false \| 0 \| ''>>,\n): Wire<Payload> {\n return filter(wire, ({ eventPayload }) => !!eventPayload) as Wire<Payload>\n}\n\n/\n Creates a {@link Wire} that is only executed when the payload is a\n * {@link https://developer.mozilla.org/en-US/docs/Glossary/Falsy \| falsy value}.\n \n @param wire - The wire to avoid executing when the payload is truthy.\n * @returns The Wire function truthy filter.\n \n @public\n /\nexport function filterTruthyPayload<Payload>(wire: Wire<Payload>): Wire<Payload> {\n return filter(wire, ({ eventPayload }) => !eventPayload)\n}\n\n/\n Creates a {@link Wire} that is only executed if the event is emitted from a {@link XModule}\n * that is included\n * in the `whitelist` array passed as parameter.\n \n @param wire - The wire to filter using the whitelist.\n * @param whitelist - An array of {@link XModuleName} or null.\n * @returns The Wire function with whitelisted modules filter.\n \n @public\n /\nexport function filterWhitelistedModules<Payload>(\n wire: Wire<Payload>,\n whitelist: Array<XModuleName \| null>,\n): Wire<Payload> {\n const whitelistSet = new Set(whitelist)\n return filter(wire, ({ metadata }) => whitelistSet.has(metadata.moduleName))\n}\n\n/\n Creates a {@link Wire} that is only executed if the event is emitted from a {@link XModule}\n * that is NOT included\n * in the `blacklist` array passed as parameter.\n \n @param wire - The wire to filter using the whitelist.\n * @param blacklist - An array of {@link XModuleName} or null.\n * @returns The Wire function with blacklisted modules filter.\n \n @public\n /\nexport function filterBlacklistedModules<Payload>(\n wire: Wire<Payload>,\n blacklist: Array<XModuleName \| null>,\n): Wire<Payload> {\n const blacklistSet = new Set(blacklist)\n return filter(wire, ({ metadata }) => !blacklistSet.has(metadata.moduleName))\n}\n\n/\n Creates a debounced {@link Wire}. Being debounced means that it will only be executed after\n * the time given by `timeInMs` has passed without invoking it.\n \n @param wire - The wire to debounce.\n * @param timeInMs - The time in milliseconds to debounce the wire execution or a function to\n * retrieve it from the store.\n * @param options - Options to configure this wire with, like an event to force it or cancel it.\n * @returns The Wire function with a debounced timing.\n \n @public\n /\nexport function debounce<Payload>(\n wire: Wire<Payload>,\n timeInMs: TimeSelector \| number,\n options: TimedWireOperatorOptions = {},\n): Wire<Payload> {\n return (observable, store, on) => {\n return wire(\n observable.pipe(debounceRx(() => createTimer(normalizeTime(timeInMs, store), options, on))),\n store,\n on,\n )\n }\n}\n\n/\n Creates a throttled {@link Wire}. Being throttled means that it will only be executed once\n * every couple of milliseconds given by the `timeInMs` parameter.\n \n @param wire - The wire to throttle.\n * @param timeInMs - The time in milliseconds to throttle the wire execution or a function to\n * retrieve it from the store.\n * @param options - Options to configure this wire with, like an event to force it or cancel it.\n * @returns The Wire function with a throttle timing.\n \n @public\n /\nexport function throttle<Payload>(\n wire: Wire<Payload>,\n timeInMs: TimeSelector \| number,\n options: TimedWireOperatorOptions = {},\n): Wire<Payload> {\n return (observable, store, on) => {\n return wire(\n observable.pipe(\n throttleRx(() => createTimer(normalizeTime(timeInMs, store), options, on), {\n leading: true,\n trailing: true,\n }),\n ),\n store,\n on,\n )\n }\n}\n\n/\n Creates a {@link Wire} from other `toWire` wire. It uses `mapFn` to transform the\n * `FromPayload` received to `ToPayload` which `toWire` requires. This is\n * useful to reuse wires in different Events where the payload doesn't fit exactly.\n \n @param toWire - The wire which the new Wire is created from.\n * @param mapFn - Function to map the payload from `FromPayload` to `ToPayload`.\n * @returns A new {@link Wire}.\n \n @public\n */\nexport function mapWire<FromPayload, ToPayload>(\n toWire: Wire<ToPayload>,\n mapFn: (payload: FromPayload) => ToPayload,\n): Wire<FromPayload> {\n return (observable, ...restWireParams) =>\n toWire(\n observable.pipe(\n map(({ eventPayload, ...restWirePayload }) => ({\n eventPayload: mapFn(eventPayload),\n ...restWirePayload,\n })),\n ),\n ...restWireParams,\n )\n}\n"],"names":["filterRx","debounceRx","throttleRx"],"mappings":"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"}

package/js/wiring/wiring.utils.js CHANGED Viewed

@@ -27,7 +27,7 @@ function createWiring(wiring) {
 function getStateAndGettersFromModule(state, getters, moduleName) {
     return {
         state: state.x[moduleName],
-        getters: getGettersProxy(getters, moduleName)
+        getters: getGettersProxy(getters, moduleName),
     };
 }

package/js/wiring/wiring.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wiring.utils.js","sources":["../../../src/wiring/wiring.utils.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { RootXStoreState, StoreModuleStateAndGetters } from '../store/store.types';\nimport { ~~getGettersProxy } from '../store/utils/getters-proxy.utils';\nimport~~ { ExtractState, XModuleName } from '../x-modules/x-modules.types';\nimport { Wiring } from './wiring.types';\n\n/*\n Util function to generate type-safe wiring.\n * If TypeScript ever accepts the PR about generic type inference this function can be removed.\n \n @param wiring - The wiring to create.\n * @returns Type-safe wiring.\n \n @public\n /\nexport function createWiring<T extends Partial<Wiring>>(wiring: T): T {\n return wiring;\n}\n\n/\n Returns an object with the getters and state of a module of store defined by the moduleName\n * parameter.\n \n @param state - The Vuex store State.\n * @param getters - The Vuex store Getters.\n * @param moduleName - The {@link XModuleName} of the module.\n * @returns The {@link StoreModuleStateAndGetters} with the Getters and the State of the\n * {@link XStoreModule \| Store Module} defined by moduleName.\n \n @public\n */\nexport function getStateAndGettersFromModule<ModuleName extends XModuleName>(\n state: RootXStoreState,\n getters: Dictionary,\n moduleName: ModuleName\n): StoreModuleStateAndGetters<ModuleName> {\n return {\n state: state.x[moduleName] as unknown as ExtractState<ModuleName>,\n getters: getGettersProxy(getters, moduleName)\n };\n}\n"],"names":[],"mappings":";;AAMA;;;;;;;;AAQG;AACG,SAAU,YAAY,CAA4B,MAAS,EAAA;AAC/D,IAAA,OAAO,MAAM,~~CAAC~~;~~AAChB~~,CAAC;AAED;;;;;;;;;;;AAWG;SACa,4BAA4B,CAC1C,KAAsB,EACtB,OAAmB,EACnB,UAAsB,EAAA;IAEtB,OAAO;AACL,QAAA,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAwC;AACjE,QAAA,OAAO,EAAE,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;KAC9C,~~CAAC~~;~~AACJ~~;;;;"}
1	+ {"version":3,"file":"wiring.utils.js","sources":["../../../src/wiring/wiring.utils.ts"],"sourcesContent":["import type { Dictionary } from '@empathyco/x-utils'\nimport type { RootXStoreState, StoreModuleStateAndGetters } from '../store/store.types'\nimport type { ExtractState, XModuleName } from '../x-modules/x-modules.types'\nimport type { Wiring } from './wiring.types'\nimport { getGettersProxy } from '../store/utils/getters-proxy.utils'\n\n/*\n Util function to generate type-safe wiring.\n * If TypeScript ever accepts the PR about generic type inference this function can be removed.\n \n @param wiring - The wiring to create.\n * @returns Type-safe wiring.\n \n @public\n /\nexport function createWiring<T extends Partial<Wiring>>(wiring: T): T {\n return wiring\n}\n\n/\n Returns an object with the getters and state of a module of store defined by the moduleName\n * parameter.\n \n @param state - The Vuex store State.\n * @param getters - The Vuex store Getters.\n * @param moduleName - The {@link XModuleName} of the module.\n * @returns The {@link StoreModuleStateAndGetters} with the Getters and the State of the\n * {@link XStoreModule \| Store Module} defined by moduleName.\n \n @public\n */\nexport function getStateAndGettersFromModule<ModuleName extends XModuleName>(\n state: RootXStoreState,\n getters: Dictionary,\n moduleName: ModuleName,\n): StoreModuleStateAndGetters<ModuleName> {\n return {\n state: state.x[moduleName] as unknown as ExtractState<ModuleName>,\n getters: getGettersProxy(getters, moduleName),\n }\n}\n"],"names":[],"mappings":";;AAMA;;;;;;;;AAQG;AACG,SAAU,YAAY,CAA4B,MAAS,EAAA;AAC/D,IAAA,OAAO,MAAM,CAAA;AACf,CAAC;AAED;;;;;;;;;;;AAWG;SACa,4BAA4B,CAC1C,KAAsB,EACtB,OAAmB,EACnB,UAAsB,EAAA;IAEtB,OAAO;AACL,QAAA,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAwC;AACjE,QAAA,OAAO,EAAE,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;KAC9C,CAAA;AACH;;;;"}

package/js/x-installer/api/base-api.js CHANGED Viewed

@@ -18,12 +18,12 @@ class BaseXAPI {
      * @param productId - The product id that was added to cart.
      */
     addProductToCart(productId) {
-        this.bus?.emit('UserClickedPDPAddToCart', productId);
+        void this.bus?.emit('UserClickedPDPAddToCart', productId);
     }
     /**
-     * Setter for the {@link @empathyco/x-bus#XBus}.
+     * Setter for the XBus.
      *
-     * @param bus - The {@link @empathyco/x-bus#XBus} received to emit events.
+     * @param bus - The XBus received to emit events.
      *
      * @internal
      */
@@ -77,9 +77,9 @@ class BaseXAPI {
      */
     search(query) {
         if (query) {
-            this.bus?.emit('UserAcceptedAQuery', query);
+            void this.bus?.emit('UserAcceptedAQuery', query);
         }
-        this.bus?.emit('UserClickedOpenX');
+        void this.bus?.emit('UserClickedOpenX', undefined);
     }
     /**
      * Initializes the Application passing the {@link SnippetConfig}.
@@ -96,7 +96,6 @@ class BaseXAPI {
             await this?.initCallback(config);
         }
         else {
-            //eslint-disable-next-line no-console
             console.warn('We know X is awesome, but you only need to initialize it once.');
         }
     }
@@ -106,7 +105,7 @@ class BaseXAPI {
      * @public
      */
     close() {
-        this.bus?.emit('UserClickedCloseX');
+        void this.bus?.emit('UserClickedCloseX', undefined);
     }
 }

package/js/x-installer/api/base-api.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-api.js","sources":["../../../../src/x-installer/api/base-api.ts"],"sourcesContent":["import { XBus } from '@empathyco/x-bus';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api.types';\n\n/*\n Default implementation for {@link XAPI}.\n \n @public\n /\nexport class BaseXAPI implements XAPI {\n /\n Flag to check if the initialization was already done.\n \n @internal\n /\n protected isXInitialized = false;\n\n /\n Bus for emitting and listening events.\n \n @internal\n /\n protected bus!: XBus<XEventsTypes, WireMetadata~~>;\~~n\n /\n The callback to call from the init method. The logic of initialization is out of this API\n * since this API is just a facade.\n \n @internal\n /\n protected initCallback!: (config: SnippetConfig) => any;\n\n /\n Getter for the snippet config object.\n \n @returns The {@link NormalisedSnippetConfig \| snippetConfig} object.\n \n @public\n /\n public getSnippetConfig!: () => SnippetConfig;\n\n /\n Callback that allows to update the snippet config. The logic of initialization is out of this\n * API since this API is just a facade.\n \n @internal\n /\n protected snippetCallback!: (config: Partial<SnippetConfig>) => void;\n\n /\n Tracks that a product was added to cart from PDP.\n \n @param productId - The product id that was added to cart.\n /\n addProductToCart(productId?: string): void {\n this.bus?.emit('UserClickedPDPAddToCart', productId);\n }\n\n /\n Setter for the ~~{@link @empathyco/x-bus#~~XBus}.\n \n @param bus - The ~~{@link @empathyco/x-bus#~~XBus} received to emit events.\n \n @internal\n /\n setBus(bus: XBus<XEventsTypes, WireMetadata>): void {\n this.bus = bus;\n }\n\n /\n Setter for the callback to call in the init method.\n \n @param initCallback - The callback to call.\n /\n setInitCallback(initCallback: (config: SnippetConfig) => any): void {\n this.initCallback = initCallback;\n }\n\n /\n Setter for the callback to modify the snippet config.\n \n @param snippetCallback - The callback to call.\n \n @internal\n /\n setSnippetConfigCallback(snippetCallback: (config: Partial<SnippetConfig>) => void): void {\n this.snippetCallback = snippetCallback;\n }\n\n /\n Sets or updates the snippet config getter.\n \n @param snippetConfigGetter - A function that returns the snippet config.\n \n @internal\n /\n setSnippetConfigGetter(snippetConfigGetter: () => NormalisedSnippetConfig): void {\n this.getSnippetConfig = snippetConfigGetter;\n }\n\n /\n Sets or updates the snippet config.\n \n @param config - A part or all the snippet config.\n \n @public\n /\n setSnippetConfig(config: Partial<SnippetConfig>): void {\n this?.snippetCallback(config);\n }\n\n /\n Searches the query parameter as user query.\n \n @param query - Query to be searched.\n \n @public\n /\n search(query?: string): void {\n if (query) {\n this.bus?.emit('UserAcceptedAQuery', query);\n }\n this.bus?.emit('UserClickedOpenX');\n }\n\n /\n Initializes the Application passing the {@link SnippetConfig}.\n \n @param config - The config coming from the customer snippet.\n \n @returns A promise that will be resolved once x components are initialized.\n \n @public\n /\n async init(config: SnippetConfig): Promise<void> {\n if (!this.isXInitialized) {\n this.isXInitialized = true;\n await this?.initCallback(config);\n } else {\n ~~//eslint-disable-next-line no-~~console~~\n console~~.warn('We know X is awesome, but you only need to initialize it once.');\n }\n }\n\n /\n Closes the Application.\n \n @public\n */\n close(): void {\n this.bus?.emit('UserClickedCloseX');\n }\n}\n"],"names":[],"mappings":"AAIA;;;;AAIG;MACU,QAAQ,CAAA;AAArB,IAAA,WAAA,GAAA;AACE;;;;AAIG;QACO,IAAc,CAAA,cAAA,GAAG,KAAK,~~CAAC~~;~~KAyIlC~~;~~AAvGC~~;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,SAAkB,EAAA;QACjC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,~~CAAC~~;~~KACtD~~;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,GAAqC,EAAA;AAC1C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,~~CAAC~~;~~KAChB~~;AAED;;;;AAIG;AACH,IAAA,eAAe,CAAC,YAA4C,EAAA;AAC1D,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY,~~CAAC~~;~~KAClC~~;AAED;;;;;;AAMG;AACH,IAAA,wBAAwB,CAAC,eAAyD,EAAA;AAChF,QAAA,IAAI,CAAC,eAAe,GAAG,eAAe,~~CAAC~~;~~KACxC~~;AAED;;;;;;AAMG;AACH,IAAA,sBAAsB,CAAC,mBAAkD,EAAA;AACvE,QAAA,IAAI,CAAC,gBAAgB,GAAG,mBAAmB,~~CAAC~~;~~KAC7C~~;AAED;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,MAA8B,EAAA;AAC7C,QAAA,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,~~CAAC~~;~~KAC/B~~;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,KAAc,EAAA;AACnB,QAAA,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,~~CAAC~~;~~AAC7C~~,SAAA;~~AACD~~,~~QAAA~~,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,CAAC,~~CAAC~~;~~KACpC~~;AAED;;;;;;;;AAQG;IACH,MAAM,IAAI,CAAC,MAAqB,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,~~CAAC~~;~~AAC3B~~,YAAA,MAAM,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,~~CAAC~~;~~AAClC~~,SAAA;AAAM,aAAA~~;;AAEL~~,YAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,~~CAAC~~;~~AAChF~~,SAAA;KACF;AAED;;;;AAIG;IACH,KAAK,GAAA;~~AACH~~,~~QAAA~~,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,mBAAmB,CAAC,~~CAAC~~;~~KACrC~~;AACF;;;;"}
1	+ {"version":3,"file":"base-api.js","sources":["../../../../src/x-installer/api/base-api.ts"],"sourcesContent":["import type { XBus } from '@empathyco/x-bus'\nimport type { WireMetadata, XEventsTypes } from '../../wiring/index'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api.types'\n\n/*\n Default implementation for {@link XAPI}.\n \n @public\n /\nexport class BaseXAPI implements XAPI {\n /\n Flag to check if the initialization was already done.\n \n @internal\n /\n protected isXInitialized = false\n\n /\n Bus for emitting and listening events.\n \n @internal\n /\n protected bus!: XBus<XEventsTypes, WireMetadata>\n\n /\n The callback to call from the init method. The logic of initialization is out of this API\n * since this API is just a facade.\n \n @internal\n /\n protected initCallback!: (config: SnippetConfig) => any\n\n /\n Getter for the snippet config object.\n \n @returns The {@link NormalisedSnippetConfig \| snippetConfig} object.\n \n @public\n /\n public getSnippetConfig!: () => SnippetConfig\n\n /\n Callback that allows to update the snippet config. The logic of initialization is out of this\n * API since this API is just a facade.\n \n @internal\n /\n protected snippetCallback!: (config: Partial<SnippetConfig>) => void\n\n /\n Tracks that a product was added to cart from PDP.\n \n @param productId - The product id that was added to cart.\n /\n addProductToCart(productId?: string): void {\n void this.bus?.emit('UserClickedPDPAddToCart', productId)\n }\n\n /\n Setter for the XBus.\n \n @param bus - The XBus received to emit events.\n \n @internal\n /\n setBus(bus: XBus<XEventsTypes, WireMetadata>): void {\n this.bus = bus\n }\n\n /\n Setter for the callback to call in the init method.\n \n @param initCallback - The callback to call.\n /\n setInitCallback(initCallback: (config: SnippetConfig) => any): void {\n this.initCallback = initCallback\n }\n\n /\n Setter for the callback to modify the snippet config.\n \n @param snippetCallback - The callback to call.\n \n @internal\n /\n setSnippetConfigCallback(snippetCallback: (config: Partial<SnippetConfig>) => void): void {\n this.snippetCallback = snippetCallback\n }\n\n /\n Sets or updates the snippet config getter.\n \n @param snippetConfigGetter - A function that returns the snippet config.\n \n @internal\n /\n setSnippetConfigGetter(snippetConfigGetter: () => NormalisedSnippetConfig): void {\n this.getSnippetConfig = snippetConfigGetter\n }\n\n /\n Sets or updates the snippet config.\n \n @param config - A part or all the snippet config.\n \n @public\n /\n setSnippetConfig(config: Partial<SnippetConfig>): void {\n this?.snippetCallback(config)\n }\n\n /\n Searches the query parameter as user query.\n \n @param query - Query to be searched.\n \n @public\n /\n search(query?: string): void {\n if (query) {\n void this.bus?.emit('UserAcceptedAQuery', query)\n }\n void this.bus?.emit('UserClickedOpenX', undefined)\n }\n\n /\n Initializes the Application passing the {@link SnippetConfig}.\n \n @param config - The config coming from the customer snippet.\n \n @returns A promise that will be resolved once x components are initialized.\n \n @public\n /\n async init(config: SnippetConfig): Promise<void> {\n if (!this.isXInitialized) {\n this.isXInitialized = true\n await this?.initCallback(config)\n } else {\n console.warn('We know X is awesome, but you only need to initialize it once.')\n }\n }\n\n /\n Closes the Application.\n \n @public\n */\n close(): void {\n void this.bus?.emit('UserClickedCloseX', undefined)\n }\n}\n"],"names":[],"mappings":"AAIA;;;;AAIG;MACU,QAAQ,CAAA;AAArB,IAAA,WAAA,GAAA;AACE;;;;AAIG;QACO,IAAc,CAAA,cAAA,GAAG,KAAK,CAAA;KAwIjC;AAtGC;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,SAAkB,EAAA;QACjC,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAA;KAC1D;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,GAAqC,EAAA;AAC1C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;KACf;AAED;;;;AAIG;AACH,IAAA,eAAe,CAAC,YAA4C,EAAA;AAC1D,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;KACjC;AAED;;;;;;AAMG;AACH,IAAA,wBAAwB,CAAC,eAAyD,EAAA;AAChF,QAAA,IAAI,CAAC,eAAe,GAAG,eAAe,CAAA;KACvC;AAED;;;;;;AAMG;AACH,IAAA,sBAAsB,CAAC,mBAAkD,EAAA;AACvE,QAAA,IAAI,CAAC,gBAAgB,GAAG,mBAAmB,CAAA;KAC5C;AAED;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,MAA8B,EAAA;AAC7C,QAAA,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;KAC9B;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,KAAc,EAAA;AACnB,QAAA,IAAI,KAAK,EAAE;YACT,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAA;AACjD,SAAA;QACD,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAA;KACnD;AAED;;;;;;;;AAQG;IACH,MAAM,IAAI,CAAC,MAAqB,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;AAC1B,YAAA,MAAM,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;AACjC,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAA;AAC/E,SAAA;KACF;AAED;;;;AAIG;IACH,KAAK,GAAA;QACH,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAA;KACpD;AACF;;;;"}

package/js/x-installer/x-installer/x-installer.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { isFunction, forEach } from '@empathyco/x-utils';
 import { reactive, createApp } from 'vue';
+import { bus } from '../../plugins/x-bus.js';
 import { XPlugin } from '../../plugins/x-plugin.js';
 import { BaseXAPI } from '../api/base-api.js';
-import { bus } from '../../plugins/x-bus.js';
 /**
  * The purpose of this class is to offer a quick way to initialize the XComponents in a setup
@@ -103,6 +103,7 @@ class XInstaller {
         const { api } = this.options;
         if (api !== false) {
             this.api = api ?? new BaseXAPI();
+            // eslint-disable-next-line ts/no-misused-promises
             this.api.setInitCallback(this.init.bind(this));
             this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));
             this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));
@@ -138,7 +139,7 @@ class XInstaller {
                 api: this.api,
                 app: this.app,
                 bus,
-                plugin
+                plugin,
             };
         }
         return Promise.resolve();
@@ -157,7 +158,7 @@ class XInstaller {
             store,
             xModules,
             initialXModules,
-            __PRIVATE__xModules
+            __PRIVATE__xModules,
         };
     }
     /**
@@ -179,7 +180,7 @@ class XInstaller {
      *
      * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method
      * of the plugin.
-     * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.
+     * @param bus - The XBus to be used to create the XPlugin.
      *
      * @returns Plugin<XPluginOption> - The plugin instance.
      * @internal
@@ -197,7 +198,7 @@ class XInstaller {
      * @returns An empty promise.
      * @internal
      */
-    installExtraPlugins(bus) {
+    async installExtraPlugins(bus) {
         return Promise.resolve(this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig, bus }));
     }
     /**
@@ -234,10 +235,10 @@ class XInstaller {
      * returns an Element or element selector to use.
      * If it is not present, a new <div> Element is created and appended to the body.
      *
-     * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used
-     * to mount the Vue Application.
+     * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function
+     * used to mount the Vue Application.
      *
-     * @returns The Element to use as mounting target for the Vue Application.
+     * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.
      * @internal
      */
     getMountingTarget(domElement) {
@@ -247,7 +248,7 @@ class XInstaller {
         if (typeof domElement === 'string') {
             const target = document.querySelector(domElement);
             if (!target) {
-                throw Error(`XComponents app couldn't be mounted: Element "${domElement}" couldn't be found`);
+                throw new Error(`XComponents app couldn't be mounted: Element "${domElement}" couldn't be found`);
             }
             return target;
         }

package/js/x-installer/x-installer/x-installer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach, isFunction } from '@empathyco/x-utils';\nimport { App, createApp, reactive, Plugin } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { bus } from '../../plugins/x-bus';\nimport { InitWrapper, InstallXOptions } from './types';\n\ndeclare global {\n interface Window {\n InterfaceX?: XAPI;\n initX?: (() => SnippetConfig) \| SnippetConfig;\n }\n}\n\n/*\n The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n \n This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n \n The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n \n @example The way to use this class is the next:\n * 1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n \n ```\n * const installer = new XInstaller(installXOptions)\n * ```\n \n 2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n * There are 3 different ways to do this:\n \n 2.1 Using the created installer:\n \n ```\n * installer.init(snippetConfig)\n * ```\n \n 2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n * is not present as the default value is `true`) then this init step can be done with\n * the Public API:\n \n ```\n * window.InterfaceX.init(snippetConfig)\n * ```\n \n 2.3 When the script of the project build is loaded it searches for a global `initX`\n * variable that the customer must have in their website. This variable can be a\n * function that returns the {@link SnippetConfig} or an object that contains the\n * {@link SnippetConfig} itself:\n \n ```\n * window.initX = function() {\n * return {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * };\n * ```\n \n ```\n * window.initX = {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * ```\n \n @public\n /\nexport class XInstaller {\n private app!: App;\n private api?: XAPI;\n\n /\n The configuration coming from the snippet {@link SnippetConfig}.\n \n @internal\n /\n protected snippetConfig?: NormalisedSnippetConfig;\n\n /\n Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n * creates the public {@link XAPI}.\n \n @remarks Auto initializes the Vue application if window.initX is defined as a function or\n * object specifying the {@link SnippetConfig \| snippet config}.\n \n \n * @param options - The {@link InstallXOptions}.\n \n @public\n /\n public constructor(protected readonly options: InstallXOptions) {\n this.createAPI();\n }\n\n /\n Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n * creation the value `false` must be passed in the `api` option.\n \n @internal\n /\n protected createAPI(): void {\n const { api } = this.options;\n if (api !== false) {\n this.api = api ?? new BaseXAPI();\n this.api.setInitCallback(this.init.bind(this));\n this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));\n window.InterfaceX = this.api;\n }\n }\n\n /\n Retrieves the {@link SnippetConfig \| snippet config} it is defined in the window.initX.\n \n @returns The snippet config if it is defined or undefined otherwise.\n \n @internal\n /\n private retrieveSnippetConfig(): SnippetConfig \| undefined {\n if (typeof window.initX === 'function') {\n return window.initX();\n } else if (typeof window.initX === 'object') {\n return window.initX;\n }\n }\n\n /\n Receives the {@link SnippetConfig \| snippet config} or retrieves it from window.initX and\n * installs the plugin and initializes the Vue application.\n \n @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n \n @returns If {@link SnippetConfig \| snippet config} is passed or configured in window.initX,\n * returns an object with the {@link XAPI}, the {@link @empathyco/x-bus#XBus}, the {@link XPlugin}\n * and the Vue application instance. Else, a rejected promise is returned.\n \n @public\n /\n init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n init(): Promise<InitWrapper \| void>;\n async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper \| void> {\n if (snippetConfig) {\n this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));\n this.createApp();\n const bus = this.createBus();\n const pluginOptions = this.getPluginOptions();\n const plugin = this.installPlugin(pluginOptions, bus);\n await this.installExtraPlugins(bus);\n this.api?.setBus(bus);\n this.app.mount(this.getMountingTarget(this.options.domElement));\n\n return {\n api: this.api,\n app: this.app,\n bus,\n plugin\n };\n }\n\n return Promise.resolve();\n }\n\n /\n Creates the {@link XPluginOptions} object.\n \n @returns The {@link XPluginOptions} object.\n \n @internal\n /\n protected getPluginOptions(): XPluginOptions {\n const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n return {\n adapter,\n store,\n xModules,\n initialXModules,\n __PRIVATE__xModules\n };\n }\n\n /\n This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n * creates a new instance of {@link @empathyco/x-bus#XPriorityBus \| bus}.\n \n @returns XBus - The bus instance.\n \n @internal\n /\n protected createBus(): XBus<XEventsTypes, WireMetadata> {\n return this.options.bus ?? bus;\n }\n\n /\n Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n * created and installed.\n \n @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n * of the plugin.\n * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.\n \n @returns Plugin<XPluginOption> - The plugin instance.\n * @internal\n /\n protected installPlugin(\n pluginOptions: XPluginOptions,\n bus: XBus<XEventsTypes, WireMetadata>\n ): Plugin<XPluginOptions> {\n const plugin = this.options.plugin ?? new XPlugin(bus);\n this.app.use(plugin, pluginOptions);\n return plugin;\n }\n\n /\n Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n * to allow the user to install more plugins to the App.\n \n @param bus - The events bus used in the application.\n * @returns An empty promise.\n * @internal\n /\n protected installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n return Promise.resolve(\n this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus })\n );\n }\n\n /\n In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n * then a new Vue application is created using that component as root.\n \n @internal\n /\n protected createApp(): void {\n if (this.options.rootComponent !== undefined) {\n this.app = createApp(this.options.rootComponent);\n this.app.provide('snippetConfig', this.snippetConfig);\n this.options.onCreateApp?.(this.app);\n }\n }\n\n protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n /\n Transforms the snippet configuration.\n * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n \n @param snippetConfig - The snippet config to normalise.\n * @returns The normalised version of the given snippet config.\n * @internal\n /\n protected normaliseSnippetConfig(\n snippetConfig: SnippetConfig \| Partial<SnippetConfig>\n ): NormalisedSnippetConfig \| Partial<SnippetConfig> {\n if (snippetConfig.lang) {\n snippetConfig.uiLang ??= snippetConfig.lang;\n }\n return snippetConfig;\n }\n\n /\n It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n * returns an Element or element selector to use.\n * If it is not present, a new <div> Element is created and appended to the body.\n \n @param domElement - {@link InstallXOptions.domElement \| Element, string or function} Used\n * to mount the Vue Application.\n \n @returns The Element to use as mounting target for the Vue Application.\n * @internal\n /\n protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element {\n if (isFunction(domElement)) {\n domElement = domElement(this.snippetConfig!);\n }\n if (typeof domElement === 'string') {\n const target = document.querySelector(domElement);\n if (!target) {\n throw Error(\n `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n );\n }\n return target;\n }\n return domElement ?? document.body.appendChild(document.createElement('div'));\n }\n\n /\n It updates all the provided properties from the current snippet config.\n \n @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n \n @internal\n /\n protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n if (!this.snippetConfig) {\n return;\n }\n forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n this.snippetConfig![name] = value;\n });\n }\n\n /\n Getter for the snippet config object.\n \n @returns The {@link NormalisedSnippetConfig \| snippetConfig} object.\n \n @public\n */\n protected getSnippetConfig(): NormalisedSnippetConfig {\n return this.snippetConfig!;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import type { XBus } from '@empathyco/x-bus'\nimport type { App, Plugin } from 'vue'\nimport type { XPluginOptions } from '../../plugins/x-plugin.types'\nimport type { WireMetadata, XEventsTypes } from '../../wiring/index'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types'\nimport type { InitWrapper, InstallXOptions } from './types'\nimport { forEach, isFunction } from '@empathyco/x-utils'\nimport { createApp, reactive } from 'vue'\nimport { bus } from '../../plugins/x-bus'\nimport { XPlugin } from '../../plugins/x-plugin'\nimport { BaseXAPI } from '../api/base-api'\n\ndeclare global {\n interface Window {\n InterfaceX?: XAPI\n initX?: (() => SnippetConfig) \| SnippetConfig\n }\n}\n\n/*\n The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n \n This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n \n The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n \n @example The way to use this class is the next:\n * 1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n \n ```\n * const installer = new XInstaller(installXOptions)\n * ```\n \n 2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n * There are 3 different ways to do this:\n \n 2.1 Using the created installer:\n \n ```\n * installer.init(snippetConfig)\n * ```\n \n 2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n * is not present as the default value is `true`) then this init step can be done with\n * the Public API:\n \n ```\n * window.InterfaceX.init(snippetConfig)\n * ```\n \n 2.3 When the script of the project build is loaded it searches for a global `initX`\n * variable that the customer must have in their website. This variable can be a\n * function that returns the {@link SnippetConfig} or an object that contains the\n * {@link SnippetConfig} itself:\n \n ```\n * window.initX = function() {\n * return {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * };\n * ```\n \n ```\n * window.initX = {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * ```\n \n @public\n /\nexport class XInstaller {\n private app!: App\n private api?: XAPI\n\n /\n The configuration coming from the snippet {@link SnippetConfig}.\n \n @internal\n /\n protected snippetConfig?: NormalisedSnippetConfig\n\n /\n Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n * creates the public {@link XAPI}.\n \n @remarks Auto initializes the Vue application if window.initX is defined as a function or\n * object specifying the {@link SnippetConfig \| snippet config}.\n \n \n * @param options - The {@link InstallXOptions}.\n \n @public\n /\n public constructor(protected readonly options: InstallXOptions) {\n this.createAPI()\n }\n\n /\n Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n * creation the value `false` must be passed in the `api` option.\n \n @internal\n /\n protected createAPI(): void {\n const { api } = this.options\n if (api !== false) {\n this.api = api ?? new BaseXAPI()\n // eslint-disable-next-line ts/no-misused-promises\n this.api.setInitCallback(this.init.bind(this))\n this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this))\n this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this))\n window.InterfaceX = this.api\n }\n }\n\n /\n Retrieves the {@link SnippetConfig \| snippet config} it is defined in the window.initX.\n \n @returns The snippet config if it is defined or undefined otherwise.\n \n @internal\n /\n private retrieveSnippetConfig(): SnippetConfig \| undefined {\n if (typeof window.initX === 'function') {\n return window.initX()\n } else if (typeof window.initX === 'object') {\n return window.initX\n }\n }\n\n /\n Receives the {@link SnippetConfig \| snippet config} or retrieves it from window.initX and\n * installs the plugin and initializes the Vue application.\n \n @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n \n @returns If {@link SnippetConfig \| snippet config} is passed or configured in window.initX,\n * returns an object with the {@link XAPI}, the XBus, the {@link XPlugin}\n * and the Vue application instance. Else, a rejected promise is returned.\n \n @public\n /\n init(snippetConfig: SnippetConfig): Promise<InitWrapper>\n init(): Promise<InitWrapper \| void>\n async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper \| void> {\n if (snippetConfig) {\n this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig))\n this.createApp()\n const bus = this.createBus()\n const pluginOptions = this.getPluginOptions()\n const plugin = this.installPlugin(pluginOptions, bus)\n await this.installExtraPlugins(bus)\n this.api?.setBus(bus)\n this.app.mount(this.getMountingTarget(this.options.domElement))\n\n return {\n api: this.api,\n app: this.app,\n bus,\n plugin,\n }\n }\n\n return Promise.resolve()\n }\n\n /\n Creates the {@link XPluginOptions} object.\n \n @returns The {@link XPluginOptions} object.\n \n @internal\n /\n protected getPluginOptions(): XPluginOptions {\n const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options\n return {\n adapter,\n store,\n xModules,\n initialXModules,\n __PRIVATE__xModules,\n }\n }\n\n /\n This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n * creates a new instance of {@link @empathyco/x-bus#XPriorityBus \| bus}.\n \n @returns XBus - The bus instance.\n \n @internal\n /\n protected createBus(): XBus<XEventsTypes, WireMetadata> {\n return this.options.bus ?? bus\n }\n\n /\n Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n * created and installed.\n \n @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n * of the plugin.\n * @param bus - The XBus to be used to create the XPlugin.\n \n @returns Plugin<XPluginOption> - The plugin instance.\n * @internal\n /\n protected installPlugin(\n pluginOptions: XPluginOptions,\n bus: XBus<XEventsTypes, WireMetadata>,\n ): Plugin<XPluginOptions> {\n const plugin = this.options.plugin ?? new XPlugin(bus)\n this.app.use(plugin, pluginOptions)\n return plugin\n }\n\n /\n Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n * to allow the user to install more plugins to the App.\n \n @param bus - The events bus used in the application.\n * @returns An empty promise.\n * @internal\n /\n protected async installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n return Promise.resolve(\n this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus }),\n )\n }\n\n /\n In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n * then a new Vue application is created using that component as root.\n \n @internal\n /\n protected createApp(): void {\n if (this.options.rootComponent !== undefined) {\n this.app = createApp(this.options.rootComponent)\n this.app.provide('snippetConfig', this.snippetConfig)\n this.options.onCreateApp?.(this.app)\n }\n }\n\n protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig\n protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>\n /\n Transforms the snippet configuration.\n * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n \n @param snippetConfig - The snippet config to normalise.\n * @returns The normalised version of the given snippet config.\n * @internal\n /\n protected normaliseSnippetConfig(\n snippetConfig: SnippetConfig \| Partial<SnippetConfig>,\n ): NormalisedSnippetConfig \| Partial<SnippetConfig> {\n if (snippetConfig.lang) {\n snippetConfig.uiLang ??= snippetConfig.lang\n }\n return snippetConfig\n }\n\n /\n It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n * returns an Element or element selector to use.\n * If it is not present, a new <div> Element is created and appended to the body.\n \n @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function\n * used to mount the Vue Application.\n \n @returns The Element or ShadowRoot to use as mounting target for the Vue Application.\n * @internal\n /\n protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element \| ShadowRoot {\n if (isFunction(domElement)) {\n domElement = domElement(this.snippetConfig!)\n }\n if (typeof domElement === 'string') {\n const target = document.querySelector(domElement)\n if (!target) {\n throw new Error(\n `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`,\n )\n }\n return target\n }\n return domElement ?? document.body.appendChild(document.createElement('div'))\n }\n\n /\n It updates all the provided properties from the current snippet config.\n \n @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n \n @internal\n /\n protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n if (!this.snippetConfig) {\n return\n }\n forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n this.snippetConfig![name] = value\n })\n }\n\n /\n Getter for the snippet config object.\n \n @returns The {@link NormalisedSnippetConfig \| snippetConfig} object.\n \n @public\n */\n protected getSnippetConfig(): NormalisedSnippetConfig {\n return this.snippetConfig!\n }\n}\n"],"names":[],"mappings":"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"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;;;"}
1	+ {"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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport 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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport 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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport 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,EAC6C,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,GAAA,EAAA,CAAA;AAAA,IAAA,MAAA,EAAA,QAAA;AAD/C,IAAA,QAAA,EAAA,IAAA,CAAA,yBAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,8 +1,8 @@
 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
@@ -24,7 +24,7 @@ var _sfc_main = defineComponent({
          */
         breakpoints: {
             type: Object,
-            default: () => ({})
+            default: () => ({}),
         },
         /**
          * Forces a device, ignoring the breakpoints prop.
@@ -39,8 +39,8 @@ var _sfc_main = defineComponent({
          */
         throttleMs: {
             type: Number,
-            default: 100
-        }
+            default: 100,
+        },
     },
     setup(props) {
         const xBus = useXBus();
@@ -118,9 +118,9 @@ var _sfc_main = defineComponent({
             storeWindowWidth();
         });
         return {
-            throttledStoreWindowWidth
+            throttledStoreWindowWidth,
         };
-    }
+    },
 });
 export { _sfc_main as default };

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

	@@ -1 +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~~;;;;"}
1	+ {"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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport 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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport 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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport 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":";;;;;;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,CAAA;AAErB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAA,CAAA;AAElD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,aAAa,CAAC,KAAM,GAAE,MAAM,CAAC,UAAS,CAAA;AACxC,SAAA,CAAA;AAEA;;;;AAIE;QACF,IAAI,4BAA4B,gBAAe,CAAA;AAE/C;;;;;;;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,MAAO,GAAE,MAAM,CAAC,CACrF,CAAA;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAqB;YACnD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAI,CAAA;AACnB,aAAA;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAM,KAAI,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAG,CAAA;AACV,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,EACxF;AACF,aAAA;AACF,SAAC,CAAA,CAAA;AAED,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAK;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAA,CAAA;AACpC,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;AAEA;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAW,IAAG;AACZ,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAA,CAAA;AACnE,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;AAEA;;;;;;AAME;QACF,SAAS,CAAC,MAAM;AACd,YAAA,gBAAgB,EAAC,CAAA;AACnB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { deviceXStoreModule } from './module.js';

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

	@@ -1 +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;;;;"}
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;;;;"}

package/js/x-modules/device/store/module.js CHANGED Viewed

@@ -5,15 +5,15 @@
  */
 const deviceXStoreModule = {
     state: () => ({
-        name: null
+        name: null,
     }),
     getters: {},
     mutations: {
         setName(state, name) {
             state.name = name;
-        }
+        },
     },
-    actions: {}
+    actions: {},
 };
 export { deviceXStoreModule };

package/js/x-modules/device/store/module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"module.js","sources":["../../../../../src/x-modules/device/store/module.ts"],"sourcesContent":["import { DeviceXStoreModule } from './types';\n\n/*\n {@link XStoreModule} For the device module.\n \n @internal\n */\nexport const deviceXStoreModule: DeviceXStoreModule = {\n state: () => ({\n name: null\n }),\n getters: {},\n mutations: {\n setName(state, name) {\n state.name = name;\n }\n },\n actions: {}\n};\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,IAAI;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,OAAO,CAAC,KAAK,EAAE,IAAI,EAAA;AACjB,YAAA,KAAK,CAAC,IAAI,GAAG,IAAI,~~CAAC~~;~~SACnB~~;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}
1	+ {"version":3,"file":"module.js","sources":["../../../../../src/x-modules/device/store/module.ts"],"sourcesContent":["import type { DeviceXStoreModule } from './types'\n\n/*\n {@link XStoreModule} For the device module.\n \n @internal\n */\nexport const deviceXStoreModule: DeviceXStoreModule = {\n state: () => ({\n name: null,\n }),\n getters: {},\n mutations: {\n setName(state, name) {\n state.name = name\n },\n },\n actions: {},\n}\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,IAAI;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,OAAO,CAAC,KAAK,EAAE,IAAI,EAAA;AACjB,YAAA,KAAK,CAAC,IAAI,GAAG,IAAI,CAAA;SAClB;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}

package/js/x-modules/device/wiring.js CHANGED Viewed

@@ -20,8 +20,8 @@ const setName = wireCommit('setName');
  */
 const deviceWiring = createWiring({
     DeviceProvided: {
-        setName
-    }
+        setName,
+    },
 });
 export { deviceWiring, setName };

package/js/x-modules/device/wiring.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/device/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/*\n WireCommit for {@link DeviceXModule}.\n \n @internal\n /\nconst wireCommit = namespacedWireCommit('device');\n\n/\n Sets the device of the {@link DeviceXModule}.\n \n @public\n /\nexport const setName = wireCommit('setName');\n\n/\n Wiring configuration for the {@link DeviceXModule \| device module}.\n \n @internal\n */\nexport const deviceWiring = createWiring({\n DeviceProvided: {\n setName\n }\n});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC,~~CAAC~~;~~AAElD~~;;;;AAIG;MACU,OAAO,GAAG,UAAU,CAAC,SAAS,~~EAAE~~;~~AAE7C~~;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,cAAc,EAAE;QACd,OAAO;AACR,KAAA;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/device/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory'\nimport { createWiring } from '../../wiring/wiring.utils'\n\n/*\n WireCommit for {@link DeviceXModule}.\n \n @internal\n /\nconst wireCommit = namespacedWireCommit('device')\n\n/\n Sets the device of the {@link DeviceXModule}.\n \n @public\n /\nexport const setName = wireCommit('setName')\n\n/\n Wiring configuration for the {@link DeviceXModule \| device module}.\n \n @internal\n */\nexport const deviceWiring = createWiring({\n DeviceProvided: {\n setName,\n },\n})\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;AAEjD;;;;AAIG;MACU,OAAO,GAAG,UAAU,CAAC,SAAS,EAAC;AAE5C;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,cAAc,EAAE;QACd,OAAO;AACR,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/device/x-module.js CHANGED Viewed

@@ -13,7 +13,7 @@ const deviceXModule = {
     name: 'device',
     storeModule: deviceXStoreModule,
     storeEmitters: deviceEmitters,
-    wiring: deviceWiring
+    wiring: deviceWiring,
 };
 XPlugin.registerXModule(deviceXModule);

package/js/x-modules/device/x-module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/device/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { ~~XPlugin~~ } from '~~../../plugins~~/~~x-plugin~~';\nimport { ~~deviceEmitters~~ } from '~~./store~~/~~emitters~~';\nimport { ~~deviceXStoreModule~~ } from './store/~~module~~';\nimport { ~~DeviceXStoreModule~~ } from './store/~~types~~';\nimport { deviceWiring } from './wiring';\n\n/*\n Device {@link XModule} alias.\n \n @public\n /\nexport type DeviceXModule = XModule<DeviceXStoreModule~~>;\~~n\n/\n Device {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `device` entry point.\n \n @public\n */\nexport const deviceXModule: DeviceXModule = {\n name: 'device',\n storeModule: deviceXStoreModule,\n storeEmitters: deviceEmitters,\n wiring: deviceWiring\n};\n\nXPlugin.registerXModule(deviceXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;~~EACpB~~;~~AAEF~~,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;;;;"}
1	+ {"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/device/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { DeviceXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/x-plugin'\nimport { deviceEmitters } from './store/emitters'\nimport { deviceXStoreModule } from './store/module'\nimport { deviceWiring } from './wiring'\n\n/*\n Device {@link XModule} alias.\n \n @public\n /\nexport type DeviceXModule = XModule<DeviceXStoreModule>\n\n/\n Device {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `device` entry point.\n \n @public\n */\nexport const deviceXModule: DeviceXModule = {\n name: 'device',\n storeModule: deviceXStoreModule,\n storeEmitters: deviceEmitters,\n wiring: deviceWiring,\n}\n\nXPlugin.registerXModule(deviceXModule)\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;EACrB;AAED,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;;;;"}

package/js/x-modules/empathize/components/empathize.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _sfc_main from './empathize.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, withDirectives, createElementVNode, withModifiers, createCommentVNode, renderSlot, vShow } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, withDirectives, createElementVNode, withModifiers, renderSlot, vShow } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -9,15 +9,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           ref: "empathizeRef",
+          class: "x-empathize",
+          "data-test": "empathize",
           onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["prevent"])),
           onFocusin: _cache[1] || (_cache[1] = (...args) => _ctx.open && _ctx.open(...args)),
-          onFocusout: _cache[2] || (_cache[2] = (...args) => _ctx.close && _ctx.close(...args)),
-          class: "x-empathize",
-          "data-test": "empathize"
+          onFocusout: _cache[2] || (_cache[2] = (...args) => _ctx.close && _ctx.close(...args))
         },
         [
-          createCommentVNode(" @slot (Required) Modal container content "),
           renderSlot(_ctx.$slots, "default")
         ],
         544