@empathyco/x-components 6.0.0-alpha.71 → 6.0.0-alpha.73

package/docs/API-reference/api/x-components.removesearchinputfocus.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; [removeSearchInputFocus](./x-components.removesearchinputfocus.md)
+
+## removeSearchInputFocus variable
+
+Removes focus from the search input element if it is currently focused. This function checks if the active element in the document matches the selector '.x-search-input' and, if so, blurs the element to remove focus.
+
+**Signature:**
+
+```typescript
+removeSearchInputFocus: () => void
+```

package/docs/API-reference/components/common/x-components.base-teleport.md

@@ -8,11 +8,11 @@ title: BaseTeleport
 
 ## Props
 
-| Name                      | Description | Type                 | Default           |
-| ------------------------- | ----------- | -------------------- | ----------------- |
-| <code>target</code>       |             | <code>string</code>  | <code></code>     |
-| <code>hideSiblings</code> |             | <code>boolean</code> | <code>true</code> |
-| <code>position</code>     |             | <code>number</code>  | <code></code>     |
+| Name                  | Description                                                                                                                                                                                                                                                                                                                                                             | Type                           | Default                  |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------ |
+| <code>target</code>   | The element or css selector to which the component will be teleported.                                                                                                                                                                                                                                                                                                  | <code>string \| Element</code> | <code></code>            |
+| <code>position</code> | The position relative to the target<br />- `beforebegin`: Before the target element.<br />- `afterbegin`: Inside the target element, before its first child.<br />- `beforeend`: Inside the target element, after its last child.<br />- `afterend`: After the target element.<br />- `onlychild`: Adds it as child and hides all other children of the target element. | <code>string</code>            | <code>'onlychild'</code> |
+| <code>disabled</code> | If disabled, the slot content will not be teleported                                                                                                                                                                                                                                                                                                                    | <code>boolean</code>           | <code>false</code>       |
 
 ## Slots
 

package/js/components/base-teleport.vue.js

@@ -5,10 +5,11 @@ import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Teleport, {
-    to: `.${_ctx.teleportTarget}`
+    to: _ctx.teleportHost,
+    disabled: _ctx.disabled
   }, [
     renderSlot(_ctx.$slots, "default")
-  ], 8, ["to"]);
+  ], 8, ["to", "disabled"]);
 }
 var baseTeleport = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/js/components/base-teleport.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"`.${teleportTarget}`\">\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    target: {\n      type: String,\n      required: true,\n    },\n    hideSiblings: {\n      type: Boolean,\n      default: true,\n    },\n    position: {\n      type: Number,\n      required: false,\n    },\n  },\n  setup(props) {\n    const parentElement = document.querySelector(props.target)\n\n    const teleportTarget = computed(() => `x-base-teleport--${props.target.replace(/[.#]/g, '')}`)\n\n    if (parentElement) {\n      const newTeleportElement = document.createElement('div')\n      newTeleportElement.classList.add(teleportTarget.value)\n      newTeleportElement.classList.add('x-base-teleport')\n      if (props.hideSiblings) {\n        newTeleportElement.classList.add('x-base-teleport--hide-siblings')\n      }\n\n      const children = parentElement.children\n      const position = props.position ?? -1\n\n      if (position >= children.length || position === -1) {\n        parentElement.appendChild(newTeleportElement)\n      } else {\n        parentElement.insertBefore(newTeleportElement, children[position])\n      }\n    }\n\n    return {\n      teleportTarget,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--hide-siblings) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":["teleportTarget"],"mappings":";;;;;AACe,SAAA,WAAA,CAAMA,IAAc,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;;IAC/B,EAAa,EAAA,CAAA,CAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,GAAA,EAAA;;;;;;;;"}
