@empathyco/x-components 3.0.0-alpha.340 → 3.0.0-alpha.342

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.342](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.341...@empathyco/x-components@3.0.0-alpha.342) (2023-03-30)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.341](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.340...@empathyco/x-components@3.0.0-alpha.341) (2023-03-30)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.340](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.339...@empathyco/x-components@3.0.0-alpha.340) (2023-03-29)
 
 ### Features

package/core/index.d.ts

@@ -4,6 +4,7 @@
  * @packageDocumentation
  */
 export * from '../types/components';
+export * from '../types/composables';
 export * from '../types/directives';
 export * from '../types/plugins';
 export * from '../types/services';

package/core/index.js

@@ -146,6 +146,8 @@ export { Getter, State } from '../js/components/decorators/store.decorators.js';
 export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';
 export { xComponentMixin } from '../js/components/x-component.mixin.js';
 export { getXComponentXModuleName, isXComponent } from '../js/components/x-component.utils.js';
+export { createUseDevice } from '../js/composables/create-use-device.composable.js';
+export { use$x } from '../js/composables/use-_x.js';
 export { infiniteScroll } from '../js/directives/infinite-scroll/infinite-scroll.js';
 export { setupDevtools } from '../js/plugins/devtools/devtools.plugin.js';
 export { bus } from '../js/plugins/x-bus.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/full-theme.css

@@ -4669,49 +4669,6 @@
 .x-fill--transparent {
   fill: var(--x-color-base-transparent) !important;
 }
-.x-flex-1 {
-  flex: 1 1 0% !important;
-}
-
-.x-flex-auto {
-  flex: 1 1 auto !important;
-}
-
-.x-flex-initial {
-  flex: 0 1 auto !important;
-}
-
-.x-flex-no-shrink {
-  flex: 1 0 auto !important;
-}
-
-.x-flex-none {
-  flex: none !important;
-}
-
-.x-self-auto {
-  align-self: auto !important;
-}
-
-.x-self-start {
-  align-self: flex-start !important;
-}
-
-.x-self-end {
-  align-self: flex-end !important;
-}
-
-.x-self-center {
-  align-self: center !important;
-}
-
-.x-self-stretch {
-  align-self: stretch !important;
-}
-
-.x-self-baseline {
-  align-self: baseline !important;
-}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -5668,3 +5625,47 @@
 .x-sticky {
   position: sticky !important;
 }
+
+.x-flex-1 {
+  flex: 1 1 0% !important;
+}
+
+.x-flex-auto {
+  flex: 1 1 auto !important;
+}
+
+.x-flex-initial {
+  flex: 0 1 auto !important;
+}
+
+.x-flex-no-shrink {
+  flex: 1 0 auto !important;
+}
+
+.x-flex-none {
+  flex: none !important;
+}
+
+.x-self-auto {
+  align-self: auto !important;
+}
+
+.x-self-start {
+  align-self: flex-start !important;
+}
+
+.x-self-end {
+  align-self: flex-end !important;
+}
+
+.x-self-center {
+  align-self: center !important;
+}
+
+.x-self-stretch {
+  align-self: stretch !important;
+}
+
+.x-self-baseline {
+  align-self: baseline !important;
+}

package/docs/API-reference/api/x-components.capitalize.md

@@ -9,18 +9,18 @@ Util to capitalize a string .
 **Signature:**
 
 ```typescript
-export declare function capitalize(str: string): string;
+export declare function capitalize<StrType extends string>(str: StrType): Capitalize<StrType>;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  str | string | String value. |
+|  str | StrType | String value. |
 
 **Returns:**
 
-string
+Capitalize&lt;StrType&gt;
 
 Returns the string capitalized.
 

package/docs/API-reference/api/x-components.createusedevice.md

@@ -0,0 +1,34 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [createUseDevice](./x-components.createusedevice.md)
+
+## createUseDevice() function
+
+Factory function that creates a composable for device detection using the devices parameter to configure breakpoints.
+
+**Signature:**
+
+```typescript
+export declare function createUseDevice<Device extends string>(devices: Record<Device, number>): () => UseDeviceReturn<Device>;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  devices | Record&lt;Device, number&gt; | An object containing the breakpoints, where the key is the name of the device and the value is the screen width. |
+
+**Returns:**
+
+() =&gt; [UseDeviceReturn](./x-components.usedevicereturn.md)<!-- -->&lt;Device&gt;
+
+A composable which provides multiple reactive flags and values for detecting the current device. The flags names depends on the names passed in the `devices` parameter.
+
+## Remarks
+
+The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If in a desktop, the height of the window is larger than the width, the orientation will be `landscape`<!-- -->.
+
+## Example
+
+´´´typescript const useDevice = createUseDevice(<!-- -->{ mobile: 0, tablet: 744, desktop: 1024 }<!-- -->); const { isMobile, isMobileOrLess, isMobileOrGreater, isTablet, isTabletOrLess, isTabletOrGreater, isDesktop, isDesktopOrLess, isDesktopOrGreater, deviceName, orientation, istTouchable } = useDevice();
+

package/docs/API-reference/api/x-components.md

@@ -163,6 +163,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [createRawFilters(filterIds)](./x-components.createrawfilters.md) | Helper method which creates the filter entity from the filter ir of the url. |
 |  [createStoreEmitters(storeModule, emitters)](./x-components.createstoreemitters.md) | Helper function for creating type-safe [StoreEmitters](./x-components.storeemitters.md)<!-- -->. |
 |  [createTrackWire(property)](./x-components.createtrackwire.md) | Factory helper to create a wire for the track of a taggable element. |
