@empathyco/x-components 7.2.3 → 7.2.5

package/js/components/{base-switch2.vue.js.map → base-switch.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-switch2.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n    @click=\"toggle\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\nexport default defineComponent({\n  name: 'BaseSwitch',\n  /**\n   * The selected value of the switch.\n   *\n   * @public\n   */\n  props: {\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /**\n     * Dynamic CSS classes to add to the switch component\n     * depending on its internal state.\n     *\n     * @returns A boolean dictionary with dynamic CSS classes.\n     * @internal\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-switch--is-selected xds:selected': props.modelValue,\n    }))\n\n    /**\n     * Emits an event with the new value of the switch.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      const newValue = !props.modelValue\n      emit('update:modelValue', newValue)\n    }\n\n    return {\n      cssClasses,\n      toggle,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-switch {\n  --x-switch-height: 16px;\n  --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n  --x-switch-background: #b3b3b3;\n  --x-switch-padding: 2px;\n  --x-switch-handle-size: var(--x-switch-height);\n  box-sizing: content-box;\n  height: var(--x-switch-height);\n  padding: var(--x-switch-padding);\n  border-radius: 99999px;\n  background: var(--x-switch-background);\n  width: var(--x-switch-width);\n  border: none;\n  transition: 0.25s ease-out background-color;\n  cursor: pointer;\n}\n\n.x-switch__handle {\n  background: #ffffff;\n  border-radius: 50%;\n  height: var(--x-switch-handle-size);\n  width: var(--x-switch-handle-size);\n  transition: 0.25s ease-out transform;\n  transform: translateX(var(--x-switch-translate-x, 0%));\n}\n\n.x-switch--is-selected {\n  --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n  --x-switch-background: #1a1a1a;\n}\n\n.x-switch--sm {\n  --x-switch-height: 12px;\n}\n\n.x-switch--lg {\n  --x-switch-height: 24px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBA;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAgB,OAAO;YAChD,oCAAoC,EAAE,KAAK,CAAC,UAAU;AACvD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAU;AACvB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAS;AACjC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAA;AACpC,QAAA,CAAA;QAEA,OAAO;YACL,UAAU;YACV,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n    @click=\"toggle\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\nexport default defineComponent({\n  name: 'BaseSwitch',\n  /**\n   * The selected value of the switch.\n   *\n   * @public\n   */\n  props: {\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /**\n     * Dynamic CSS classes to add to the switch component\n     * depending on its internal state.\n     *\n     * @returns A boolean dictionary with dynamic CSS classes.\n     * @internal\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-switch--is-selected xds:selected': props.modelValue,\n    }))\n\n    /**\n     * Emits an event with the new value of the switch.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      const newValue = !props.modelValue\n      emit('update:modelValue', newValue)\n    }\n\n    return {\n      cssClasses,\n      toggle,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-switch {\n  --x-switch-height: 16px;\n  --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n  --x-switch-background: #b3b3b3;\n  --x-switch-padding: 2px;\n  --x-switch-handle-size: var(--x-switch-height);\n  box-sizing: content-box;\n  height: var(--x-switch-height);\n  padding: var(--x-switch-padding);\n  border-radius: 99999px;\n  background: var(--x-switch-background);\n  width: var(--x-switch-width);\n  border: none;\n  transition: 0.25s ease-out background-color;\n  cursor: pointer;\n}\n\n.x-switch__handle {\n  background: #ffffff;\n  border-radius: 50%;\n  height: var(--x-switch-handle-size);\n  width: var(--x-switch-handle-size);\n  transition: 0.25s ease-out transform;\n  transform: translateX(var(--x-switch-translate-x, 0%));\n}\n\n.x-switch--is-selected {\n  --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n  --x-switch-background: #1a1a1a;\n}\n\n.x-switch--sm {\n  --x-switch-height: 12px;\n}\n\n.x-switch--lg {\n  --x-switch-height: 24px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBA;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAgB,OAAO;YAChD,oCAAoC,EAAE,KAAK,CAAC,UAAU;AACvD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAU;AACvB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAS;AACjC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAA;AACpC,QAAA,CAAA;QAEA,OAAO;YACL,UAAU;YACV,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/{base-switch3.vue.js → base-switch.vue3.js}

@@ -4,4 +4,4 @@ var css = ".x-switch[data-v-3ae6056b]{--x-switch-height:16px;--x-switch-width:ca
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=base-switch3.vue.js.map
+//# sourceMappingURL=base-switch.vue3.js.map

package/js/components/base-switch.vue3.js.map

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

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

@@ -1,4 +1,4 @@
-import _sfc_main from './base-teleport2.vue.js';
+import _sfc_main from './base-teleport.vue2.js';
 import { openBlock, createBlock, Teleport, renderSlot, createCommentVNode } from 'vue';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 

package/js/components/{base-teleport2.vue.js → base-teleport.vue2.js}

@@ -145,4 +145,4 @@ if (typeof document !== 'undefined') {
 }
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-teleport2.vue.js.map
+//# sourceMappingURL=base-teleport.vue2.js.map

package/js/components/{base-teleport2.vue.js.map → base-teleport.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-teleport2.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} 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, Object] 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    /** Styles for the teleport (content container) */\n    hostStyle: Object as PropType<string | CSSStyleDeclaration>,\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<HTMLElement>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<HTMLElement>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<HTMLElement>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /* Update the host inline styles when it changes */\n    watchEffect(() => {\n      if (teleportHost.value && props.hostStyle) {\n        if (typeof props.hostStyle === 'string') {\n          teleportHost.value.style.cssText = props.hostStyle\n        } else {\n          Object.assign(teleportHost.value.style, props.hostStyle)\n        }\n      }\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element: string | Element | null = props.target\n      if (typeof element === 'string') {\n        element = document.querySelector(element)\n      }\n      if (element instanceof HTMLElement && element.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\">\n    <div>This content will be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n    <div>Teleported content at the beginning.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n    <div>This content will not be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n  injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} 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, Object] 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    /** Styles for the teleport (content container) */\n    hostStyle: Object as PropType<string | CSSStyleDeclaration>,\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<HTMLElement>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<HTMLElement>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<HTMLElement>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /* Update the host inline styles when it changes */\n    watchEffect(() => {\n      if (teleportHost.value && props.hostStyle) {\n        if (typeof props.hostStyle === 'string') {\n          teleportHost.value.style.cssText = props.hostStyle\n        } else {\n          Object.assign(teleportHost.value.style, props.hostStyle)\n        }\n      }\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element: string | Element | null = props.target\n      if (typeof element === 'string') {\n        element = document.querySelector(element)\n      }\n      if (element instanceof HTMLElement && element.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\">\n    <div>This content will be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n    <div>Teleported content at the beginning.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n    <div>This content will not be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n  injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":[],"mappings":"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"}

package/js/components/base-variable-column-grid.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './base-variable-column-grid2.vue.js';
+import _sfc_main from './base-variable-column-grid.vue2.js';
 import { resolveComponent, openBlock, createBlock, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 

package/js/components/{base-variable-column-grid2.vue.js → base-variable-column-grid.vue2.js}

@@ -79,4 +79,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-variable-column-grid2.vue.js.map
+//# sourceMappingURL=base-variable-column-grid.vue2.js.map

package/js/components/{base-variable-column-grid2.vue.js.map → base-variable-column-grid.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-variable-column-grid2.vue.js","sources":["../../../src/components/base-variable-column-grid.vue"],"sourcesContent":["<template>\n  <BaseGrid :animation=\"animation\" :columns=\"columnsToRender\" :items=\"items\">\n    <template v-for=\"(_, name) in slots\" #[name]=\"{ item }\">\n      <!--\n        @slot Customized item rendering. The slot name can either be default or the item's model\n         name.\n            @binding {GridItem} item - Item to render.\n      -->\n      <slot :name=\"name\" v-bind=\"{ item }\" />\n    </template>\n  </BaseGrid>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport BaseGrid from './base-grid.vue'\n\n/**\n * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n * selected number of columns to the grid. It also allows to customize the grid items using the\n * available `scopedSlots`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseVariableColumnGrid',\n  components: {\n    BaseGrid,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the grid.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an id property.\n     *\n     * @public\n     */\n    items: Array as PropType<ListItem[]>,\n    /**\n     * The columns to render by default in the grid. This property is used when the user has not\n     * selected any value in the column picker.\n     *\n     * @internal\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n  },\n  setup(props, { slots }) {\n    const bus = useXBus()\n    /**\n     * The number of columns provided by a user interaction.\n     *\n     * @internal\n     */\n    const providedColumns = ref<number | null>(null)\n\n    /**\n     * The number of columns to render in the grid.\n     *\n     * @returns The number of columns.\n     *\n     * @internal\n     */\n    const columnsToRender = computed(() =>\n      providedColumns.value === null ? props.columns : providedColumns.value,\n    )\n\n    /**\n     * Handler to update the number of columns when the user selects a new value.\n     *\n     * @param newColumns - The new columns value.\n     *\n     * @internal\n     */\n    bus\n      .on('ColumnsNumberProvided', false)\n      .subscribe(newColumns => (providedColumns.value = newColumns))\n\n    return {\n      columnsToRender,\n      slots,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the\n`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows\nyou to customize the grid items using the available slots.\n\n### Basic example\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(4)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">4 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\nimport { use$x } from '../../composables'\n\nconst x = use$x()\nconst animation = StaggeredFadeAndSlide\nconst items = [\n  { id: 'res-1', modelName: 'Result', name: 'Product 1' },\n  { id: 'res-2', modelName: 'Result', name: 'Product 2' },\n]\nfunction setColumns(columns) {\n  x.emit('UserClickedColumnPicker', columns)\n}\n</script>\n```\n\n### Playing with props\n\nConfiguring the default columns to be rendered. These columns will be the default value until the\n`ColumnsNumberProvided` is emitted and changes the value.\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(5)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">5 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\" :columns=\"3\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\nimport { use$x } from '@empathyco/x-components'\n\nconst x = use$x()\nconst animation = StaggeredFadeAndSlide\nconst items = [\n  { id: 'res-1', modelName: 'Result', name: 'Product 1' },\n  { id: 'res-2', modelName: 'Result', name: 'Product 2' },\n]\nfunction setColumns(columns) {\n  x.emit('UserClickedColumnPicker', columns)\n}\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseVariableColumnGrid\n    :animation=\"animation\"\n    :items=\"items\"\n    style=\"--x-size-min-width-grid-item: 150px\"\n  >\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseVariableColumnGrid>\n</template>\n\n<script setup>\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst animation = StaggeredFadeAndSlide\nconst items = [\n  { id: 'res-1', modelName: 'Result', name: 'Product 1' },\n  { id: 'res-2', modelName: 'Result', name: 'Product 2' },\n]\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAqBA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;AAC9B,IAAA,UAAU,EAAE;QACV,QAAQ;AACT,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;;;AAME;AACF,QAAA,KAAK,EAAE,KAA6B;AACpC;;;;;AAKE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,GAAE,GAAI,OAAO,EAAC;AACpB;;;;AAIE;AACF,QAAA,MAAM,eAAc,GAAI,GAAG,CAAgB,IAAI,CAAA;AAE/C;;;;;;AAME;QACF,MAAM,eAAc,GAAI,QAAQ,CAAC,MAC/B,eAAe,CAAC,KAAI,KAAM,IAAG,GAAI,KAAK,CAAC,OAAM,GAAI,eAAe,CAAC,KAAK,CACxE;AAEA;;;;;;AAME;QACF;AACG,aAAA,EAAE,CAAC,uBAAuB,EAAE,KAAK;AACjC,aAAA,SAAS,CAAC,UAAS,KAAM,eAAe,CAAC,KAAI,GAAI,UAAU,CAAC,CAAA;QAE/D,OAAO;YACL,eAAe;YACf,KAAK;SACP;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-variable-column-grid.vue2.js","sources":["../../../src/components/base-variable-column-grid.vue"],"sourcesContent":["<template>\n  <BaseGrid :animation=\"animation\" :columns=\"columnsToRender\" :items=\"items\">\n    <template v-for=\"(_, name) in slots\" #[name]=\"{ item }\">\n      <!--\n        @slot Customized item rendering. The slot name can either be default or the item's model\n         name.\n            @binding {GridItem} item - Item to render.\n      -->\n      <slot :name=\"name\" v-bind=\"{ item }\" />\n    </template>\n  </BaseGrid>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport BaseGrid from './base-grid.vue'\n\n/**\n * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n * selected number of columns to the grid. It also allows to customize the grid items using the\n * available `scopedSlots`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseVariableColumnGrid',\n  components: {\n    BaseGrid,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the grid.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an id property.\n     *\n     * @public\n     */\n    items: Array as PropType<ListItem[]>,\n    /**\n     * The columns to render by default in the grid. This property is used when the user has not\n     * selected any value in the column picker.\n     *\n     * @internal\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n  },\n  setup(props, { slots }) {\n    const bus = useXBus()\n    /**\n     * The number of columns provided by a user interaction.\n     *\n     * @internal\n     */\n    const providedColumns = ref<number | null>(null)\n\n    /**\n     * The number of columns to render in the grid.\n     *\n     * @returns The number of columns.\n     *\n     * @internal\n     */\n    const columnsToRender = computed(() =>\n      providedColumns.value === null ? props.columns : providedColumns.value,\n    )\n\n    /**\n     * Handler to update the number of columns when the user selects a new value.\n     *\n     * @param newColumns - The new columns value.\n     *\n     * @internal\n     */\n    bus\n      .on('ColumnsNumberProvided', false)\n      .subscribe(newColumns => (providedColumns.value = newColumns))\n\n    return {\n      columnsToRender,\n      slots,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the\n`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows\nyou to customize the grid items using the available slots.\n\n### Basic example\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(4)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">4 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\nimport { use$x } from '../../composables'\n\nconst x = use$x()\nconst animation = StaggeredFadeAndSlide\nconst items = [\n  { id: 'res-1', modelName: 'Result', name: 'Product 1' },\n  { id: 'res-2', modelName: 'Result', name: 'Product 2' },\n]\nfunction setColumns(columns) {\n  x.emit('UserClickedColumnPicker', columns)\n}\n</script>\n```\n\n### Playing with props\n\nConfiguring the default columns to be rendered. These columns will be the default value until the\n`ColumnsNumberProvided` is emitted and changes the value.\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(5)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">5 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\" :columns=\"3\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\nimport { use$x } from '@empathyco/x-components'\n\nconst x = use$x()\nconst animation = StaggeredFadeAndSlide\nconst items = [\n  { id: 'res-1', modelName: 'Result', name: 'Product 1' },\n  { id: 'res-2', modelName: 'Result', name: 'Product 2' },\n]\nfunction setColumns(columns) {\n  x.emit('UserClickedColumnPicker', columns)\n}\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseVariableColumnGrid\n    :animation=\"animation\"\n    :items=\"items\"\n    style=\"--x-size-min-width-grid-item: 150px\"\n  >\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseVariableColumnGrid>\n</template>\n\n<script setup>\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst animation = StaggeredFadeAndSlide\nconst items = [\n  { id: 'res-1', modelName: 'Result', name: 'Product 1' },\n  { id: 'res-2', modelName: 'Result', name: 'Product 2' },\n]\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAqBA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;AAC9B,IAAA,UAAU,EAAE;QACV,QAAQ;AACT,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;;;AAME;AACF,QAAA,KAAK,EAAE,KAA6B;AACpC;;;;;AAKE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,GAAE,GAAI,OAAO,EAAC;AACpB;;;;AAIE;AACF,QAAA,MAAM,eAAc,GAAI,GAAG,CAAgB,IAAI,CAAA;AAE/C;;;;;;AAME;QACF,MAAM,eAAc,GAAI,QAAQ,CAAC,MAC/B,eAAe,CAAC,KAAI,KAAM,IAAG,GAAI,KAAK,CAAC,OAAM,GAAI,eAAe,CAAC,KAAK,CACxE;AAEA;;;;;;AAME;QACF;AACG,aAAA,EAAE,CAAC,uBAAuB,EAAE,KAAK;AACjC,aAAA,SAAS,CAAC,UAAS,KAAM,eAAe,CAAC,KAAI,GAAI,UAAU,CAAC,CAAA;QAE/D,OAAO;YACL,eAAe;YACf,KAAK;SACP;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/column-picker/base-column-picker-dropdown.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './base-column-picker-dropdown2.vue.js';
+import _sfc_main from './base-column-picker-dropdown.vue2.js';
 import { resolveComponent, openBlock, createBlock, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 

package/js/components/column-picker/{base-column-picker-dropdown2.vue.js → base-column-picker-dropdown.vue2.js}

@@ -85,4 +85,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-column-picker-dropdown2.vue.js.map
+//# sourceMappingURL=base-column-picker-dropdown.vue2.js.map

package/js/components/column-picker/{base-column-picker-dropdown2.vue.js.map → base-column-picker-dropdown.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-dropdown2.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    :model-value=\"selectedColumns\"\n    :items=\"columns\"\n    :animation=\"animation\"\n    aria-label=\"Select number of columns\"\n    @update:model-value=\"emitEvents\"\n  >\n    <template v-if=\"hasToggleSlot\" #toggle=\"{ item, isOpen }\">\n      <!--\n       @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n       button. If not provided, it uses the `item` slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n       closed.\n      -->\n      <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n    </template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <!--\n       @slot (required) From `BaseDropdown` component: Used to render each one of the items\n       content, and as fallback for the toggle button content slot if it is not provided.\n       @binding {string|number|Identifiable} item - Item to render\n       @binding {boolean} isHighlighted - True when the item has the focus.\n       @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Component, PropType } from 'vue'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseDropdown from '../base-dropdown.vue'\n\n/**\n * Column picker dropdown component renders {@link BaseDropdown} component which\n * options are the different columns you can set for a grid.\n *\n * It emits {@link XEventsTypes.UserClickedColumnPicker} on dropdown\n * input.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseColumnPickerDropdown',\n  components: { BaseDropdown },\n  props: {\n    /** An array of numbers that represents the number of columns to render. */\n    columns: {\n      type: Array as PropType<number[]>,\n      required: true,\n    },\n    /** The value of the selected columns number. */\n    modelValue: Number,\n    /** The transition to use for opening and closing the dropdown. */\n    animation: [String, Object] as PropType<string | Component>,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const $x = use$x()\n\n    const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0])\n    const selectedColumns = ref(providedSelectedColumns.value)\n\n    /**\n     * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n     *\n     * @param column - Column number provided.\n     */\n    function emitColumnsNumberProvided(column: number) {\n      selectedColumns.value = column\n      $x.emit('ColumnsNumberProvided', column)\n    }\n\n    /**\n     * Emits `update:modelValue` with the column selected.\n     *\n     * @param column - Column number selected.\n     */\n    function emitUpdateModelValue(column: number) {\n      if (props.modelValue !== column) {\n        emit('update:modelValue', column)\n      }\n    }\n\n    watch(providedSelectedColumns, emitColumnsNumberProvided)\n    watch(selectedColumns, emitUpdateModelValue)\n\n    $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column))\n\n    /**\n     * Synchronizes the columns number before mounting the component. If the real number of selected\n     * columns equals the provided columns, it emits the event to sync it with every other component.\n     * If it is not equal it means that the user has already selected a number of columns, so we emit\n     * a `update:modelValue` event so developers can sync the provided value.\n     */\n    onBeforeMount(() => {\n      if (selectedColumns.value === providedSelectedColumns.value) {\n        emitColumnsNumberProvided(selectedColumns.value)\n      } else {\n        emitUpdateModelValue(selectedColumns.value)\n      }\n    })\n\n    /**\n     * Emits a {@link XEventsTypes.UserClickedColumnPicker} and\n     * {@link XEventsTypes.ColumnsNumberProvided} events.\n     *\n     * @param column - Column number payload.\n     */\n    function emitEvents(column: number) {\n      $x.emit('UserClickedColumnPicker', column)\n      $x.emit('ColumnsNumberProvided', column)\n    }\n\n    return {\n      emitEvents,\n      hasToggleSlot: !!slots.toggle,\n      selectedColumns,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item in the dropdown. The event payload is the\n  number of columns that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount, and whenever the value changes. The event payload is the\n  current `selectedColumns` value.\n\n## Examples\n\nColumn picker dropdown component renders a dropdown component which options are the different\ncolumns you can set for a grid.\n\n### Usage\n\nNotice that the slots provided match with the `BaseDropdown` component. The `item` slot is required\nunlike the `toggle`, which renders the same `item` slot defined by default.\n\n#### Default usage\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n\nconst selectedColumns = ref(2)\n</script>\n```\n\n#### Customizing toggle button\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n\nconst selectedColumns = ref(2)\n</script>\n```\n\n#### Using it without v-model / value\n\nThe component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to\nthat event from outside, so you don't need to store the current column value to keep it synchronized\nwith other column pickers.\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAqCA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,UAAU,EAAE,MAAM;;AAElB,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AAC5D,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAI,EAAG,EAAA;AAC1B,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAS,IAAK,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QACnF,MAAM,eAAc,GAAI,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAA;AAEzD;;;;AAIE;QACF,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAI,GAAI,MAAK;AAC7B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA;QACzC;AAEA;;;;AAIE;QACF,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAS,KAAM,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAA;YAClC;QACF;AAEA,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAA;AACxD,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAA;QAE3C,EAAE,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAK,KAAM,eAAe,CAAC,KAAI,GAAI,MAAM,CAAC,CAAA;AAE1F;;;;;AAKE;QACF,aAAa,CAAC,MAAI;YAChB,IAAI,eAAe,CAAC,KAAI,KAAM,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAA;YACjD;iBAAO;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAA;YAC5C;AACF,QAAA,CAAC,CAAA;AAED;;;;;AAKE;QACF,SAAS,UAAU,CAAC,MAAc,EAAA;AAChC,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAA;AACzC,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA;QACzC;QAEA,OAAO;YACL,UAAU;AACV,YAAA,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YAC7B,eAAe;SACjB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-column-picker-dropdown.vue2.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    :model-value=\"selectedColumns\"\n    :items=\"columns\"\n    :animation=\"animation\"\n    aria-label=\"Select number of columns\"\n    @update:model-value=\"emitEvents\"\n  >\n    <template v-if=\"hasToggleSlot\" #toggle=\"{ item, isOpen }\">\n      <!--\n       @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n       button. If not provided, it uses the `item` slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n       closed.\n      -->\n      <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n    </template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <!--\n       @slot (required) From `BaseDropdown` component: Used to render each one of the items\n       content, and as fallback for the toggle button content slot if it is not provided.\n       @binding {string|number|Identifiable} item - Item to render\n       @binding {boolean} isHighlighted - True when the item has the focus.\n       @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Component, PropType } from 'vue'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseDropdown from '../base-dropdown.vue'\n\n/**\n * Column picker dropdown component renders {@link BaseDropdown} component which\n * options are the different columns you can set for a grid.\n *\n * It emits {@link XEventsTypes.UserClickedColumnPicker} on dropdown\n * input.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseColumnPickerDropdown',\n  components: { BaseDropdown },\n  props: {\n    /** An array of numbers that represents the number of columns to render. */\n    columns: {\n      type: Array as PropType<number[]>,\n      required: true,\n    },\n    /** The value of the selected columns number. */\n    modelValue: Number,\n    /** The transition to use for opening and closing the dropdown. */\n    animation: [String, Object] as PropType<string | Component>,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const $x = use$x()\n\n    const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0])\n    const selectedColumns = ref(providedSelectedColumns.value)\n\n    /**\n     * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n     *\n     * @param column - Column number provided.\n     */\n    function emitColumnsNumberProvided(column: number) {\n      selectedColumns.value = column\n      $x.emit('ColumnsNumberProvided', column)\n    }\n\n    /**\n     * Emits `update:modelValue` with the column selected.\n     *\n     * @param column - Column number selected.\n     */\n    function emitUpdateModelValue(column: number) {\n      if (props.modelValue !== column) {\n        emit('update:modelValue', column)\n      }\n    }\n\n    watch(providedSelectedColumns, emitColumnsNumberProvided)\n    watch(selectedColumns, emitUpdateModelValue)\n\n    $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column))\n\n    /**\n     * Synchronizes the columns number before mounting the component. If the real number of selected\n     * columns equals the provided columns, it emits the event to sync it with every other component.\n     * If it is not equal it means that the user has already selected a number of columns, so we emit\n     * a `update:modelValue` event so developers can sync the provided value.\n     */\n    onBeforeMount(() => {\n      if (selectedColumns.value === providedSelectedColumns.value) {\n        emitColumnsNumberProvided(selectedColumns.value)\n      } else {\n        emitUpdateModelValue(selectedColumns.value)\n      }\n    })\n\n    /**\n     * Emits a {@link XEventsTypes.UserClickedColumnPicker} and\n     * {@link XEventsTypes.ColumnsNumberProvided} events.\n     *\n     * @param column - Column number payload.\n     */\n    function emitEvents(column: number) {\n      $x.emit('UserClickedColumnPicker', column)\n      $x.emit('ColumnsNumberProvided', column)\n    }\n\n    return {\n      emitEvents,\n      hasToggleSlot: !!slots.toggle,\n      selectedColumns,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item in the dropdown. The event payload is the\n  number of columns that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount, and whenever the value changes. The event payload is the\n  current `selectedColumns` value.\n\n## Examples\n\nColumn picker dropdown component renders a dropdown component which options are the different\ncolumns you can set for a grid.\n\n### Usage\n\nNotice that the slots provided match with the `BaseDropdown` component. The `item` slot is required\nunlike the `toggle`, which renders the same `item` slot defined by default.\n\n#### Default usage\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n\nconst selectedColumns = ref(2)\n</script>\n```\n\n#### Customizing toggle button\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n\nconst selectedColumns = ref(2)\n</script>\n```\n\n#### Using it without v-model / value\n\nThe component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to\nthat event from outside, so you don't need to store the current column value to keep it synchronized\nwith other column pickers.\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAqCA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,UAAU,EAAE,MAAM;;AAElB,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AAC5D,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAI,EAAG,EAAA;AAC1B,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAS,IAAK,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QACnF,MAAM,eAAc,GAAI,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAA;AAEzD;;;;AAIE;QACF,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAI,GAAI,MAAK;AAC7B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA;QACzC;AAEA;;;;AAIE;QACF,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAS,KAAM,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAA;YAClC;QACF;AAEA,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAA;AACxD,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAA;QAE3C,EAAE,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAK,KAAM,eAAe,CAAC,KAAI,GAAI,MAAM,CAAC,CAAA;AAE1F;;;;;AAKE;QACF,aAAa,CAAC,MAAI;YAChB,IAAI,eAAe,CAAC,KAAI,KAAM,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAA;YACjD;iBAAO;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAA;YAC5C;AACF,QAAA,CAAC,CAAA;AAED;;;;;AAKE;QACF,SAAS,UAAU,CAAC,MAAc,EAAA;AAChC,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAA;AACzC,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA;QACzC;QAEA,OAAO;YACL,UAAU;AACV,YAAA,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YAC7B,eAAe;SACjB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/column-picker/base-column-picker-list.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './base-column-picker-list2.vue.js';
+import _sfc_main from './base-column-picker-list.vue2.js';
 import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createVNode, normalizeClass, withCtx, renderSlot, mergeProps, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 

package/js/components/column-picker/{base-column-picker-list2.vue.js → base-column-picker-list.vue2.js}

@@ -87,4 +87,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-column-picker-list2.vue.js.map
+//# sourceMappingURL=base-column-picker-list.vue2.js.map

package/js/components/column-picker/{base-column-picker-list2.vue.js.map → base-column-picker-list.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list2.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list xds:button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button xds:button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseEventButton from '../base-event-button.vue'\n\nexport interface ColumnPickerItem {\n  column: number\n  cssClasses: VueCSSClasses\n  events: Partial<XEventsTypes>\n  isSelected: boolean\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseColumnPickerList',\n  components: { BaseEventButton },\n  props: {\n    /** An array of numbers that represents the number of columns to render. */\n    columns: {\n      type: Array as PropType<number[]>,\n      required: true,\n    },\n    /** The value of the selected columns number. */\n    modelValue: Number,\n    /** Class inherited by each button. */\n    buttonClass: String,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    const $x = use$x()\n\n    const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0])\n    const selectedColumns = ref(providedSelectedColumns.value)\n\n    /**\n     * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n     *\n     * @param column - Column number provided.\n     */\n    function emitColumnsNumberProvided(column: number) {\n      selectedColumns.value = column\n      $x.emit('ColumnsNumberProvided', column)\n    }\n\n    /**\n     * Emits `update:modelValue` with the column selected.\n     *\n     * @param column - Column number selected.\n     */\n    function emitUpdateModelValue(column: number) {\n      if (props.modelValue !== column) {\n        emit('update:modelValue', column)\n      }\n    }\n\n    watch(providedSelectedColumns, emitColumnsNumberProvided)\n    watch(selectedColumns, emitUpdateModelValue)\n\n    $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column))\n\n    /**\n     * Synchronizes the columns number before mounting the component. If the real number of selected\n     * columns equals the provided columns, it emits the event to sync it with every other component.\n     * If it is not equal it means that the user has already selected a number of columns, so we emit\n     * a `update:modelValue` event so developers can sync the provided value.\n     */\n    onBeforeMount(() => {\n      if (selectedColumns.value === providedSelectedColumns.value) {\n        emitColumnsNumberProvided(selectedColumns.value)\n      } else {\n        emitUpdateModelValue(selectedColumns.value)\n      }\n    })\n\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     */\n    const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n      props.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__button--${column}-cols`,\n          { 'xds:selected': selectedColumns.value === column },\n        ],\n        isSelected: selectedColumns.value === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column,\n        },\n      })),\n    )\n\n    return { columnsWithCssClasses }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nbutton emits the needed events to sync other instances of column pickers or grids with the\nnumber of columns being selected when clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n### Using v-model\n\nIt is possible to do two-way binding in order to synchronize the value with the parent. It will be\nupdated if the value changes or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\nconst selectedColumns = ref(4)\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #default=\"{ column, isSelected }\">\n      <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n    </template>\n  </BaseColumnPickerList>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\nimport ChevronRightIcon from '@empathyco/x-components/js/components/icons/chevron-right.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"xds:button-circle\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item. The event payload is the number of columns\n  that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;AAkDA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,UAAU,EAAE,MAAM;;AAElB,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAS,IAAK,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QACnF,MAAM,eAAc,GAAI,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAA;AAEzD;;;;AAIE;QACF,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAI,GAAI,MAAK;AAC7B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA;QACzC;AAEA;;;;AAIE;QACF,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAS,KAAM,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAA;YAClC;QACF;AAEA,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAA;AACxD,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAA;QAE3C,EAAE,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAK,KAAM,eAAe,CAAC,KAAI,GAAI,MAAM,CAAC,CAAA;AAE1F;;;;;AAKE;QACF,aAAa,CAAC,MAAI;YAChB,IAAI,eAAe,CAAC,KAAI,KAAM,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAA;YACjD;iBAAO;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAA;YAC5C;AACF,QAAA,CAAC,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,qBAAoB,GAAI,QAAQ,CAAqB,MACzD,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAK,KAAM;YAC3B,MAAM;AACN,YAAA,UAAU,EAAE;AACV,gBAAA,CAAA,8BAAA,EAAiC,MAAM,CAAA,KAAA,CAAO;AAC9C,gBAAA,EAAE,cAAc,EAAE,eAAe,CAAC,KAAI,KAAM,MAAK,EAAG;AACrD,aAAA;AACD,YAAA,UAAU,EAAE,eAAe,CAAC,KAAI,KAAM,MAAM;AAC5C,YAAA,MAAM,EAAE;AACN,gBAAA,uBAAuB,EAAE,MAAM;AAC/B,gBAAA,qBAAqB,EAAE,MAAM;AAC9B,aAAA;SACF,CAAC,CAAC,CACL;QAEA,OAAO,EAAE,qBAAoB,EAAE;IACjC,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-column-picker-list.vue2.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list xds:button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button xds:button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseEventButton from '../base-event-button.vue'\n\nexport interface ColumnPickerItem {\n  column: number\n  cssClasses: VueCSSClasses\n  events: Partial<XEventsTypes>\n  isSelected: boolean\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseColumnPickerList',\n  components: { BaseEventButton },\n  props: {\n    /** An array of numbers that represents the number of columns to render. */\n    columns: {\n      type: Array as PropType<number[]>,\n      required: true,\n    },\n    /** The value of the selected columns number. */\n    modelValue: Number,\n    /** Class inherited by each button. */\n    buttonClass: String,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    const $x = use$x()\n\n    const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0])\n    const selectedColumns = ref(providedSelectedColumns.value)\n\n    /**\n     * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n     *\n     * @param column - Column number provided.\n     */\n    function emitColumnsNumberProvided(column: number) {\n      selectedColumns.value = column\n      $x.emit('ColumnsNumberProvided', column)\n    }\n\n    /**\n     * Emits `update:modelValue` with the column selected.\n     *\n     * @param column - Column number selected.\n     */\n    function emitUpdateModelValue(column: number) {\n      if (props.modelValue !== column) {\n        emit('update:modelValue', column)\n      }\n    }\n\n    watch(providedSelectedColumns, emitColumnsNumberProvided)\n    watch(selectedColumns, emitUpdateModelValue)\n\n    $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column))\n\n    /**\n     * Synchronizes the columns number before mounting the component. If the real number of selected\n     * columns equals the provided columns, it emits the event to sync it with every other component.\n     * If it is not equal it means that the user has already selected a number of columns, so we emit\n     * a `update:modelValue` event so developers can sync the provided value.\n     */\n    onBeforeMount(() => {\n      if (selectedColumns.value === providedSelectedColumns.value) {\n        emitColumnsNumberProvided(selectedColumns.value)\n      } else {\n        emitUpdateModelValue(selectedColumns.value)\n      }\n    })\n\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     */\n    const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n      props.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__button--${column}-cols`,\n          { 'xds:selected': selectedColumns.value === column },\n        ],\n        isSelected: selectedColumns.value === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column,\n        },\n      })),\n    )\n\n    return { columnsWithCssClasses }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nbutton emits the needed events to sync other instances of column pickers or grids with the\nnumber of columns being selected when clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n### Using v-model\n\nIt is possible to do two-way binding in order to synchronize the value with the parent. It will be\nupdated if the value changes or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\nconst selectedColumns = ref(4)\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #default=\"{ column, isSelected }\">\n      <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n    </template>\n  </BaseColumnPickerList>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\nimport ChevronRightIcon from '@empathyco/x-components/js/components/icons/chevron-right.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"xds:button-circle\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item. The event payload is the number of columns\n  that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;AAkDA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,UAAU,EAAE,MAAM;;AAElB,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAS,IAAK,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QACnF,MAAM,eAAc,GAAI,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAA;AAEzD;;;;AAIE;QACF,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAI,GAAI,MAAK;AAC7B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA;QACzC;AAEA;;;;AAIE;QACF,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAS,KAAM,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAA;YAClC;QACF;AAEA,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAA;AACxD,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAA;QAE3C,EAAE,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAK,KAAM,eAAe,CAAC,KAAI,GAAI,MAAM,CAAC,CAAA;AAE1F;;;;;AAKE;QACF,aAAa,CAAC,MAAI;YAChB,IAAI,eAAe,CAAC,KAAI,KAAM,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAA;YACjD;iBAAO;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAA;YAC5C;AACF,QAAA,CAAC,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,qBAAoB,GAAI,QAAQ,CAAqB,MACzD,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAK,KAAM;YAC3B,MAAM;AACN,YAAA,UAAU,EAAE;AACV,gBAAA,CAAA,8BAAA,EAAiC,MAAM,CAAA,KAAA,CAAO;AAC9C,gBAAA,EAAE,cAAc,EAAE,eAAe,CAAC,KAAI,KAAM,MAAK,EAAG;AACrD,aAAA;AACD,YAAA,UAAU,EAAE,eAAe,CAAC,KAAI,KAAM,MAAM;AAC5C,YAAA,MAAM,EAAE;AACN,gBAAA,uBAAuB,EAAE,MAAM;AAC/B,gBAAA,qBAAqB,EAAE,MAAM;AAC9B,aAAA;SACF,CAAC,CAAC,CACL;QAEA,OAAO,EAAE,qBAAoB,EAAE;IACjC,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,4 +1,4 @@
-import _sfc_main from './base-currency2.vue.js';
+import _sfc_main from './base-currency.vue2.js';
 import { openBlock, createElementBlock, toDisplayString } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 

package/js/components/currency/{base-currency2.vue.js → base-currency.vue2.js}

@@ -49,4 +49,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-currency2.vue.js.map
+//# sourceMappingURL=base-currency.vue2.js.map

package/js/components/currency/{base-currency2.vue.js.map → base-currency.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-currency2.vue.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span class=\"x-currency\">{{ currencyText }}</span>\n</template>\n\n<script lang=\"ts\">\nimport type { SnippetConfig } from '@x/x-installer'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\n\nexport default defineComponent({\n  props: {\n    /**\n     * Numeric value to be formatted.\n     *\n     * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n     * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n     *\n     * @public\n     */\n    value: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The ISO 4217 currency value. If not specified we use snippetConfig.currency\n     *\n     * @public\n     */\n    currency: String,\n    /**\n     * The currency format possibilities from Intl.NumberFormatOptions.\n     * Allows customization of decimal places, grouping, etc.\n     * Note: 'currency' and 'style' options are managed internally.\n     *\n     * @public\n     */\n    format: {\n      type: Object as PropType<Omit<Intl.NumberFormatOptions, 'currency' | 'style'>>,\n      default: () => ({}),\n    },\n  },\n\n  setup(props) {\n    const snippetConfig = inject<SnippetConfig>('snippetConfig')\n\n    const currencyText = computed<string>(() => {\n      const currency = props.currency ?? snippetConfig?.currency ?? 'EUR'\n      return Intl.NumberFormat(snippetConfig?.uiLang, {\n        style: 'currency',\n        ...props.format,\n        currency,\n      }).format(props.value)\n    })\n\n    return {\n      currencyText,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders the value received as a property, which always must be a JavaScript number, formatted\nusing the Intl.NumberFormat API with ISO 4217 currency codes. The rendered tag is a span in order\nto render a default inline HTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" currency=\"EUR\" />\n  <!-- output depends on locale, e.g., '12.345.678,88 €' for es-ES -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Customizing decimal places\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"12345678.87654321\"\n    currency=\"USD\"\n    :format=\"{ minimumFractionDigits: 3, maximumFractionDigits: 3 }\"\n  />\n  <!-- output: '$12,345,678.877' for en-US locale -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### No decimal places\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"12345678.87\"\n    currency=\"EUR\"\n    :format=\"{ minimumFractionDigits: 0, maximumFractionDigits: 0 }\"\n  />\n  <!-- output: '12.345.679 €' for es-ES locale (rounds up) -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Using different currencies\n\n```vue\n<template>\n  <div>\n    <BaseCurrency :value=\"1234.56\" currency=\"USD\" />\n    <!-- output: '$1,234.56' for en-US -->\n    <BaseCurrency :value=\"1234.56\" currency=\"EUR\" />\n    <!-- output: '1.234,56 €' for es-ES -->\n    <BaseCurrency :value=\"1234.56\" currency=\"GBP\" />\n    <!-- output: '£1,234.56' for en-GB -->\n    <BaseCurrency :value=\"1234.56\" currency=\"JPY\" />\n    <!-- output: '¥1,235' for ja-JP -->\n  </div>\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Advanced formatting options\n\nYou can pass any valid Intl.NumberFormatOptions (except 'currency' and 'style' which are managed\ninternally):\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"1234567.89\"\n    currency=\"EUR\"\n    :format=\"{\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 4,\n      useGrouping: true,\n    }\"\n  />\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AASA,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;;;;AAOE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;;;AAME;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAwE;AAC9E,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAY,GAAI,MAAM,CAAgB,eAAe,CAAA;AAE3D,QAAA,MAAM,eAAe,QAAQ,CAAS,MAAI;YACxC,MAAM,QAAO,GAAI,KAAK,CAAC,QAAO,IAAK,aAAa,EAAE,QAAO,IAAK,KAAI;AAClE,YAAA,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE;AAC9C,gBAAA,KAAK,EAAE,UAAU;gBACjB,GAAG,KAAK,CAAC,MAAM;gBACf,QAAQ;AACT,aAAA,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAA;AACvB,QAAA,CAAC,CAAA;QAED,OAAO;YACL,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-currency.vue2.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span class=\"x-currency\">{{ currencyText }}</span>\n</template>\n\n<script lang=\"ts\">\nimport type { SnippetConfig } from '@x/x-installer'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\n\nexport default defineComponent({\n  props: {\n    /**\n     * Numeric value to be formatted.\n     *\n     * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n     * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n     *\n     * @public\n     */\n    value: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The ISO 4217 currency value. If not specified we use snippetConfig.currency\n     *\n     * @public\n     */\n    currency: String,\n    /**\n     * The currency format possibilities from Intl.NumberFormatOptions.\n     * Allows customization of decimal places, grouping, etc.\n     * Note: 'currency' and 'style' options are managed internally.\n     *\n     * @public\n     */\n    format: {\n      type: Object as PropType<Omit<Intl.NumberFormatOptions, 'currency' | 'style'>>,\n      default: () => ({}),\n    },\n  },\n\n  setup(props) {\n    const snippetConfig = inject<SnippetConfig>('snippetConfig')\n\n    const currencyText = computed<string>(() => {\n      const currency = props.currency ?? snippetConfig?.currency ?? 'EUR'\n      return Intl.NumberFormat(snippetConfig?.uiLang, {\n        style: 'currency',\n        ...props.format,\n        currency,\n      }).format(props.value)\n    })\n\n    return {\n      currencyText,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders the value received as a property, which always must be a JavaScript number, formatted\nusing the Intl.NumberFormat API with ISO 4217 currency codes. The rendered tag is a span in order\nto render a default inline HTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" currency=\"EUR\" />\n  <!-- output depends on locale, e.g., '12.345.678,88 €' for es-ES -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Customizing decimal places\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"12345678.87654321\"\n    currency=\"USD\"\n    :format=\"{ minimumFractionDigits: 3, maximumFractionDigits: 3 }\"\n  />\n  <!-- output: '$12,345,678.877' for en-US locale -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### No decimal places\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"12345678.87\"\n    currency=\"EUR\"\n    :format=\"{ minimumFractionDigits: 0, maximumFractionDigits: 0 }\"\n  />\n  <!-- output: '12.345.679 €' for es-ES locale (rounds up) -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Using different currencies\n\n```vue\n<template>\n  <div>\n    <BaseCurrency :value=\"1234.56\" currency=\"USD\" />\n    <!-- output: '$1,234.56' for en-US -->\n    <BaseCurrency :value=\"1234.56\" currency=\"EUR\" />\n    <!-- output: '1.234,56 €' for es-ES -->\n    <BaseCurrency :value=\"1234.56\" currency=\"GBP\" />\n    <!-- output: '£1,234.56' for en-GB -->\n    <BaseCurrency :value=\"1234.56\" currency=\"JPY\" />\n    <!-- output: '¥1,235' for ja-JP -->\n  </div>\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Advanced formatting options\n\nYou can pass any valid Intl.NumberFormatOptions (except 'currency' and 'style' which are managed\ninternally):\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"1234567.89\"\n    currency=\"EUR\"\n    :format=\"{\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 4,\n      useGrouping: true,\n    }\"\n  />\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AASA,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;;;;AAOE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;;;AAME;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAwE;AAC9E,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAY,GAAI,MAAM,CAAgB,eAAe,CAAA;AAE3D,QAAA,MAAM,eAAe,QAAQ,CAAS,MAAI;YACxC,MAAM,QAAO,GAAI,KAAK,CAAC,QAAO,IAAK,aAAa,EAAE,QAAO,IAAK,KAAI;AAClE,YAAA,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE;AAC9C,gBAAA,KAAK,EAAE,UAAU;gBACjB,GAAG,KAAK,CAAC,MAAM;gBACf,QAAQ;AACT,aAAA,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAA;AACvB,QAAA,CAAC,CAAA;QAED,OAAO;YACL,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/{display-click-provider2.vue.js → display-click-provider.vue2.js}

@@ -3,4 +3,4 @@ import _sfc_main from './display-click-provider.vue.js';
 
 
 export { _sfc_main as default };
-//# sourceMappingURL=display-click-provider2.vue.js.map
+//# sourceMappingURL=display-click-provider.vue2.js.map

package/js/components/display-click-provider.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-click-provider.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/components/{display-emitter2.vue.js → display-emitter.vue2.js}

@@ -3,4 +3,4 @@ import _sfc_main from './display-emitter.vue.js';
 
 
 export { _sfc_main as default };
-//# sourceMappingURL=display-emitter2.vue.js.map
+//# sourceMappingURL=display-emitter.vue2.js.map

package/js/components/display-emitter.vue2.js.map

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

package/js/components/filters/labels/{base-price-filter-label2.vue.js → base-price-filter-label.vue2.js}

@@ -3,4 +3,4 @@ import _sfc_main from './base-price-filter-label.vue.js';
 
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-price-filter-label2.vue.js.map
+//# sourceMappingURL=base-price-filter-label.vue2.js.map

package/js/components/filters/labels/base-price-filter-label.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-price-filter-label.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/components/filters/labels/base-rating-filter-label.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './base-rating-filter-label2.vue.js';
+import _sfc_main from './base-rating-filter-label.vue2.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/components/filters/labels/{base-rating-filter-label2.vue.js → base-rating-filter-label.vue2.js}

@@ -50,4 +50,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-rating-filter-label2.vue.js.map
+//# sourceMappingURL=base-rating-filter-label.vue2.js.map

package/js/components/filters/labels/{base-rating-filter-label2.vue.js.map → base-rating-filter-label.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-rating-filter-label2.vue.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseRating from '../../base-rating.vue'\n\n/**\n * Renders a label for a rating filter, allowing to override the elements used to paint\n * the rating.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseRating,\n  },\n  props: {\n    /**\n     * The filter data to render.\n     *\n     * @public\n     */\n    filter: {\n      type: Object as PropType<BooleanFilter>,\n      required: true,\n    },\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    max: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Converts the label string into a number.\n     *\n     * @returns The label as number or 0 if it is not a valid number.\n     *\n     * @internal\n     */\n    const value = computed<number>(() => {\n      const x = Number.parseFloat(props.filter.label) ?? 0\n      return Number.isNaN(x) ? 0 : x\n    })\n\n    return {\n      value,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<template>\n  <BaseRatingFilterLabel :filter=\"filter\" />\n</template>\n\n<script setup>\nimport BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'\nimport { ref } from 'vue'\nconst filter = ref({\n  label: '3',\n  selected: false,\n  id: 'rating-3',\n  modelName: 'BooleanFilter',\n})\n</script>\n```\n\n### Customizing color\n\nIt is possible to change the default color directly with the color CSS attribute. For more elaborate\nstyles, you can style the inner svg icons.\n\n```vue\n<template>\n  <BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n</template>\n\n<script setup>\nimport BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'\nimport { ref } from 'vue'\nconst filter = ref({\n  label: '4.5',\n  selected: false,\n  id: 'rating-4.5',\n  modelName: 'BooleanFilter',\n})\n</script>\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as this `max` value.\n\n```vue\n<template>\n  <BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n</template>\n\n<script setup>\nimport BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'\nimport { ref } from 'vue'\nconst filter = ref({\n  label: '2.5',\n  selected: false,\n  id: 'rating-2.5',\n  modelName: 'BooleanFilter',\n})\nconst max = 7\n</script>\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` slots, to\nrepresent the filled and empty icons in the rating component.\n\n```vue\n<template>\n  <BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n    <template #rating-icon-filled>♥</template>\n    <template #rating-icon-empty>♡</template>\n  </BaseRatingFilterLabel>\n</template>\n\n<script setup>\nimport BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'\nimport { ref } from 'vue'\nconst filter = ref({\n  label: '5',\n  selected: false,\n  id: 'rating-5',\n  modelName: 'BooleanFilter',\n})\nconst max = 5\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAuBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAS,MAAI;AACjC,YAAA,MAAM,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA,IAAK,CAAA;AACnD,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA,GAAI,CAAA,GAAI,CAAA;AAC/B,QAAA,CAAC,CAAA;QAED,OAAO;YACL,KAAK;SACP;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-rating-filter-label.vue2.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseRating from '../../base-rating.vue'\n\n/**\n * Renders a label for a rating filter, allowing to override the elements used to paint\n * the rating.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseRating,\n  },\n  props: {\n    /**\n     * The filter data to render.\n     *\n     * @public\n     */\n    filter: {\n      type: Object as PropType<BooleanFilter>,\n      required: true,\n    },\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    max: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Converts the label string into a number.\n     *\n     * @returns The label as number or 0 if it is not a valid number.\n     *\n     * @internal\n     */\n    const value = computed<number>(() => {\n      const x = Number.parseFloat(props.filter.label) ?? 0\n      return Number.isNaN(x) ? 0 : x\n    })\n\n    return {\n      value,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<template>\n  <BaseRatingFilterLabel :filter=\"filter\" />\n</template>\n\n<script setup>\nimport BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'\nimport { ref } from 'vue'\nconst filter = ref({\n  label: '3',\n  selected: false,\n  id: 'rating-3',\n  modelName: 'BooleanFilter',\n})\n</script>\n```\n\n### Customizing color\n\nIt is possible to change the default color directly with the color CSS attribute. For more elaborate\nstyles, you can style the inner svg icons.\n\n```vue\n<template>\n  <BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n</template>\n\n<script setup>\nimport BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'\nimport { ref } from 'vue'\nconst filter = ref({\n  label: '4.5',\n  selected: false,\n  id: 'rating-4.5',\n  modelName: 'BooleanFilter',\n})\n</script>\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as this `max` value.\n\n```vue\n<template>\n  <BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n</template>\n\n<script setup>\nimport BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'\nimport { ref } from 'vue'\nconst filter = ref({\n  label: '2.5',\n  selected: false,\n  id: 'rating-2.5',\n  modelName: 'BooleanFilter',\n})\nconst max = 7\n</script>\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` slots, to\nrepresent the filled and empty icons in the rating component.\n\n```vue\n<template>\n  <BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n    <template #rating-icon-filled>♥</template>\n    <template #rating-icon-empty>♡</template>\n  </BaseRatingFilterLabel>\n</template>\n\n<script setup>\nimport BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'\nimport { ref } from 'vue'\nconst filter = ref({\n  label: '5',\n  selected: false,\n  id: 'rating-5',\n  modelName: 'BooleanFilter',\n})\nconst max = 5\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAuBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAS,MAAI;AACjC,YAAA,MAAM,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA,IAAK,CAAA;AACnD,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA,GAAI,CAAA,GAAI,CAAA;AAC/B,QAAA,CAAC,CAAA;QAED,OAAO;YACL,KAAK;SACP;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/{global-x-bus2.vue.js → global-x-bus.vue2.js}

@@ -3,4 +3,4 @@ import _sfc_main from './global-x-bus.vue.js';
 
 
 export { _sfc_main as default };
-//# sourceMappingURL=global-x-bus2.vue.js.map
+//# sourceMappingURL=global-x-bus.vue2.js.map

package/js/components/global-x-bus.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-x-bus.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/components/highlight.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './highlight2.vue.js';
+import _sfc_main from './highlight.vue2.js';
 import { openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 

package/js/components/{highlight2.vue.js → highlight.vue2.js}

@@ -120,4 +120,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=highlight2.vue.js.map
+//# sourceMappingURL=highlight.vue2.js.map

package/js/components/{highlight2.vue.js.map → highlight.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"highlight2.vue.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n      v-text=\"matchParts.start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      class=\"x-highlight__text xds:highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n      v-text=\"matchParts.match\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n      v-text=\"matchParts.end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { normalizeString } from '../utils'\n\n/**\n * Highlights the given part of the text. The component is smart enough to do matches\n * between special characters like tilde, cedilla, eñe, capital letters...\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Highlight',\n  props: {\n    /** The text to highlight some part of it. */\n    text: {\n      type: String,\n      default: '',\n    },\n    /** The part of the text to be highlighted. */\n    highlight: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the `text` string contains the `highlight` string. */\n    matchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n    noMatchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add to the matching text. */\n    matchingPartClass: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props, { slots }) {\n    /**\n     * Splits the label in three parts based on two indexes.\n     *\n     * @param label - The string that will be divided in three parts.\n     * @param start - The first index that the label will be divided by.\n     * @param end - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     */\n    function splitAt(label: string, start: number, end: number) {\n      return {\n        start: label.substring(0, start),\n        match: label.substring(start, end),\n        end: label.substring(end),\n      }\n    }\n\n    /**\n     * Splits the text to highlight into 3 parts: a starting part, the matching part\n     * and the ending part. If there is no match between the text and the highlight, the `start`\n     * property will contain the whole text.\n     *\n     * @returns An object containing the different parts of the text.\n     */\n    const matchParts = computed(() => {\n      const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight))\n      return matcherIndex !== -1 && props.highlight\n        ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n        : { start: props.text, match: '', end: '' }\n    })\n\n    /**\n     * Checks if the normalized suggestion query matches with the module's query, so it has a\n     * matching part.\n     *\n     * @returns True if there is a match between the text and the highlight strings.\n     */\n    const hasMatch = computed(() => !!matchParts.value.match)\n\n    /**\n     * CSS classes to add depending on the component state.\n     *\n     * @remarks\n     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n     * `[matchClass]`: When there is a match between the text and\n     * the part to highlight.\n     * `[noMatchClass]`: when there is no match between the text to highlight.\n     * @returns The CSS classes.\n     */\n    const dynamicCSSClasses = computed(() => {\n      const classes = {\n        'x-highlight--has-match': hasMatch.value,\n        'xds:highlight-text': hasMatch.value,\n        [props.matchClass]: hasMatch.value,\n      }\n      if (props.noMatchClass) {\n        classes[props.noMatchClass] = !hasMatch.value\n      }\n      return classes\n    })\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        text: props.text,\n        hasMatch: hasMatch.value,\n        ...matchParts.value,\n      }\n      return slots.default?.(slotProps)[0]\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { hasMatch, matchParts, dynamicCSSClasses }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script setup>\nimport { Highlight } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst highlight = ref('')\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script setup>\nimport { Highlight } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst highlight = ref('entran')\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"highlight.vue2.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n      v-text=\"matchParts.start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      class=\"x-highlight__text xds:highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n      v-text=\"matchParts.match\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n      v-text=\"matchParts.end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { normalizeString } from '../utils'\n\n/**\n * Highlights the given part of the text. The component is smart enough to do matches\n * between special characters like tilde, cedilla, eñe, capital letters...\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Highlight',\n  props: {\n    /** The text to highlight some part of it. */\n    text: {\n      type: String,\n      default: '',\n    },\n    /** The part of the text to be highlighted. */\n    highlight: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the `text` string contains the `highlight` string. */\n    matchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n    noMatchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add to the matching text. */\n    matchingPartClass: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props, { slots }) {\n    /**\n     * Splits the label in three parts based on two indexes.\n     *\n     * @param label - The string that will be divided in three parts.\n     * @param start - The first index that the label will be divided by.\n     * @param end - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     */\n    function splitAt(label: string, start: number, end: number) {\n      return {\n        start: label.substring(0, start),\n        match: label.substring(start, end),\n        end: label.substring(end),\n      }\n    }\n\n    /**\n     * Splits the text to highlight into 3 parts: a starting part, the matching part\n     * and the ending part. If there is no match between the text and the highlight, the `start`\n     * property will contain the whole text.\n     *\n     * @returns An object containing the different parts of the text.\n     */\n    const matchParts = computed(() => {\n      const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight))\n      return matcherIndex !== -1 && props.highlight\n        ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n        : { start: props.text, match: '', end: '' }\n    })\n\n    /**\n     * Checks if the normalized suggestion query matches with the module's query, so it has a\n     * matching part.\n     *\n     * @returns True if there is a match between the text and the highlight strings.\n     */\n    const hasMatch = computed(() => !!matchParts.value.match)\n\n    /**\n     * CSS classes to add depending on the component state.\n     *\n     * @remarks\n     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n     * `[matchClass]`: When there is a match between the text and\n     * the part to highlight.\n     * `[noMatchClass]`: when there is no match between the text to highlight.\n     * @returns The CSS classes.\n     */\n    const dynamicCSSClasses = computed(() => {\n      const classes = {\n        'x-highlight--has-match': hasMatch.value,\n        'xds:highlight-text': hasMatch.value,\n        [props.matchClass]: hasMatch.value,\n      }\n      if (props.noMatchClass) {\n        classes[props.noMatchClass] = !hasMatch.value\n      }\n      return classes\n    })\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        text: props.text,\n        hasMatch: hasMatch.value,\n        ...matchParts.value,\n      }\n      return slots.default?.(slotProps)[0]\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { hasMatch, matchParts, dynamicCSSClasses }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script setup>\nimport { Highlight } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst highlight = ref('')\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script setup>\nimport { Highlight } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst highlight = ref('entran')\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

package/js/components/items-list.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './items-list2.vue.js';
+import _sfc_main from './items-list.vue2.js';
 import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 

package/js/components/{items-list2.vue.js → items-list.vue2.js}

@@ -44,4 +44,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=items-list2.vue.js.map
+//# sourceMappingURL=items-list.vue2.js.map

package/js/components/{items-list2.vue.js.map → items-list.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"items-list2.vue.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../types'\nimport { toKebabCase } from '../utils/string'\n\n/**\n * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n * the `modelName`of the item.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ItemsList',\n  props: {\n    /** Animation component that will be used to animate the list. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** List of items. */\n    items: {\n      type: Array as PropType<ListItem[]>,\n      required: true,\n    },\n    /** Item's classes. */\n    itemClass: String,\n  },\n  setup(props) {\n    /**\n     * The list of the items with additional properties.\n     *\n     * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n     */\n    const computedItems = computed(() =>\n      props.items.map(item => {\n        const modelName = toKebabCase(item.modelName)\n        return {\n          ...item,\n          dataTest: `${modelName}s-list-item`,\n          class: [`x-${modelName}s-list-item`, props.itemClass],\n          slotName: modelName,\n        }\n      }),\n    )\n\n    return { computedItems }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;AA+BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAA6B;AACnC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAC7B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,IAAG;YACpB,MAAM,SAAQ,GAAI,WAAW,CAAC,IAAI,CAAC,SAAS,CAAA;YAC5C,OAAO;AACL,gBAAA,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa;gBACnC,KAAK,EAAE,CAAC,CAAA,EAAA,EAAK,SAAS,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;AACrD,gBAAA,QAAQ,EAAE,SAAS;aACrB;QACF,CAAC,CAAC,CACJ;QAEA,OAAO,EAAE,aAAY,EAAE;IACzB,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"items-list.vue2.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../types'\nimport { toKebabCase } from '../utils/string'\n\n/**\n * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n * the `modelName`of the item.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ItemsList',\n  props: {\n    /** Animation component that will be used to animate the list. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** List of items. */\n    items: {\n      type: Array as PropType<ListItem[]>,\n      required: true,\n    },\n    /** Item's classes. */\n    itemClass: String,\n  },\n  setup(props) {\n    /**\n     * The list of the items with additional properties.\n     *\n     * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n     */\n    const computedItems = computed(() =>\n      props.items.map(item => {\n        const modelName = toKebabCase(item.modelName)\n        return {\n          ...item,\n          dataTest: `${modelName}s-list-item`,\n          class: [`x-${modelName}s-list-item`, props.itemClass],\n          slotName: modelName,\n        }\n      }),\n    )\n\n    return { computedItems }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;AA+BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAA6B;AACnC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAC7B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,IAAG;YACpB,MAAM,SAAQ,GAAI,WAAW,CAAC,IAAI,CAAC,SAAS,CAAA;YAC5C,OAAO;AACL,gBAAA,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa;gBACnC,KAAK,EAAE,CAAC,CAAA,EAAA,EAAK,SAAS,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;AACrD,gBAAA,QAAQ,EAAE,SAAS;aACrB;QACF,CAAC,CAAC,CACJ;QAEA,OAAO,EAAE,aAAY,EAAE;IACzB,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/{location-provider2.vue.js → location-provider.vue2.js}

@@ -3,4 +3,4 @@ import _sfc_main from './location-provider.vue.js';
 
 
 export { _sfc_main as default };
-//# sourceMappingURL=location-provider2.vue.js.map
+//# sourceMappingURL=location-provider.vue2.js.map

package/js/components/location-provider.vue2.js.map

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