+{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, watchEffect } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Element] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const teleportHost = document.createElement('div')\n\n    watchEffect(() => {\n      if (props.disabled) {\n        teleportHost.remove()\n        return\n      }\n      teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`\n      const targetElement =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (!targetElement) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.insertAdjacentElement(position, teleportHost)\n    })\n\n    return { teleportHost }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":["teleportHost","_openBlock","_createBlock","_Teleport"],"mappings":";;;;;SACiBA,WAAY,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAG,EAAA,OAAAC,SAAA,EAAQ,EAAAC,WAAA,CAAAC,QAAA,EAAA;AAAA,IAAA,EAAA,EAAA,IAAA,CAAA,YAAA;IACpC,QAAa,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;;;;;;;;"}

package/js/components/base-teleport.vue2.js

@@ -1,43 +1,48 @@
-import { defineComponent, computed } from 'vue';
+import { defineComponent, watchEffect } from 'vue';
 
 var _sfc_main = defineComponent({
     name: 'BaseTeleport',
     props: {
+        /** The element or css selector to which the component will be teleported. */
         target: {
-            type: String,
+            type: [String, Element],
             required: true,
         },
-        hideSiblings: {
-            type: Boolean,
-            default: true,
-        },
+        /**
+         * The position relative to the target
+         * - `beforebegin`: Before the target element.
+         * - `afterbegin`: Inside the target element, before its first child.
+         * - `beforeend`: Inside the target element, after its last child.
+         * - `afterend`: After the target element.
+         * - `onlychild`: Adds it as child and hides all other children of the target element.
+         */
         position: {
-            type: Number,
-            required: false,
+            type: String,
+            default: 'onlychild',
+        },
+        /** If disabled, the slot content will not be teleported */
+        disabled: {
+            type: Boolean,
+            default: false,
         },
     },
     setup(props) {
-        const parentElement = document.querySelector(props.target);
-        const teleportTarget = computed(() => `x-base-teleport--${props.target.replace(/[.#]/g, '')}`);
-        if (parentElement) {
-            const newTeleportElement = document.createElement('div');
-            newTeleportElement.classList.add(teleportTarget.value);
-            newTeleportElement.classList.add('x-base-teleport');
-            if (props.hideSiblings) {
-                newTeleportElement.classList.add('x-base-teleport--hide-siblings');
-            }
-            const children = parentElement.children;
-            const position = props.position ?? -1;
-            if (position >= children.length || position === -1) {
-                parentElement.appendChild(newTeleportElement);
+        const teleportHost = document.createElement('div');
+        watchEffect(() => {
+            if (props.disabled) {
+                teleportHost.remove();
+                return;
             }
-            else {
-                parentElement.insertBefore(newTeleportElement, children[position]);
+            teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`;
+            const targetElement = typeof props.target === 'string' ? document.querySelector(props.target) : props.target;
+            if (!targetElement) {
+                console.warn(`BaseTeleport: Target element "${props.target}" not found.`);
+                return;
             }
-        }
-        return {
-            teleportTarget,
-        };
+            const position = props.position === 'onlychild' ? 'beforeend' : props.position;
+            targetElement.insertAdjacentElement(position, teleportHost);
+        });
+        return { teleportHost };
     },
 });
 

package/js/components/base-teleport.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"`.${teleportTarget}`\">\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    target: {\n      type: String,\n      required: true,\n    },\n    hideSiblings: {\n      type: Boolean,\n      default: true,\n    },\n    position: {\n      type: Number,\n      required: false,\n    },\n  },\n  setup(props) {\n    const parentElement = document.querySelector(props.target)\n\n    const teleportTarget = computed(() => `x-base-teleport--${props.target.replace(/[.#]/g, '')}`)\n\n    if (parentElement) {\n      const newTeleportElement = document.createElement('div')\n      newTeleportElement.classList.add(teleportTarget.value)\n      newTeleportElement.classList.add('x-base-teleport')\n      if (props.hideSiblings) {\n        newTeleportElement.classList.add('x-base-teleport--hide-siblings')\n      }\n\n      const children = parentElement.children\n      const position = props.position ?? -1\n\n      if (position >= children.length || position === -1) {\n        parentElement.appendChild(newTeleportElement)\n      } else {\n        parentElement.insertBefore(newTeleportElement, children[position])\n      }\n    }\n\n    return {\n      teleportTarget,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--hide-siblings) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":[],"mappings":";;AASA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,KAAK;AAChB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,aAAY,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAA,CAAA;QAEzD,MAAM,iBAAiB,QAAQ,CAAC,MAAM,oBAAoB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA,CAAE,CAAA,CAAA;AAE7F,QAAA,IAAI,aAAa,EAAE;YACjB,MAAM,kBAAmB,GAAE,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAA,CAAA;YACvD,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,CAAA,CAAA;AACrD,YAAA,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAA,CAAA;YAClD,IAAI,KAAK,CAAC,YAAY,EAAE;AACtB,gBAAA,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,gCAAgC,CAAA,CAAA;AACnE,aAAA;AAEA,YAAA,MAAM,QAAS,GAAE,aAAa,CAAC,QAAO,CAAA;YACtC,MAAM,QAAO,GAAI,KAAK,CAAC,QAAS,IAAG,CAAC,CAAA,CAAA;YAEpC,IAAI,YAAY,QAAQ,CAAC,UAAU,QAAS,KAAI,CAAC,CAAC,EAAE;AAClD,gBAAA,aAAa,CAAC,WAAW,CAAC,kBAAkB,CAAA,CAAA;AAC5C,aAAA;AAAK,iBAAA;gBACL,aAAa,CAAC,YAAY,CAAC,kBAAkB,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA,CAAA;AACnE,aAAA;AACF,SAAA;QAEA,OAAO;YACL,cAAc;SAChB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, watchEffect } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Element] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const teleportHost = document.createElement('div')\n\n    watchEffect(() => {\n      if (props.disabled) {\n        teleportHost.remove()\n        return\n      }\n      teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`\n      const targetElement =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (!targetElement) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.insertAdjacentElement(position, teleportHost)\n    })\n\n    return { teleportHost }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":[],"mappings":";;AAUA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,CAA+B;AACrD,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;;;;AAOE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAEL;AACD,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;;AAED,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,YAAW,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAA,CAAA;QAEjD,WAAW,CAAC,MAAM;YAChB,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,YAAY,CAAC,MAAM,EAAC,CAAA;gBACpB,OAAK;AACP,aAAA;YACA,YAAY,CAAC,SAAU,GAAE,CAAA,iCAAA,EAAoC,KAAK,CAAC,QAAQ,EAAC,CAAA;YAC5E,MAAM,aAAc,GAClB,OAAO,KAAK,CAAC,MAAO,KAAI,QAAO,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAA,GAAI,KAAK,CAAC,MAAK,CAAA;YACvF,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO,CAAC,IAAI,CAAC,CAAA,8BAAA,EAAiC,KAAK,CAAC,MAAM,CAAc,YAAA,CAAA,CAAA,CAAA;gBACxE,OAAK;AACP,aAAA;AACA,YAAA,MAAM,QAAO,GAAI,KAAK,CAAC,QAAS,KAAI,WAAU,GAAI,WAAY,GAAE,KAAK,CAAC,QAAO,CAAA;AAC7E,YAAA,aAAa,CAAC,qBAAqB,CAAC,QAAQ,EAAE,YAAY,CAAA,CAAA;AAC5D,SAAC,CAAA,CAAA;QAED,OAAO,EAAE,YAAa,EAAA,CAAA;KACvB;AACF,CAAA,CAAA;;;;"}

package/js/components/base-teleport.vue3.js

@@ -1,6 +1,6 @@
 import injectCss from '../../tools/inject-css.js';
 
-var css = ":has(>.x-base-teleport--hide-siblings)>:not(.x-base-teleport){display:none}";
+var css = ":has(>.x-base-teleport--onlychild)>:not(.x-base-teleport){display:none}";
 injectCss(css);
 
 export { css, css as default };

package/js/index.js

@@ -179,6 +179,7 @@ export { FOCUSABLE_SELECTORS } from './utils/focus.js';
 export { noOp } from './utils/function.js';
 export { getURLParameter } from './utils/get-url-parameters.js';
 export { getActiveElement, getTargetElement, isElementEqualOrContained } from './utils/html.js';
+export { isIOS, removeSearchInputFocus } from './utils/ios-utils.js';
 export { SPLIT_WORDS_REGEX, isNewQuery } from './utils/is-new-query.js';
 export { normalizeString } from './utils/normalize.js';
 export { isInRange } from './utils/number.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/ios-utils.js

@@ -0,0 +1,30 @@
+/**
+ * Checks if the user is on an iOS device (iPhone, iPad, or iPod).
+ *
+ * @returns `true` if the user is on iOS, `false` otherwise.
+ *
+ * @public
+ */
+const isIOS = () => {
+    const userAgent = navigator.userAgent.toLowerCase();
+    return /iphone|ipad|ipod/.test(userAgent) && !/windows phone/.test(userAgent);
+};
+/**
+ * Removes focus from the search input element if it is currently focused.
+ * This function checks if the active element in the document matches the
+ * selector '.x-search-input' and, if so, blurs the element to remove focus.
+ *
+ * @public
+ */
+const removeSearchInputFocus = () => {
+    const shadowHost = document.querySelector('.x-root-container');
+    if (shadowHost?.shadowRoot) {
+        shadowHost.shadowRoot.querySelector('.x-search-input')?.blur();
+    }
+    else if (document.activeElement?.matches('.x-search-input')) {
+        document.activeElement.blur();
+    }
+};
+
+export { isIOS, removeSearchInputFocus };
+//# sourceMappingURL=ios-utils.js.map

package/js/utils/ios-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ios-utils.js","sources":["../../../src/utils/ios-utils.ts"],"sourcesContent":["/**\n * Checks if the user is on an iOS device (iPhone, iPad, or iPod).\n *\n * @returns `true` if the user is on iOS, `false` otherwise.\n *\n * @public\n */\nexport const isIOS = (): boolean => {\n  const userAgent = navigator.userAgent.toLowerCase()\n  return /iphone|ipad|ipod/.test(userAgent) && !/windows phone/.test(userAgent)\n}\n\n/**\n * Removes focus from the search input element if it is currently focused.\n * This function checks if the active element in the document matches the\n * selector '.x-search-input' and, if so, blurs the element to remove focus.\n *\n * @public\n */\nexport const removeSearchInputFocus = (): void => {\n  const shadowHost = document.querySelector('.x-root-container')\n  if (shadowHost?.shadowRoot) {\n    ;(shadowHost.shadowRoot.querySelector('.x-search-input') as HTMLInputElement)?.blur()\n  } else if (document.activeElement?.matches('.x-search-input')) {\n    ;(document.activeElement as HTMLElement).blur()\n  }\n}\n"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACI,MAAM,KAAK,GAAG,MAAc;IACjC,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAA;AACnD,IAAA,OAAO,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC/E,EAAC;AAED;;;;;;AAMG;AACI,MAAM,sBAAsB,GAAG,MAAW;IAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAA;IAC9D,IAAI,UAAU,EAAE,UAAU,EAAE;QACxB,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAsB,EAAE,IAAI,EAAE,CAAA;AACtF,KAAA;SAAM,IAAI,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC,iBAAiB,CAAC,EAAE;AAC3D,QAAA,QAAQ,CAAC,aAA6B,CAAC,IAAI,EAAE,CAAA;AAChD,KAAA;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.71",
+  "version": "6.0.0-alpha.73",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -142,5 +142,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "6c83f2c471cea8d15dbc321e617845f92ea710d9"
+  "gitHead": "dd9bbc01c1d1078d0ebea9874c7c2287e41ca46b"
 }

package/report/x-components.api.json

@@ -9994,39 +9994,48 @@
             },
             {
               "kind": "Reference",
-              "text": "StringConstructor",
-              "canonicalReference": "!StringConstructor:interface"
+              "text": "PropType",
+              "canonicalReference": "@vue/runtime-core!PropType:type"
             },
             {
               "kind": "Content",
-              "text": ";\n        required: true;\n    };\n    hideSiblings: {\n        type: "
+              "text": "<string | "
             },
             {
               "kind": "Reference",
-              "text": "BooleanConstructor",
-              "canonicalReference": "!BooleanConstructor:interface"
+              "text": "Element",
+              "canonicalReference": "!Element:interface"
             },
             {
               "kind": "Content",
-              "text": ";\n        default: boolean;\n    };\n    position: {\n        type: "
+              "text": ">;\n        required: true;\n    };\n    position: {\n        type: "
             },
             {
               "kind": "Reference",
-              "text": "NumberConstructor",
-              "canonicalReference": "!NumberConstructor:interface"
+              "text": "PropType",
+              "canonicalReference": "@vue/runtime-core!PropType:type"
             },
             {
               "kind": "Content",
-              "text": ";\n        required: false;\n    };\n}, {\n    teleportTarget: import(\"vue\")."
+              "text": "<\"beforebegin\" | \"afterbegin\" | \"beforeend\" | \"afterend\" | \"onlychild\">;\n        default: string;\n    };\n    disabled: {\n        type: "
             },
             {
               "kind": "Reference",
-              "text": "ComputedRef",
-              "canonicalReference": "@vue/reactivity!ComputedRef:interface"
+              "text": "BooleanConstructor",
+              "canonicalReference": "!BooleanConstructor:interface"
             },
             {
               "kind": "Content",
-              "text": "<string>;\n}, unknown, {}, {}, import(\"vue\")."
+              "text": ";\n        default: boolean;\n    };\n}, {\n    teleportHost: "
+            },
+            {
+              "kind": "Reference",
+              "text": "HTMLDivElement",
+              "canonicalReference": "!HTMLDivElement:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n}, unknown, {}, {}, import(\"vue\")."
             },
             {
               "kind": "Reference",
@@ -10075,30 +10084,39 @@
             },
             {
               "kind": "Reference",
-              "text": "StringConstructor",
-              "canonicalReference": "!StringConstructor:interface"
+              "text": "PropType",
+              "canonicalReference": "@vue/runtime-core!PropType:type"
             },
             {
               "kind": "Content",
-              "text": ";\n        required: true;\n    };\n    hideSiblings: {\n        type: "
+              "text": "<string | "
             },
             {
               "kind": "Reference",
-              "text": "BooleanConstructor",
-              "canonicalReference": "!BooleanConstructor:interface"
+              "text": "Element",
+              "canonicalReference": "!Element:interface"
             },
             {
               "kind": "Content",
-              "text": ";\n        default: boolean;\n    };\n    position: {\n        type: "
+              "text": ">;\n        required: true;\n    };\n    position: {\n        type: "
             },
             {
               "kind": "Reference",
-              "text": "NumberConstructor",
-              "canonicalReference": "!NumberConstructor:interface"
+              "text": "PropType",
+              "canonicalReference": "@vue/runtime-core!PropType:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<\"beforebegin\" | \"afterbegin\" | \"beforeend\" | \"afterend\" | \"onlychild\">;\n        default: string;\n    };\n    disabled: {\n        type: "
+            },
+            {
+              "kind": "Reference",
+              "text": "BooleanConstructor",
+              "canonicalReference": "!BooleanConstructor:interface"
             },
             {
               "kind": "Content",
-              "text": ";\n        required: false;\n    };\n}>>, {\n    hideSiblings: boolean;\n}, {}>"
+              "text": ";\n        default: boolean;\n    };\n}>>, {\n    position: \"beforebegin\" | \"afterbegin\" | \"beforeend\" | \"afterend\" | \"onlychild\";\n    disabled: boolean;\n}, {}>"
             }
           ],
           "fileUrlPath": "dist/types/components/base-teleport.vue.d.ts",
@@ -10107,7 +10125,7 @@
           "name": "BaseTeleport",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 28
+            "endIndex": 32
           }
         },
         {
@@ -36750,6 +36768,29 @@
           ],
           "name": "isInRange"
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@empathyco/x-components!isIOS:var",
+          "docComment": "/**\n * Checks if the user is on an iOS device (iPhone, iPad, or iPod).\n *\n * @returns `true` if the user is on iOS, `false` otherwise.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "isIOS: "
+            },
+            {
+              "kind": "Content",
+              "text": "() => boolean"
+            }
+          ],
+          "fileUrlPath": "src/utils/ios-utils.ts",
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "isIOS",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
         {
           "kind": "Function",
           "canonicalReference": "@empathyco/x-components!isNewQuery:function(1)",
@@ -55147,6 +55188,29 @@
             "endIndex": 4
           }
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@empathyco/x-components!removeSearchInputFocus:var",
+          "docComment": "/**\n * Removes focus from the search input element if it is currently focused. This function checks if the active element in the document matches the selector '.x-search-input' and, if so, blurs the element to remove focus.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "removeSearchInputFocus: "
+            },
+            {
+              "kind": "Content",
+              "text": "() => void"
+            }
+          ],
+          "fileUrlPath": "src/utils/ios-utils.ts",
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "removeSearchInputFocus",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@empathyco/x-components!RenderlessExtraParams:var",

package/report/x-components.api.md

@@ -1477,34 +1477,35 @@ allowTabDeselect: boolean;
 // @public (undocumented)
 export const BaseTeleport: DefineComponent<    {
 target: {
-type: StringConstructor;
+type: PropType<string | Element>;
 required: true;
 };
-hideSiblings: {
+position: {
+type: PropType<"beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild">;
+default: string;
+};
+disabled: {
 type: BooleanConstructor;
 default: boolean;
 };
-position: {
-type: NumberConstructor;
-required: false;
-};
 }, {
-teleportTarget: ComputedRef<string>;
+teleportHost: HTMLDivElement;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
 target: {
-type: StringConstructor;
+type: PropType<string | Element>;
 required: true;
 };
-hideSiblings: {
+position: {
+type: PropType<"beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild">;
+default: string;
+};
+disabled: {
 type: BooleanConstructor;
 default: boolean;
 };
-position: {
-type: NumberConstructor;
-required: false;
-};
 }>>, {
-hideSiblings: boolean;
+position: "beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild";
+disabled: boolean;
 }, {}>;
 
 // @public
@@ -4204,6 +4205,9 @@ export function isElementEqualOrContained(a: Element, b: Element): boolean;
 // @public
 export function isInRange(number: number, [min, max]: [number, number]): boolean;
 
+// @public
+export const isIOS: () => boolean;
+
 // @public
 export function isNewQuery(newQuery: string, previousQuery: string): boolean;
 
@@ -6251,6 +6255,9 @@ queryPreviewHash: string;
 cache: boolean;
 }>;
 
+// @public
+export const removeSearchInputFocus: () => void;
+
 // @public
 export const RenderlessExtraParams: DefineComponent<    {
 name: {

package/types/components/base-teleport.vue.d.ts

@@ -1,33 +1,55 @@
+import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
+    /** The element or css selector to which the component will be teleported. */
     target: {
-        type: StringConstructor;
+        type: PropType<string | Element>;
         required: true;
     };
-    hideSiblings: {
+    /**
+     * The position relative to the target
+     * - `beforebegin`: Before the target element.
+     * - `afterbegin`: Inside the target element, before its first child.
+     * - `beforeend`: Inside the target element, after its last child.
+     * - `afterend`: After the target element.
+     * - `onlychild`: Adds it as child and hides all other children of the target element.
+     */
+    position: {
+        type: PropType<"beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild">;
+        default: string;
+    };
+    /** If disabled, the slot content will not be teleported */
+    disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-    position: {
-        type: NumberConstructor;
-        required: false;
-    };
 }, {
-    teleportTarget: import("vue").ComputedRef<string>;
+    teleportHost: HTMLDivElement;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** The element or css selector to which the component will be teleported. */
     target: {
-        type: StringConstructor;
+        type: PropType<string | Element>;
         required: true;
     };
-    hideSiblings: {
+    /**
+     * The position relative to the target
+     * - `beforebegin`: Before the target element.
+     * - `afterbegin`: Inside the target element, before its first child.
+     * - `beforeend`: Inside the target element, after its last child.
+     * - `afterend`: After the target element.
+     * - `onlychild`: Adds it as child and hides all other children of the target element.
+     */
+    position: {
+        type: PropType<"beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild">;
+        default: string;
+    };
+    /** If disabled, the slot content will not be teleported */
+    disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-    position: {
-        type: NumberConstructor;
-        required: false;
-    };
 }>>, {
-    hideSiblings: boolean;
+    position: "beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild";
+    disabled: boolean;
 }, {}>;
 export default _default;
 //# sourceMappingURL=base-teleport.vue?vue&type=script&lang.d.ts.map

package/types/components/base-teleport.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBA2CE"}
+{"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAM/B,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;IAnB3D,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;;AAtB/D,wBAiDE"}

package/types/utils/index.d.ts

@@ -8,6 +8,7 @@ export * from './focus';
 export * from './function';
 export * from './get-url-parameters';
 export * from './html';
+export * from './ios-utils';
 export * from './is-new-query';
 export * from './normalize';
 export * from './number';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,YAAY,CAAA;AACzD,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,YAAY,CAAA;AACzD,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,YAAY,CAAA;AACzD,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,YAAY,CAAA;AACzD,cAAc,SAAS,CAAA"}

package/types/utils/ios-utils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Checks if the user is on an iOS device (iPhone, iPad, or iPod).
+ *
+ * @returns `true` if the user is on iOS, `false` otherwise.
+ *
+ * @public
+ */
+export declare const isIOS: () => boolean;
+/**
+ * Removes focus from the search input element if it is currently focused.
+ * This function checks if the active element in the document matches the
+ * selector '.x-search-input' and, if so, blurs the element to remove focus.
+ *
+ * @public
+ */
+export declare const removeSearchInputFocus: () => void;
+//# sourceMappingURL=ios-utils.d.ts.map

package/types/utils/ios-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ios-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/ios-utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,QAAO,OAGxB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,QAAO,IAOzC,CAAA"}