+|  [createUseDevice(devices)](./x-components.createusedevice.md) | Factory function that creates a composable for device detection using the devices parameter to configure breakpoints. |
 |  [createWireFromFunction(fn)](./x-components.createwirefromfunction.md) | Creates a wire that executes the function passed. This function will receive a [WireParams](./x-components.wireparams.md) object. |
 |  [createWiring(wiring)](./x-components.createwiring.md) | Util function to generate type-safe wiring. If TypeScript ever accepts the PR about generic type inference this function can be removed. |
 |  [currencyFormatter(value, format)](./x-components.currencyformatter.md) | Format a value with a given format. |
@@ -201,6 +202,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [State(module, path)](./x-components.state.md) | <p>Generates a computed property which returns the selected state.</p><p>The decorated property needs to be public for type inference to work.</p> |
 |  [throttle(wire, timeInMs, options)](./x-components.throttle.md) | Creates a throttled [Wire](./x-components.wire.md)<!-- -->. Being throttled means that it will only be executed once every couple of milliseconds given by the <code>timeInMs</code> parameter. |
 |  [toKebabCase(str)](./x-components.tokebabcase.md) | Util to transform string a into kebab case. |
+|  [use$x()](./x-components.use_x.md) | Function which returns the <code>$x</code> object from the current component instance. |
 |  [wireCommit(mutation, payloadFactory)](./x-components.wirecommit.md) | Creates a wire that commits a mutation to the store. This wire receives a function. This function is used to get the actual payload value passed to mutation. This wire can be used in every event, as it does not have a payload type associated. |
 |  [wireCommit(mutation, staticPayload)](./x-components.wirecommit_1.md) | Creates a wire that commits a mutation to the store. This wire can receive any value as payload. This wire can be used in every event, as it does not have a payload type associated. |
 |  [wireCommit(mutation)](./x-components.wirecommit_2.md) | Creates a wire that commits a mutation to the store. This wire will commit to the store the payload that it receives in the observable. |
@@ -741,6 +743,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [UrlParamValue](./x-components.urlparamvalue.md) | The allowed values of the parameters to store in the URL. |
 |  [UrlXModule](./x-components.urlxmodule.md) | URL [XModule](./x-components.xmodule.md) alias. |
 |  [UrlXStoreModule](./x-components.urlxstoremodule.md) | URL type safe store module. |
+|  [UseDeviceFlags](./x-components.usedeviceflags.md) | The device flags type of the Return type of the composable returned by <code>createUseDevice</code>. |
+|  [UseDeviceReturn](./x-components.usedevicereturn.md) | The Return type of the composable returned by <code>createUseDevice</code>. |
 |  [VueConstructorPartialArgument](./x-components.vueconstructorpartialargument.md) | First parameter of the Vue constructor. |
 |  [VueCSSClasses](./x-components.vuecssclasses.md) | Union type containing supported Vue dynamic classes. |
 |  [Wire](./x-components.wire.md) | A Wire is a function that receives an observable, the store and the on function of the bus it will run in and returns a subscription. |

package/docs/API-reference/api/x-components.use_x.md

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [use$x](./x-components.use_x.md)
+
+## use$x() function
+
+Function which returns the `$x` object from the current component instance.
+
+**Signature:**
+
+```typescript
+export declare function use$x(): XComponentAPI;
+```
+**Returns:**
+
+[XComponentAPI](./x-components.xcomponentapi.md)
+
+The `$x` object from the current component instance.
+

package/docs/API-reference/api/x-components.usedeviceflags.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UseDeviceFlags](./x-components.usedeviceflags.md)
+
+## UseDeviceFlags type
+
+The device flags type of the Return type of the composable returned by `createUseDevice`<!-- -->.
+
+**Signature:**
+
+```typescript
+export type UseDeviceFlags<Device extends string> = Record<`is${Capitalize<Device>}`, Ref<boolean>> & Record<`is${Capitalize<Device>}OrGreater`, Ref<boolean>> & Record<`is${Capitalize<Device>}OrLess`, Ref<boolean>>;
+```

package/docs/API-reference/api/x-components.usedevicereturn.md

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UseDeviceReturn](./x-components.usedevicereturn.md)
+
+## UseDeviceReturn type
+
+The Return type of the composable returned by `createUseDevice`<!-- -->.
+
+**Signature:**
+
+```typescript
+export type UseDeviceReturn<Device extends string = string> = {
+    orientation: Ref<'landscape' | 'portrait' | undefined>;
+    isTouchable: Ref<boolean>;
+    deviceName: Ref<string>;
+} & UseDeviceFlags<Device>;
+```
+**References:** [UseDeviceFlags](./x-components.usedeviceflags.md)
+

package/js/composables/create-use-device.composable.js

@@ -0,0 +1,160 @@
+import { reduce } from '@empathyco/x-utils';
+import { useMemoize, useWindowSize, useScreenOrientation, useEventListener } from '@vueuse/core';
+import { effectScope, computed, ref } from 'vue';
+import { capitalize } from '../utils/string.js';
+import '../utils/storage.js';
+
+/**
+ * Factory function that creates a composable for device detection using the devices parameter
+ * to configure breakpoints.
+ *
+ * @param devices - An object containing the breakpoints, where the key is the name of the device
+ * and the value is the screen width.
+ * @returns A composable which provides multiple reactive flags and values for detecting the
+ * current device. The flags names depends on the names passed in the `devices` parameter.
+ * @remarks The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If
+ * in a desktop, the height of the window is larger than the width, the orientation will be
+ * `landscape`.
+ *
+ * @example
+ * ´´´typescript
+ * const useDevice = createUseDevice(\{ mobile: 0, tablet: 744, desktop: 1024 \});
+ * const \{
+ *   isMobile,
+ *   isMobileOrLess,
+ *   isMobileOrGreater,
+ *   isTablet,
+ *   isTabletOrLess,
+ *   isTabletOrGreater,
+ *   isDesktop,
+ *   isDesktopOrLess,
+ *   isDesktopOrGreater,
+ *   deviceName,
+ *   orientation,
+ *   istTouchable
+ * \} = useDevice();
+ *
+ * @public
+ */
+function createUseDevice(devices) {
+    let devicesFlags;
+    let orientation;
+    let isTouchable;
+    let deviceName;
+    // The `effectScope` group all the changes in one to avoid multiple re-renderings.
+    const scope = effectScope();
+    scope.run(() => {
+        devicesFlags = getDeviceFlags(devices);
+        orientation = getOrientation();
+        isTouchable = getIsTouchable();
+        deviceName = getDeviceName(devices, devicesFlags);
+    });
+    return () => ({
+        ...devicesFlags,
+        orientation,
+        isTouchable,
+        deviceName
+    });
+}
+/**
+ * A function that returns reactive flags to detect the current device based on provided
+ * breakpoints.
+ *
+ * @param devices - An object containing the breakpoints, where the key is the name of the device
+ * and the value is the screen width.
+ * @returns A object containing the multiple reactive flags.
+ *
+ * @internal
+ */
+function getDeviceFlags(devices) {
+    const { width: windowSize } = useWindowSize();
+    return reduce(devices, (accumulator, device, deviceWidth) => {
+        const isDevice = computed(() => isCurrentDevice(device, devices, windowSize.value));
+        accumulator[`is${capitalize(device)}`] = isDevice;
+        accumulator[`is${capitalize(device)}OrLess`] = computed(() => deviceWidth >= windowSize.value || isDevice.value);
+        accumulator[`is${capitalize(device)}OrGreater`] = computed(() => deviceWidth <= windowSize.value);
+        return accumulator;
+    }, {});
+}
+/**
+ * To get the devices sorted by size and not run this calculation on every check.
+ */
+const getSortedByWidthDevices = useMemoize((devices) => Object.entries(devices).sort(([, aWidth], [, bWidth]) => bWidth - aWidth));
+/**
+ * Checks if the current device satisfies the criteria of being a valid device.
+ *
+ * @param device - The name of the current device.
+ * @param devices - An object containing device names and their
+ * respective widths.
+ * @param windowSize - The width of the window.
+ * @returns A boolean value indicating whether the current device satisfies the
+ * criteria of being a valid device.
+ *
+ * @internal
+ */
+function isCurrentDevice(device, devices, windowSize) {
+    const deviceWidth = devices[device];
+    return (deviceWidth <= windowSize &&
+        !getSortedByWidthDevices(devices).some(([, otherDeviceWidth]) => otherDeviceWidth <= windowSize && otherDeviceWidth > deviceWidth));
+}
+/**
+ * A function that returns the current device orientation as a reactive value.
+ *
+ * @returns A reactive value indicating the current device
+ * orientation.
+ *
+ * @internal
+ */
+function getOrientation() {
+    const { orientation } = useScreenOrientation();
+    return computed(() => orientation.value?.includes('landscape')
+        ? 'landscape'
+        : orientation.value?.includes('portrait')
+            ? 'portrait'
+            : undefined);
+}
+/**
+ * A function that returns a reactive boolean indicating whether the current device is
+ * touch-enabled.
+ *
+ * @returns A reactive boolean indicating whether the current device is touch-enabled.
+ *
+ * @internal
+ */
+function getIsTouchable() {
+    const isTouchableRef = ref(detectTouchable());
+    if (window) {
+        useEventListener(window, 'resize', () => (isTouchableRef.value = detectTouchable()), {
+            passive: true
+        });
+    }
+    return isTouchableRef;
+}
+/**
+ * A function that returns a reactive string indicating the name of the currently detected device
+ * based on the provided devices and device flags.
+ *
+ * @param  devices - An object containing the breakpoints, where the key is the name of the device
+ * and the value is the screen width.
+ * @param devicesFlags - An object containing multiple reactive flags and values for detecting
+ * the current device.
+ * @returns A reactive string indicating the name of the currently detected device.
+ *
+ * @internal
+ */
+function getDeviceName(devices, devicesFlags) {
+    return computed(() => Object.keys(devices).find(device => devicesFlags[`is${capitalize(device)}`]?.value) ?? '');
+}
+/**
+ * A utility function that detects whether the current device is touch-enabled.
+ *
+ * @returns A boolean indicating whether the current device is touch-enabled.
+ *
+ * @internal
+ */
+function detectTouchable() {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
+
+export { createUseDevice };
+//# sourceMappingURL=create-use-device.composable.js.map

package/js/composables/create-use-device.composable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-use-device.composable.js","sources":["../../../src/composables/create-use-device.composable.ts"],"sourcesContent":["import { reduce } from '@empathyco/x-utils';\nimport { useWindowSize, useScreenOrientation, useEventListener, useMemoize } from '@vueuse/core';\nimport { computed, effectScope, ref, Ref } from 'vue';\nimport { capitalize } from '../utils';\n\n/**\n * The Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\nexport type UseDeviceReturn<Device extends string = string> = {\n  orientation: Ref<'landscape' | 'portrait' | undefined>;\n  isTouchable: Ref<boolean>;\n  deviceName: Ref<string>;\n} & UseDeviceFlags<Device>;\n\n/**\n * The device flags type of the Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\nexport type UseDeviceFlags<Device extends string> = Record<\n  `is${Capitalize<Device>}`,\n  Ref<boolean>\n> &\n  Record<`is${Capitalize<Device>}OrGreater`, Ref<boolean>> &\n  Record<`is${Capitalize<Device>}OrLess`, Ref<boolean>>;\n\n/**\n * Factory function that creates a composable for device detection using the devices parameter\n * to configure breakpoints.\n *\n * @param devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @returns A composable which provides multiple reactive flags and values for detecting the\n * current device. The flags names depends on the names passed in the `devices` parameter.\n * @remarks The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If\n * in a desktop, the height of the window is larger than the width, the orientation will be\n * `landscape`.\n *\n * @example\n * ´´´typescript\n * const useDevice = createUseDevice(\\{ mobile: 0, tablet: 744, desktop: 1024 \\});\n * const \\{\n *   isMobile,\n *   isMobileOrLess,\n *   isMobileOrGreater,\n *   isTablet,\n *   isTabletOrLess,\n *   isTabletOrGreater,\n *   isDesktop,\n *   isDesktopOrLess,\n *   isDesktopOrGreater,\n *   deviceName,\n *   orientation,\n *   istTouchable\n * \\} = useDevice();\n *\n * @public\n */\nexport function createUseDevice<Device extends string>(\n  devices: Record<Device, number>\n): () => UseDeviceReturn<Device> {\n  let devicesFlags: UseDeviceFlags<Device>;\n  let orientation: UseDeviceReturn['orientation'];\n  let isTouchable: UseDeviceReturn['isTouchable'];\n  let deviceName: UseDeviceReturn['deviceName'];\n  // The `effectScope` group all the changes in one to avoid multiple re-renderings.\n  const scope = effectScope();\n  scope.run(() => {\n    devicesFlags = getDeviceFlags(devices);\n    orientation = getOrientation();\n    isTouchable = getIsTouchable();\n    deviceName = getDeviceName(devices, devicesFlags);\n  });\n  return () => ({\n    ...devicesFlags,\n    orientation,\n    isTouchable,\n    deviceName\n  });\n}\n\n/**\n * A function that returns reactive flags to detect the current device based on provided\n * breakpoints.\n *\n * @param devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @returns A object containing the multiple reactive flags.\n *\n * @internal\n */\nfunction getDeviceFlags<Device extends string>(\n  devices: Record<Device, number>\n): UseDeviceFlags<Device> {\n  const { width: windowSize } = useWindowSize();\n  return reduce(\n    devices,\n    (accumulator, device, deviceWidth) => {\n      const isDevice = computed(() => isCurrentDevice(device, devices, windowSize.value));\n      accumulator[`is${capitalize(device)}`] = isDevice;\n      accumulator[`is${capitalize(device)}OrLess`] = computed(\n        () => deviceWidth >= windowSize.value || isDevice.value\n      );\n      accumulator[`is${capitalize(device)}OrGreater`] = computed(\n        () => deviceWidth <= windowSize.value\n      );\n      return accumulator;\n    },\n    {} as Record<string, Ref<boolean>>\n  );\n}\n\n/**\n * To get the devices sorted by size and not run this calculation on every check.\n */\nconst getSortedByWidthDevices = useMemoize((devices: Record<string, number>) =>\n  Object.entries(devices).sort(([, aWidth], [, bWidth]) => bWidth - aWidth)\n);\n\n/**\n * Checks if the current device satisfies the criteria of being a valid device.\n *\n * @param device - The name of the current device.\n * @param devices - An object containing device names and their\n * respective widths.\n * @param windowSize - The width of the window.\n * @returns A boolean value indicating whether the current device satisfies the\n * criteria of being a valid device.\n *\n * @internal\n */\nfunction isCurrentDevice(\n  device: string,\n  devices: Record<string, number>,\n  windowSize: number\n): boolean {\n  const deviceWidth = devices[device];\n  return (\n    deviceWidth <= windowSize &&\n    !getSortedByWidthDevices(devices).some(\n      ([, otherDeviceWidth]) => otherDeviceWidth <= windowSize && otherDeviceWidth > deviceWidth\n    )\n  );\n}\n\n/**\n * A function that returns the current device orientation as a reactive value.\n *\n * @returns A reactive value indicating the current device\n * orientation.\n *\n * @internal\n */\nfunction getOrientation(): UseDeviceReturn['orientation'] {\n  const { orientation } = useScreenOrientation();\n  return computed(() =>\n    orientation.value?.includes('landscape')\n      ? 'landscape'\n      : orientation.value?.includes('portrait')\n      ? 'portrait'\n      : undefined\n  );\n}\n\n/**\n * A function that returns a reactive boolean indicating whether the current device is\n * touch-enabled.\n *\n * @returns A reactive boolean indicating whether the current device is touch-enabled.\n *\n * @internal\n */\nfunction getIsTouchable(): Ref<boolean> {\n  const isTouchableRef = ref(detectTouchable());\n  if (window) {\n    useEventListener(window, 'resize', () => (isTouchableRef.value = detectTouchable()), {\n      passive: true\n    });\n  }\n  return isTouchableRef;\n}\n\n/**\n * A function that returns a reactive string indicating the name of the currently detected device\n * based on the provided devices and device flags.\n *\n * @param  devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @param devicesFlags - An object containing multiple reactive flags and values for detecting\n * the current device.\n * @returns A reactive string indicating the name of the currently detected device.\n *\n * @internal\n */\nfunction getDeviceName(\n  devices: Record<string, number>,\n  devicesFlags: UseDeviceFlags<string>\n): Ref<string> {\n  return computed(\n    () => Object.keys(devices).find(device => devicesFlags[`is${capitalize(device)}`]?.value) ?? ''\n  );\n}\n\n/**\n * A utility function that detects whether the current device is touch-enabled.\n *\n * @returns A boolean indicating whether the current device is touch-enabled.\n *\n * @internal\n */\nfunction detectTouchable(): boolean {\n  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n"],"names":[],"mappings":"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"}

package/js/composables/use-_x.js

@@ -0,0 +1,15 @@
+import { getCurrentInstance } from 'vue';
+
+/**
+ * Function which returns the `$x` object from the current component instance.
+ *
+ * @returns The `$x` object from the current component instance.
+ *
+ * @public
+ */
+function use$x() {
+    return (getCurrentInstance()?.proxy).$x;
+}
+
+export { use$x };
+//# sourceMappingURL=use-_x.js.map

package/js/composables/use-_x.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-_x.js","sources":["../../../src/composables/use-$x.ts"],"sourcesContent":["import { getCurrentInstance } from 'vue';\nimport { XComponentAPI } from '../plugins';\n\n/**\n * Function which returns the `$x` object from the current component instance.\n *\n * @returns The `$x` object from the current component instance.\n *\n * @public\n */\nexport function use$x(): XComponentAPI {\n  return (getCurrentInstance()?.proxy as unknown as { $x: XComponentAPI }).$x;\n}\n"],"names":[],"mappings":";;AAGA;;;;;;AAMG;SACa,KAAK,GAAA;IACnB,OAAO,CAAC,kBAAkB,EAAE,EAAE,KAA0C,EAAC,EAAE,CAAC;AAC9E;;;;"}

package/js/index.js

@@ -146,6 +146,8 @@ export { Getter, State } from './components/decorators/store.decorators.js';
 export { ItemsListInjectionMixin } from './components/items-list-injection.mixin.js';
 export { xComponentMixin } from './components/x-component.mixin.js';
 export { getXComponentXModuleName, isXComponent } from './components/x-component.utils.js';
+export { createUseDevice } from './composables/create-use-device.composable.js';
+export { use$x } from './composables/use-_x.js';
 export { infiniteScroll } from './directives/infinite-scroll/infinite-scroll.js';
 export { setupDevtools } from './plugins/devtools/devtools.plugin.js';
 export { bus } from './plugins/x-bus.js';

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/utils/string.js

@@ -41,7 +41,7 @@ function toKebabCase(str) {
  * @public
  */
 function capitalize(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
+    return (str.charAt(0).toUpperCase() + str.slice(1));
 }
 
 export { capitalize, isStringEmpty, toKebabCase };

package/js/utils/string.js.map

@@ -1 +1 @@
-{"version":3,"file":"string.js","sources":["../../../src/utils/string.ts"],"sourcesContent":["/**\n * Util used to return true if the string is empty, undefined or null.\n *\n * @param str - String value.\n * @returns Returns true if str is an empty string, undefined or null.\n * @public\n */\nexport function isStringEmpty(str?: string | null): boolean {\n  return !str || str.length === 0;\n}\n\n/**\n * Util to transform string a into kebab case.\n *\n * @example\n * Transforms `camelCase` into `camel-case`\n * Transforms `PascalCase` into `pascal-case`\n * Transforms `snake_case` into `snake-case`\n * Transforms `space space  multispaces` into `space-space-multiplespaces`\n * Transforms `kebab-case` into `kebab-case`\n *\n * @param str - String value.\n * @returns Returns the string in kebab case.\n * @public\n */\nexport function toKebabCase(str: string): string {\n  return str\n    .replace(/([a-z])([A-Z])/g, '$1-$2')\n    .replace(/\\s+|_/g, '-')\n    .toLowerCase();\n}\n\n/**\n * Util to capitalize a string .\n *\n * @example\n * Transforms `query` into `Query`\n *\n * @param str - String value.\n *\n * @returns Returns the string capitalized.\n *\n * @public\n */\nexport function capitalize(str: string): string {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACG,SAAU,aAAa,CAAC,GAAmB,EAAA;IAC/C,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC;AAClC,CAAC;AAED;;;;;;;;;;;;;AAaG;AACG,SAAU,WAAW,CAAC,GAAW,EAAA;AACrC,IAAA,OAAO,GAAG;AACP,SAAA,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;AACnC,SAAA,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC;AACtB,SAAA,WAAW,EAAE,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;AAWG;AACG,SAAU,UAAU,CAAC,GAAW,EAAA;AACpC,IAAA,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACpD;;;;"}
+{"version":3,"file":"string.js","sources":["../../../src/utils/string.ts"],"sourcesContent":["/**\n * Util used to return true if the string is empty, undefined or null.\n *\n * @param str - String value.\n * @returns Returns true if str is an empty string, undefined or null.\n * @public\n */\nexport function isStringEmpty(str?: string | null): boolean {\n  return !str || str.length === 0;\n}\n\n/**\n * Util to transform string a into kebab case.\n *\n * @example\n * Transforms `camelCase` into `camel-case`\n * Transforms `PascalCase` into `pascal-case`\n * Transforms `snake_case` into `snake-case`\n * Transforms `space space  multispaces` into `space-space-multiplespaces`\n * Transforms `kebab-case` into `kebab-case`\n *\n * @param str - String value.\n * @returns Returns the string in kebab case.\n * @public\n */\nexport function toKebabCase(str: string): string {\n  return str\n    .replace(/([a-z])([A-Z])/g, '$1-$2')\n    .replace(/\\s+|_/g, '-')\n    .toLowerCase();\n}\n\n/**\n * Util to capitalize a string .\n *\n * @example\n * Transforms `query` into `Query`\n *\n * @param str - String value.\n *\n * @returns Returns the string capitalized.\n *\n * @public\n */\nexport function capitalize<StrType extends string>(str: StrType): Capitalize<StrType> {\n  return (str.charAt(0).toUpperCase() + str.slice(1)) as Capitalize<StrType>;\n}\n"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACG,SAAU,aAAa,CAAC,GAAmB,EAAA;IAC/C,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC;AAClC,CAAC;AAED;;;;;;;;;;;;;AAaG;AACG,SAAU,WAAW,CAAC,GAAW,EAAA;AACrC,IAAA,OAAO,GAAG;AACP,SAAA,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;AACnC,SAAA,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC;AACtB,SAAA,WAAW,EAAE,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;AAWG;AACG,SAAU,UAAU,CAAyB,GAAY,EAAA;AAC7D,IAAA,QAAQ,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAyB;AAC7E;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.340",
+  "version": "3.0.0-alpha.342",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -91,7 +91,7 @@
     "@badeball/cypress-cucumber-preprocessor": "~15.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
     "@cypress/vue2": "~2.0.1",
-    "@empathyco/x-tailwindcss": "^1.0.0-alpha.19",
+    "@empathyco/x-tailwindcss": "^1.0.0-alpha.20",
     "@microsoft/api-documenter": "~7.21.3",
     "@microsoft/api-extractor": "~7.33.7",
     "@rollup/plugin-commonjs": "~24.0.0",
@@ -107,6 +107,7 @@
     "@vue/cli-service": "~5.0.4",
     "@vue/test-utils": "~1.0.3",
     "@vue/vue2-jest": "~27.0.0-alpha.3",
+    "@vueuse/core": "~9.13.0",
     "autoprefixer": "~10.4.4",
     "convert-source-map": "~2.0.0",
     "cypress": "~12.8.0",
@@ -142,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "0fc5cc1484e3d266dfb6ea463ab665b7759e2bf2"
+  "gitHead": "c11db7863eb13f5bbcd11a79a27aef9db323ef32"
 }

package/report/x-components.api.json

@@ -8069,19 +8069,32 @@
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "export declare function capitalize(str: "
+              "text": "export declare function capitalize<StrType extends "
             },
             {
               "kind": "Content",
               "text": "string"
             },
+            {
+              "kind": "Content",
+              "text": ">(str: "
+            },
+            {
+              "kind": "Content",
+              "text": "StrType"
+            },
             {
               "kind": "Content",
               "text": "): "
             },
+            {
+              "kind": "Reference",
+              "text": "Capitalize",
+              "canonicalReference": "!Capitalize:type"
+            },
             {
               "kind": "Content",
-              "text": "string"
+              "text": "<StrType>"
             },
             {
               "kind": "Content",
@@ -8090,8 +8103,8 @@
           ],
           "fileUrlPath": "src/utils/string.ts",
           "returnTypeTokenRange": {
-            "startIndex": 3,
-            "endIndex": 4
+            "startIndex": 5,
+            "endIndex": 7
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
@@ -8099,10 +8112,23 @@
             {
               "parameterName": "str",
               "parameterTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "isOptional": false
+            }
+          ],
+          "typeParameters": [
+            {
+              "typeParameterName": "StrType",
+              "constraintTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
               },
-              "isOptional": false
+              "defaultTypeTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              }
             }
           ],
           "name": "capitalize"
@@ -9669,6 +9695,86 @@
           ],
           "name": "createTrackWire"
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@empathyco/x-components!createUseDevice:function(1)",
+          "docComment": "/**\n * Factory function that creates a composable for device detection using the devices parameter to configure breakpoints.\n *\n * @remarks\n *\n * The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If in a desktop, the height of the window is larger than the width, the orientation will be `landscape`.\n *\n * @param devices - An object containing the breakpoints, where the key is the name of the device and the value is the screen width.\n *\n * @returns A composable which provides multiple reactive flags and values for detecting the current device. The flags names depends on the names passed in the `devices` parameter.\n *\n * @example\n *\n * ´´´typescript const useDevice = createUseDevice(\\{ mobile: 0, tablet: 744, desktop: 1024 \\}); const \\{ isMobile, isMobileOrLess, isMobileOrGreater, isTablet, isTabletOrLess, isTabletOrGreater, isDesktop, isDesktopOrLess, isDesktopOrGreater, deviceName, orientation, istTouchable \\} = useDevice();\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function createUseDevice<Device extends "
+            },
+            {
+              "kind": "Content",
+              "text": "string"
+            },
+            {
+              "kind": "Content",
+              "text": ">(devices: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Record",
+              "canonicalReference": "!Record:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<Device, number>"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Content",
+              "text": "() => "
+            },
+            {
+              "kind": "Reference",
+              "text": "UseDeviceReturn",
+              "canonicalReference": "@empathyco/x-components!UseDeviceReturn:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<Device>"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/composables/create-use-device.composable.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 6,
+            "endIndex": 9
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "devices",
+              "parameterTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 5
+              },
+              "isOptional": false
+            }
+          ],
+          "typeParameters": [
+            {
+              "typeParameterName": "Device",
+              "constraintTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              }
+            }
+          ],
+          "name": "createUseDevice"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@empathyco/x-components!createWireFromFunction:function(1)",
@@ -55622,6 +55728,250 @@
             "endIndex": 11
           }
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@empathyco/x-components!use$x:function(1)",
+          "docComment": "/**\n * Function which returns the `$x` object from the current component instance.\n *\n * @returns The `$x` object from the current component instance.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function use$x(): "
+            },
+            {
+              "kind": "Reference",
+              "text": "XComponentAPI",
+              "canonicalReference": "@empathyco/x-components!XComponentAPI:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/composables/use-$x.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [],
+          "name": "use$x"
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@empathyco/x-components!UseDeviceFlags:type",
+          "docComment": "/**\n * The device flags type of the Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type UseDeviceFlags<Device extends "
+            },
+            {
+              "kind": "Content",
+              "text": "string"
+            },
+            {
+              "kind": "Content",
+              "text": "> = "
+            },
+            {
+              "kind": "Reference",
+              "text": "Record",
+              "canonicalReference": "!Record:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<`is${"
+            },
+            {
+              "kind": "Reference",
+              "text": "Capitalize",
+              "canonicalReference": "!Capitalize:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<Device>}`, "
+            },
+            {
+              "kind": "Reference",
+              "text": "Ref",
+              "canonicalReference": "vue!Ref:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<boolean>> & "
+            },
+            {
+              "kind": "Reference",
+              "text": "Record",
+              "canonicalReference": "!Record:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<`is${"
+            },
+            {
+              "kind": "Reference",
+              "text": "Capitalize",
+              "canonicalReference": "!Capitalize:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<Device>}OrGreater`, "
+            },
+            {
+              "kind": "Reference",
+              "text": "Ref",
+              "canonicalReference": "vue!Ref:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<boolean>> & "
+            },
+            {
+              "kind": "Reference",
+              "text": "Record",
+              "canonicalReference": "!Record:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<`is${"
+            },
+            {
+              "kind": "Reference",
+              "text": "Capitalize",
+              "canonicalReference": "!Capitalize:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<Device>}OrLess`, "
+            },
+            {
+              "kind": "Reference",
+              "text": "Ref",
+              "canonicalReference": "vue!Ref:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<boolean>>"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/composables/create-use-device.composable.ts",
+          "releaseTag": "Public",
+          "name": "UseDeviceFlags",
+          "typeParameters": [
+            {
+              "typeParameterName": "Device",
+              "constraintTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              }
+            }
+          ],
+          "typeTokenRange": {
+            "startIndex": 3,
+            "endIndex": 21
+          }
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@empathyco/x-components!UseDeviceReturn:type",
+          "docComment": "/**\n * The Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type UseDeviceReturn<Device extends "
+            },
+            {
+              "kind": "Content",
+              "text": "string"
+            },
+            {
+              "kind": "Content",
+              "text": " = "
+            },
+            {
+              "kind": "Content",
+              "text": "string"
+            },
+            {
+              "kind": "Content",
+              "text": "> = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    orientation: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Ref",
+              "canonicalReference": "vue!Ref:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<'landscape' | 'portrait' | undefined>;\n    isTouchable: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Ref",
+              "canonicalReference": "vue!Ref:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<boolean>;\n    deviceName: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Ref",
+              "canonicalReference": "vue!Ref:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<string>;\n} & "
+            },
+            {
+              "kind": "Reference",
+              "text": "UseDeviceFlags",
+              "canonicalReference": "@empathyco/x-components!UseDeviceFlags:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<Device>"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/composables/create-use-device.composable.ts",
+          "releaseTag": "Public",
+          "name": "UseDeviceReturn",
+          "typeParameters": [
+            {
+              "typeParameterName": "Device",
+              "constraintTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              }
+            }
+          ],
+          "typeTokenRange": {
+            "startIndex": 5,
+            "endIndex": 14
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@empathyco/x-components!UserFilledIcon:var",

package/report/x-components.api.md

@@ -23,6 +23,7 @@ import { Module } from 'vuex';
 import { Observable } from 'rxjs';
 import { PluginObject } from 'vue';
 import { Priority } from '@empathyco/x-bus';
+import { Ref } from 'vue';
 import { RequiredProperties } from '@empathyco/x-utils';
 import { ShallowUnwrapRef } from 'vue';
 import { StorageService } from '@empathyco/x-storage-service';
@@ -783,7 +784,7 @@ export interface CancellablePromiseFunction<T, K = unknown> {
 export const CancelSymbol: unique symbol;
 
 // @public
-export function capitalize(str: string): string;
+export function capitalize<StrType extends string>(str: StrType): Capitalize<StrType>;
 
 // @public (undocumented)
 export const CartFilledIcon: {};
@@ -964,6 +965,9 @@ export function createStoreEmitters<Module extends AnyXStoreModule, Emitters ext
 // @public
 export function createTrackWire(property: keyof Tagging_2): Wire<Taggable>;
 
+// @public
+export function createUseDevice<Device extends string>(devices: Record<Device, number>): () => UseDeviceReturn<Device>;
+
 // @public
 export function createWireFromFunction<Payload>(fn: (parameters: WireParams<Payload>) => void): Wire<Payload>;
 
@@ -5319,6 +5323,19 @@ export type UrlXStoreModule = XStoreModule<UrlState, UrlGetters, UrlMutations, U
 // @internal
 export const urlXStoreModule: UrlXStoreModule;
 
+// @public
+export function use$x(): XComponentAPI;
+
+// @public
+export type UseDeviceFlags<Device extends string> = Record<`is${Capitalize<Device>}`, Ref<boolean>> & Record<`is${Capitalize<Device>}OrGreater`, Ref<boolean>> & Record<`is${Capitalize<Device>}OrLess`, Ref<boolean>>;
+
+// @public
+export type UseDeviceReturn<Device extends string = string> = {
+    orientation: Ref<'landscape' | 'portrait' | undefined>;
+    isTouchable: Ref<boolean>;
+    deviceName: Ref<string>;
+} & UseDeviceFlags<Device>;
+
 // @public (undocumented)
 export const UserFilledIcon: {};
 

package/types/composables/create-use-device.composable.d.ts

@@ -0,0 +1,51 @@
+import { Ref } from 'vue';
+/**
+ * The Return type of the composable returned by `createUseDevice`.
+ *
+ * @public
+ */
+export type UseDeviceReturn<Device extends string = string> = {
+    orientation: Ref<'landscape' | 'portrait' | undefined>;
+    isTouchable: Ref<boolean>;
+    deviceName: Ref<string>;
+} & UseDeviceFlags<Device>;
+/**
+ * The device flags type of the Return type of the composable returned by `createUseDevice`.
+ *
+ * @public
+ */
+export type UseDeviceFlags<Device extends string> = Record<`is${Capitalize<Device>}`, Ref<boolean>> & Record<`is${Capitalize<Device>}OrGreater`, Ref<boolean>> & Record<`is${Capitalize<Device>}OrLess`, Ref<boolean>>;
+/**
+ * Factory function that creates a composable for device detection using the devices parameter
+ * to configure breakpoints.
+ *
+ * @param devices - An object containing the breakpoints, where the key is the name of the device
+ * and the value is the screen width.
+ * @returns A composable which provides multiple reactive flags and values for detecting the
+ * current device. The flags names depends on the names passed in the `devices` parameter.
+ * @remarks The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If
+ * in a desktop, the height of the window is larger than the width, the orientation will be
+ * `landscape`.
+ *
+ * @example
+ * ´´´typescript
+ * const useDevice = createUseDevice(\{ mobile: 0, tablet: 744, desktop: 1024 \});
+ * const \{
+ *   isMobile,
+ *   isMobileOrLess,
+ *   isMobileOrGreater,
+ *   isTablet,
+ *   isTabletOrLess,
+ *   isTabletOrGreater,
+ *   isDesktop,
+ *   isDesktopOrLess,
+ *   isDesktopOrGreater,
+ *   deviceName,
+ *   orientation,
+ *   istTouchable
+ * \} = useDevice();
+ *
+ * @public
+ */
+export declare function createUseDevice<Device extends string>(devices: Record<Device, number>): () => UseDeviceReturn<Device>;
+//# sourceMappingURL=create-use-device.composable.d.ts.map

package/types/composables/create-use-device.composable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-use-device.composable.d.ts","sourceRoot":"","sources":["../../../src/composables/create-use-device.composable.ts"],"names":[],"mappings":"AAEA,OAAO,EAA8B,GAAG,EAAE,MAAM,KAAK,CAAC;AAGtD;;;;GAIG;AACH,MAAM,MAAM,eAAe,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IAC5D,WAAW,EAAE,GAAG,CAAC,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAC1B,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAE3B;;;;GAIG;AACH,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,MAAM,IAAI,MAAM,CACxD,KAAK,UAAU,CAAC,MAAM,CAAC,EAAE,EACzB,GAAG,CAAC,OAAO,CAAC,CACb,GACC,MAAM,CAAC,KAAK,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,GACxD,MAAM,CAAC,KAAK,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,eAAe,CAAC,MAAM,SAAS,MAAM,EACnD,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC9B,MAAM,eAAe,CAAC,MAAM,CAAC,CAmB/B"}

package/types/composables/index.d.ts

@@ -0,0 +1,3 @@
+export * from './create-use-device.composable';
+export * from './use-$x';
+//# sourceMappingURL=index.d.ts.map

package/types/composables/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,UAAU,CAAC"}

package/types/composables/use-$x.d.ts

@@ -0,0 +1,10 @@
+import { XComponentAPI } from '../plugins';
+/**
+ * Function which returns the `$x` object from the current component instance.
+ *
+ * @returns The `$x` object from the current component instance.
+ *
+ * @public
+ */
+export declare function use$x(): XComponentAPI;
+//# sourceMappingURL=use-$x.d.ts.map

package/types/composables/use-$x.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-$x.d.ts","sourceRoot":"","sources":["../../../src/composables/use-$x.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,KAAK,IAAI,aAAa,CAErC"}

package/types/index.d.ts

@@ -4,6 +4,7 @@
  * @packageDocumentation
  */
 export * from './components';
+export * from './composables';
 export * from './directives';
 export * from './plugins';
 export * from './services';

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC"}

package/types/utils/string.d.ts

@@ -33,5 +33,5 @@ export declare function toKebabCase(str: string): string;
  *
  * @public
  */
-export declare function capitalize(str: string): string;
+export declare function capitalize<StrType extends string>(str: StrType): Capitalize<StrType>;
 //# sourceMappingURL=string.d.ts.map

package/types/utils/string.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../../src/utils/string.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAE1D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAK/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE9C"}
+{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../../src/utils/string.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAE1D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAK/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,OAAO,SAAS,MAAM,EAAE,GAAG,EAAE,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAEpF"}