@empathyco/x-components 6.0.0-alpha.60 → 6.0.0-alpha.62

package/js/components/base-keyboard-navigation.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-keyboard-navigation.vue2.js","sources":["../../../src/components/base-keyboard-navigation.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"el\"\n    @keydown.up.down.right.left.prevent=\"focusNextNavigableElement\"\n    class=\"x-keyboard-navigation\"\n    data-test=\"keyboard-navigation\"\n  >\n    <!-- @slot (Required) Container content -->\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { PropType, computed, defineComponent, onMounted, ref } from 'vue';\n  // eslint-disable-next-line max-len\n  import { DirectionalFocusNavigationService } from '../services/directional-focus-navigation.service';\n  import { SpatialNavigation } from '../services/services.types';\n  import { ArrowKey, EventsForDirectionLimit, TakeNavigationControl } from '../utils/types';\n  import { XEventsOf } from '../wiring/events.types';\n  import { WireMetadata } from '../wiring/wiring.types';\n  import { useXBus } from '../composables';\n\n  /**\n   * Base component to handle keyboard navigation for elements inside it. It has a required slot to\n   * include the navigable elements.\n   *\n   * @remarks\n   * The component can be customized through props: an array of navigationHijacker objects, which\n   * contains: the xEvent to listen to, the moduleName in charge of emitting the event and to which\n   * direction it should react to; to take control of the navigation and eventsForDirectionLimit, to\n   * emit an xEvent when reaching the navigation limit in any direction.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseKeyboardNavigation',\n    props: {\n      /**\n       * An array of {@link TakeNavigationControl} objects defining when to\n       * take control of the keyboard navigation.\n       */\n      navigationHijacker: {\n        type: Array as PropType<TakeNavigationControl[]>,\n        default: () => [\n          { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }\n        ]\n      },\n      /**\n       * An {@link EventsForDirectionLimit} to emit when the user is already at the furthest element\n       * in a direction and tries to keep going on the same direction.\n       */\n      eventsForDirectionLimit: {\n        type: Object as PropType<Partial<EventsForDirectionLimit>>,\n        default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' })\n      }\n    },\n    setup: function (props) {\n      const el = ref<HTMLElement>();\n      const xBus = useXBus();\n\n      /**\n       * The {@link SpatialNavigation} service to use.\n       */\n      let navigationService!: SpatialNavigation;\n\n      /**\n       * The element to focus.\n       */\n      let elementToFocus: HTMLElement | undefined;\n\n      /**\n       * Get the navigation hijacker events.\n       *\n       * @remarks\n       * If the same {@link XEvent} is defined multiple times it is only inserted once.\n       *\n       * @returns The events to hijack the navigation.\n       */\n      const navigationHijackerEvents = computed((): XEventsOf<ArrowKey>[] => {\n        const eventsSet = props.navigationHijacker.map(({ xEvent }) => xEvent);\n        return Array.from(new Set(eventsSet));\n      });\n\n      onMounted(() => {\n        // TODO Replace this with injection\n        navigationService = new DirectionalFocusNavigationService(el.value!);\n      });\n\n      /**\n       * Checks if the component has to take control of the keyboard navigation.\n       *\n       * @param eventPayload - The {@link ArrowKey}.\n       * @param metadata - The {@link WireMetadata}.\n       *\n       * @returns Whether the component needs to take control of the keyboard navigation or not.\n       * @internal\n       */\n      function hasToTakeNavigationControl(eventPayload: ArrowKey, metadata: WireMetadata): boolean {\n        return props.navigationHijacker.some(\n          ({ moduleName, direction }) =>\n            moduleName === metadata.moduleName && direction === eventPayload\n        );\n      }\n\n      /**\n       * Focus the next navigable element returned by the navigation service.\n       *\n       * @param direction - The navigation direction.\n       * @internal\n       */\n      function focusNextNavigableElement(direction: ArrowKey | KeyboardEvent): void {\n        const dir = typeof direction === 'object' ? (direction.key as ArrowKey) : direction;\n        const nextElementToFocus = navigationService?.navigateTo(dir);\n\n        if (elementToFocus !== nextElementToFocus) {\n          elementToFocus = nextElementToFocus;\n          elementToFocus.focus();\n        } else {\n          emitDirectionalLimitReached(dir);\n          elementToFocus = undefined;\n        }\n      }\n\n      /**\n       * Emit the {@link XEvent} associated to the navigation's direction when reaching its limit.\n       *\n       * @param direction - The navigation direction.\n       * @internal\n       */\n      function emitDirectionalLimitReached(direction: ArrowKey): void {\n        const xEvent = props.eventsForDirectionLimit?.[direction];\n        if (xEvent) {\n          xBus.emit(xEvent, undefined, { target: elementToFocus });\n        }\n      }\n\n      /**\n       * Trigger navigation if this component is in control of it.\n       *\n       * @param eventPayload - The {@link @empathyco/x-bus#SubjectPayload.eventPayload}.\n       * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n       * @public\n       */\n      navigationHijackerEvents.value.forEach(event => {\n        xBus.on(event, true).subscribe(({ eventPayload, metadata }) => {\n          if (hasToTakeNavigationControl(eventPayload, metadata)) {\n            focusNextNavigableElement(eventPayload);\n          }\n        });\n      });\n\n      return { el, focusNextNavigableElement };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserReachedEmpathizeTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event emitted by default when the container reaches its top navigation, but more events can be\n  emitted for each direction using the `eventsForDirectionLimit` prop.\n\n## Examples\n\nThis component has a slot to inject other components inside it. The component expects a required\nprop, navigationHijacker, which is an array of objects containing: the xEvent to listen to, the\nmoduleName in charge of emitting the event and to which direction it should react to; to take\ncontrol of the navigation. It has another prop, optional in this case, to emit an xEvent when\nreaching the navigation limit in any direction.\n\n### Basic Usage\n\n```vue\n<KeyboardNavigation>\n  <QuerySuggestions/>\n</KeyboardNavigation>\n```\n\n### Defining multiple conditions to take navigation's control\n\n```vue\n<KeyboardNavigation\n  :navigationHijacker=\"[\n    {\n      xEvent: 'UserPressedArrowKey',\n      moduleName: 'searchBox',\n      direction: 'ArrowDown'\n    },\n    {\n      xEvent: 'UserPressedArrowKey',\n      moduleName: 'facets',\n      direction: 'ArrowRight'\n    }\n  ]\"\n>\n  <QuerySuggestions/>\n</KeyboardNavigation>\n```\n\n### Defining events to emit when reaching a navigation limit\n\n```vue\n<KeyboardNavigation\n  :navigationHijacker=\"[\n    {\n      xEvent: 'UserPressedArrowKey',\n      moduleName: 'searchBox',\n      direction: 'ArrowDown'\n    }\n  ]\"\n  :eventsForDirectionLimit=\"{\n    ArrowUp: 'UserReachedEmpathizeTop'\n  }\"\n>\n  <QuerySuggestions/>\n</KeyboardNavigation>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-keyboard-navigation.vue2.js","sources":["../../../src/components/base-keyboard-navigation.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"el\"\n    class=\"x-keyboard-navigation\"\n    data-test=\"keyboard-navigation\"\n    @keydown.up.down.right.left.prevent=\"focusNextNavigableElement\"\n  >\n    <!-- @slot (Required) Container content -->\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { SpatialNavigation } from '../services/services.types'\n\nimport type { ArrowKey, EventsForDirectionLimit, TakeNavigationControl } from '../utils/types'\nimport type { XEventsOf } from '../wiring/events.types'\nimport type { WireMetadata } from '../wiring/wiring.types'\nimport { computed, defineComponent, onMounted, ref } from 'vue'\nimport { useXBus } from '../composables'\nimport { DirectionalFocusNavigationService } from '../services/directional-focus-navigation.service'\n\n/**\n * Base component to handle keyboard navigation for elements inside it. It has a required slot to\n * include the navigable elements.\n *\n * @remarks\n * The component can be customized through props: an array of navigationHijacker objects, which\n * contains: the xEvent to listen to, the moduleName in charge of emitting the event and to which\n * direction it should react to; to take control of the navigation and eventsForDirectionLimit, to\n * emit an xEvent when reaching the navigation limit in any direction.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseKeyboardNavigation',\n  props: {\n    /**\n     * An array of {@link TakeNavigationControl} objects defining when to\n     * take control of the keyboard navigation.\n     */\n    navigationHijacker: {\n      type: Array as PropType<TakeNavigationControl[]>,\n      default: () => [\n        { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' },\n      ],\n    },\n    /**\n     * An {@link EventsForDirectionLimit} to emit when the user is already at the furthest element\n     * in a direction and tries to keep going on the same direction.\n     */\n    eventsForDirectionLimit: {\n      type: Object as PropType<Partial<EventsForDirectionLimit>>,\n      default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' }),\n    },\n  },\n  setup(props) {\n    const el = ref<HTMLElement>()\n    const xBus = useXBus()\n\n    /**\n     * The {@link SpatialNavigation} service to use.\n     */\n    let navigationService!: SpatialNavigation\n\n    /**\n     * The element to focus.\n     */\n    let elementToFocus: HTMLElement | undefined\n\n    /**\n     * Get the navigation hijacker events.\n     *\n     * @remarks\n     * If the same {@link XEvent} is defined multiple times it is only inserted once.\n     *\n     * @returns The events to hijack the navigation.\n     */\n    const navigationHijackerEvents = computed((): XEventsOf<ArrowKey>[] => {\n      const eventsSet = props.navigationHijacker.map(({ xEvent }) => xEvent)\n      return Array.from(new Set(eventsSet))\n    })\n\n    onMounted(() => {\n      // TODO Replace this with injection\n      navigationService = new DirectionalFocusNavigationService(el.value!)\n    })\n\n    /**\n     * Checks if the component has to take control of the keyboard navigation.\n     *\n     * @param eventPayload - The {@link ArrowKey}.\n     * @param metadata - The {@link WireMetadata}.\n     *\n     * @returns Whether the component needs to take control of the keyboard navigation or not.\n     * @internal\n     */\n    function hasToTakeNavigationControl(eventPayload: ArrowKey, metadata: WireMetadata): boolean {\n      return props.navigationHijacker.some(\n        ({ moduleName, direction }) =>\n          moduleName === metadata.moduleName && direction === eventPayload,\n      )\n    }\n\n    /**\n     * Focus the next navigable element returned by the navigation service.\n     *\n     * @param direction - The navigation direction.\n     * @internal\n     */\n    function focusNextNavigableElement(direction: ArrowKey | KeyboardEvent): void {\n      const dir = typeof direction === 'object' ? (direction.key as ArrowKey) : direction\n      const nextElementToFocus = navigationService?.navigateTo(dir)\n\n      if (elementToFocus !== nextElementToFocus) {\n        elementToFocus = nextElementToFocus\n        elementToFocus.focus()\n      } else {\n        emitDirectionalLimitReached(dir)\n        elementToFocus = undefined\n      }\n    }\n\n    /**\n     * Emit the {@link XEvent} associated to the navigation's direction when reaching its limit.\n     *\n     * @param direction - The navigation direction.\n     * @internal\n     */\n    function emitDirectionalLimitReached(direction: ArrowKey): void {\n      const xEvent = props.eventsForDirectionLimit?.[direction]\n      if (xEvent) {\n        xBus.emit(xEvent, undefined, { target: elementToFocus })\n      }\n    }\n\n    /**\n     * Trigger navigation if this component is in control of it.\n     *\n     * @param eventPayload - The {@link @empathyco/x-bus#SubjectPayload.eventPayload}.\n     * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n     * @public\n     */\n    navigationHijackerEvents.value.forEach(event => {\n      xBus.on(event, true).subscribe(({ eventPayload, metadata }) => {\n        if (hasToTakeNavigationControl(eventPayload, metadata)) {\n          focusNextNavigableElement(eventPayload)\n        }\n      })\n    })\n\n    return { el, focusNextNavigableElement }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserReachedEmpathizeTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event emitted by default when the container reaches its top navigation, but more events can be\n  emitted for each direction using the `eventsForDirectionLimit` prop.\n\n## Examples\n\nThis component has a slot to inject other components inside it. The component expects a required\nprop, navigationHijacker, which is an array of objects containing: the xEvent to listen to, the\nmoduleName in charge of emitting the event and to which direction it should react to; to take\ncontrol of the navigation. It has another prop, optional in this case, to emit an xEvent when\nreaching the navigation limit in any direction.\n\n### Basic Usage\n\n```vue\n<KeyboardNavigation>\n  <QuerySuggestions/>\n</KeyboardNavigation>\n```\n\n### Defining multiple conditions to take navigation's control\n\n```vue\n<KeyboardNavigation\n  :navigationHijacker=\"[\n    {\n      xEvent: 'UserPressedArrowKey',\n      moduleName: 'searchBox',\n      direction: 'ArrowDown',\n    },\n    {\n      xEvent: 'UserPressedArrowKey',\n      moduleName: 'facets',\n      direction: 'ArrowRight',\n    },\n  ]\"\n>\n  <QuerySuggestions/>\n</KeyboardNavigation>\n```\n\n### Defining events to emit when reaching a navigation limit\n\n```vue\n<KeyboardNavigation\n  :navigationHijacker=\"[\n    {\n      xEvent: 'UserPressedArrowKey',\n      moduleName: 'searchBox',\n      direction: 'ArrowDown',\n    },\n  ]\"\n  :eventsForDirectionLimit=\"{\n    ArrowUp: 'UserReachedEmpathizeTop',\n  }\"\n>\n  <QuerySuggestions/>\n</KeyboardNavigation>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"base-rating.vue.js","sources":["../../../src/components/base-rating.vue"],"sourcesContent":["<template>\n  <span class=\"x-rating\" role=\"img\" :aria-label=\"ariaLabel\" data-test=\"rating\">\n    <div class=\"x-rating--empty\" data-test=\"rating-empty\">\n      <!--\n        @slot The content to render as empty icon\n      -->\n      <slot v-for=\"i in max\" name=\"empty-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--empty\" />\n      </slot>\n    </div>\n    <div\n      class=\"x-rating--filled\"\n      :style=\"{ width: calculateFilledWrapperWidth }\"\n      data-test=\"rating-filled\"\n    >\n      <!--\n        @slot The content to render as filled icon\n      -->\n      <slot v-for=\"i in max\" name=\"filled-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--filled\" />\n      </slot>\n    </div>\n  </span>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import StarIcon from './icons/star.vue';\n\n  /**\n   * Rating component. This component renders a set of elements filled based on the value passed as\n   * prop.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseRating',\n    components: {\n      DefaultIcon: StarIcon\n    },\n    props: {\n      /**\n       * Numeric value used to calculates the width of the filled elements.\n       *\n       * @public\n       */\n      value: {\n        type: Number,\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       * Calculates the width of the filled elements wrapper.\n       *\n       * @returns The % of the wrapper width.\n       *\n       * @internal\n       */\n      const calculateFilledWrapperWidth = computed(() => {\n        return props.value < 0 ? '0%' : `${(props.value * 100) / props.max}%`;\n      });\n\n      /**\n       * Creates the aria label for accessibility purpose.\n       *\n       * @returns The aria label.\n       *\n       * @internal\n       */\n      const ariaLabel = computed(() => {\n        return `${props.value}/${props.max}`;\n      });\n\n      return {\n        calculateFilledWrapperWidth,\n        ariaLabel\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-rating {\n    position: relative;\n    display: inline-block;\n    max-width: fit-content;\n  }\n\n  .x-rating--empty {\n    overflow: hidden;\n    display: flex;\n    flex-flow: row nowrap;\n    white-space: nowrap;\n  }\n\n  .x-rating--filled {\n    display: flex;\n    flex-flow: row nowrap;\n    white-space: nowrap;\n    position: absolute;\n    overflow: hidden;\n    top: 0;\n    left: 0;\n    height: 100%;\n  }\n\n  .x-rating__default-icon {\n    fill: currentColor;\n    stroke: currentColor;\n  }\n\n  .x-rating__default-icon--empty {\n    fill: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component receives a `value` as prop and renders a set of elements, which will be filled based\non this value.\n\n### Basic usage\n\n```vue\n<BaseRating :value=\"5.23\" />\n```\n\n### Customizing its contents\n\n```vue\n<BaseRating :value=\"7.15\" :max=\"10\">\n  <template #filled-icon>\n    <TestIcon/>\n  </template>\n  <template #empty-icon>\n    <TestIcon/>\n  </template>\n</BaseRating>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_Fragment","_renderList","_renderSlot","_createBlock","_normalizeStyle"],"mappings":";;;;;AAES,MAAA,UAAA,GAAM,CAAiB,YAAA,CAAA,CAAA;MAAC,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,iBAAA;;;;iCADzCA,gBAqBO,CAAA,aAAA,CAAA,CAAA;SArBqBC,SAAK,EAAA,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,IAAE,KAAA,EAAA,UAAA;AAAA,IAAuB,IAAA,EAAA,KAAA;AAAA,IAAA,YAAA,EAAA,IAAA,CAAA,SAAA;AACxD,IAAA,WAAA,EAAA,QAAA;AAAA,GAAA,EAAA;uBAIE,KAEO,EAAA,UAAA,EAAA;AAAA,OADLD,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA;AAAA,QAAqFC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,CAAA,KAAA;iBAApEC,UAAG,CAAA,IAAA,CAAA,MAAA,EAAA,YAAA,EAAA,EAAA,EAAA,MAAA;AAAA,aAAQJ,SAAA,EAAA,EAAAK,WAAA,CAAA,sBAAA,EAAA;AAAA,cAAA,GAAA,EAAA,CAAA;;;;AAGhC,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAWM;AAAA,KAAA,CAAA;;AArBV,MAAA,KAAA;AAAA,MAAA;AAAA,QAaM,KAAA,EAAA,kBAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,2BAAA,EAAA,CAAA;;;;AAME,SAAAN,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA;AAAA,UAAsFC,QAAA;AAAA,UAAA,IAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,CAAA,KAAA;mBAArEC,UAAG,CAAA,IAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,EAAA,MAAA;AAAA,eAAQJ,SAAA,EAAA,EAAAK,WAAA,CAAA,sBAAA,EAAA;AAAA,gBAAA,GAAA,EAAA,CAAA;;;;;;;AAnBpC,SAAA;AAAA,OAAA;;;;;;;;;;"}
+{"version":3,"file":"base-rating.vue.js","sources":["../../../src/components/base-rating.vue"],"sourcesContent":["<template>\n  <span class=\"x-rating\" role=\"img\" :aria-label=\"ariaLabel\" data-test=\"rating\">\n    <div class=\"x-rating--empty\" data-test=\"rating-empty\">\n      <!--\n        @slot The content to render as empty icon\n      -->\n      <slot v-for=\"i in max\" name=\"empty-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--empty\" />\n      </slot>\n    </div>\n    <div\n      class=\"x-rating--filled\"\n      :style=\"{ width: calculateFilledWrapperWidth }\"\n      data-test=\"rating-filled\"\n    >\n      <!--\n        @slot The content to render as filled icon\n      -->\n      <slot v-for=\"i in max\" name=\"filled-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--filled\" />\n      </slot>\n    </div>\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport StarIcon from './icons/star.vue'\n\n/**\n * Rating component. This component renders a set of elements filled based on the value passed as\n * prop.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseRating',\n  components: {\n    DefaultIcon: StarIcon,\n  },\n  props: {\n    /**\n     * Numeric value used to calculates the width of the filled elements.\n     *\n     * @public\n     */\n    value: {\n      type: Number,\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     * Calculates the width of the filled elements wrapper.\n     *\n     * @returns The % of the wrapper width.\n     *\n     * @internal\n     */\n    const calculateFilledWrapperWidth = computed(() => {\n      return props.value < 0 ? '0%' : `${(props.value * 100) / props.max}%`\n    })\n\n    /**\n     * Creates the aria label for accessibility purpose.\n     *\n     * @returns The aria label.\n     *\n     * @internal\n     */\n    const ariaLabel = computed(() => {\n      return `${props.value}/${props.max}`\n    })\n\n    return {\n      calculateFilledWrapperWidth,\n      ariaLabel,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-rating {\n  position: relative;\n  display: inline-block;\n  max-width: fit-content;\n}\n\n.x-rating--empty {\n  overflow: hidden;\n  display: flex;\n  flex-flow: row nowrap;\n  white-space: nowrap;\n}\n\n.x-rating--filled {\n  display: flex;\n  flex-flow: row nowrap;\n  white-space: nowrap;\n  position: absolute;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\n\n.x-rating__default-icon {\n  fill: currentColor;\n  stroke: currentColor;\n}\n\n.x-rating__default-icon--empty {\n  fill: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component receives a `value` as prop and renders a set of elements, which will be filled based\non this value.\n\n### Basic usage\n\n```vue\n<BaseRating :value=\"5.23\" />\n```\n\n### Customizing its contents\n\n```vue\n<BaseRating :value=\"7.15\" :max=\"10\">\n  <template #filled-icon>\n    <TestIcon/>\n  </template>\n  <template #empty-icon>\n    <TestIcon/>\n  </template>\n</BaseRating>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_Fragment","_renderList","_renderSlot","_createBlock","_normalizeStyle"],"mappings":";;;;;AAES,MAAA,UAAA,GAAM,CAAiB,YAAA,CAAA,CAAA;MAAC,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,iBAAA;;;;iCADzCA,gBAqBO,CAAA,aAAA,CAAA,CAAA;SArBqBC,SAAK,EAAA,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,IAAE,KAAA,EAAA,UAAA;AAAA,IAAuB,IAAA,EAAA,KAAA;AAAA,IAAA,YAAA,EAAA,IAAA,CAAA,SAAA;AACxD,IAAA,WAAA,EAAA,QAAA;AAAA,GAAA,EAAA;uBAIE,KAEO,EAAA,UAAA,EAAA;AAAA,OADLD,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA;AAAA,QAAqFC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,CAAA,KAAA;iBAApEC,UAAG,CAAA,IAAA,CAAA,MAAA,EAAA,YAAA,EAAA,EAAA,EAAA,MAAA;AAAA,aAAQJ,SAAA,EAAA,EAAAK,WAAA,CAAA,sBAAA,EAAA;AAAA,cAAA,GAAA,EAAA,CAAA;;;;AAGhC,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAWM;AAAA,KAAA,CAAA;;AArBV,MAAA,KAAA;AAAA,MAAA;AAAA,QAaM,KAAA,EAAA,kBAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,2BAAA,EAAA,CAAA;;;;AAME,SAAAN,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA;AAAA,UAAsFC,QAAA;AAAA,UAAA,IAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,CAAA,KAAA;mBAArEC,UAAG,CAAA,IAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,EAAA,MAAA;AAAA,eAAQJ,SAAA,EAAA,EAAAK,WAAA,CAAA,sBAAA,EAAA;AAAA,gBAAA,GAAA,EAAA,CAAA;;;;;;;AAnBpC,SAAA;AAAA,OAAA;;;;;;;;;;"}

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

@@ -10,7 +10,7 @@ import StarIcon from './icons/star.vue.js';
 var _sfc_main = defineComponent({
     name: 'BaseRating',
     components: {
-        DefaultIcon: StarIcon
+        DefaultIcon: StarIcon,
     },
     props: {
         /**
@@ -20,7 +20,7 @@ var _sfc_main = defineComponent({
          */
         value: {
             type: Number,
-            required: true
+            required: true,
         },
         /**
          * Maximum number of elements to paint.
@@ -29,8 +29,8 @@ var _sfc_main = defineComponent({
          */
         max: {
             type: Number,
-            default: 5
-        }
+            default: 5,
+        },
     },
     setup(props) {
         /**
@@ -55,9 +55,9 @@ var _sfc_main = defineComponent({
         });
         return {
             calculateFilledWrapperWidth,
-            ariaLabel
+            ariaLabel,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"base-rating.vue2.js","sources":["../../../src/components/base-rating.vue"],"sourcesContent":["<template>\n  <span class=\"x-rating\" role=\"img\" :aria-label=\"ariaLabel\" data-test=\"rating\">\n    <div class=\"x-rating--empty\" data-test=\"rating-empty\">\n      <!--\n        @slot The content to render as empty icon\n      -->\n      <slot v-for=\"i in max\" name=\"empty-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--empty\" />\n      </slot>\n    </div>\n    <div\n      class=\"x-rating--filled\"\n      :style=\"{ width: calculateFilledWrapperWidth }\"\n      data-test=\"rating-filled\"\n    >\n      <!--\n        @slot The content to render as filled icon\n      -->\n      <slot v-for=\"i in max\" name=\"filled-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--filled\" />\n      </slot>\n    </div>\n  </span>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import StarIcon from './icons/star.vue';\n\n  /**\n   * Rating component. This component renders a set of elements filled based on the value passed as\n   * prop.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseRating',\n    components: {\n      DefaultIcon: StarIcon\n    },\n    props: {\n      /**\n       * Numeric value used to calculates the width of the filled elements.\n       *\n       * @public\n       */\n      value: {\n        type: Number,\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       * Calculates the width of the filled elements wrapper.\n       *\n       * @returns The % of the wrapper width.\n       *\n       * @internal\n       */\n      const calculateFilledWrapperWidth = computed(() => {\n        return props.value < 0 ? '0%' : `${(props.value * 100) / props.max}%`;\n      });\n\n      /**\n       * Creates the aria label for accessibility purpose.\n       *\n       * @returns The aria label.\n       *\n       * @internal\n       */\n      const ariaLabel = computed(() => {\n        return `${props.value}/${props.max}`;\n      });\n\n      return {\n        calculateFilledWrapperWidth,\n        ariaLabel\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-rating {\n    position: relative;\n    display: inline-block;\n    max-width: fit-content;\n  }\n\n  .x-rating--empty {\n    overflow: hidden;\n    display: flex;\n    flex-flow: row nowrap;\n    white-space: nowrap;\n  }\n\n  .x-rating--filled {\n    display: flex;\n    flex-flow: row nowrap;\n    white-space: nowrap;\n    position: absolute;\n    overflow: hidden;\n    top: 0;\n    left: 0;\n    height: 100%;\n  }\n\n  .x-rating__default-icon {\n    fill: currentColor;\n    stroke: currentColor;\n  }\n\n  .x-rating__default-icon--empty {\n    fill: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component receives a `value` as prop and renders a set of elements, which will be filled based\non this value.\n\n### Basic usage\n\n```vue\n<BaseRating :value=\"5.23\" />\n```\n\n### Customizing its contents\n\n```vue\n<BaseRating :value=\"7.15\" :max=\"10\">\n  <template #filled-icon>\n    <TestIcon/>\n  </template>\n  <template #empty-icon>\n    <TestIcon/>\n  </template>\n</BaseRating>\n```\n</docs>\n"],"names":[],"mappings":";;;AA6BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,UAAU,EAAE;AACV,QAAA,WAAW,EAAE,QAAO;AACrB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAA;AACX,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,2BAA0B,GAAI,QAAQ,CAAC,MAAM;YACjD,OAAO,KAAK,CAAC,KAAI,GAAI,CAAA,GAAI,IAAK,GAAE,GAAG,CAAC,KAAK,CAAC,KAAI,GAAI,GAAG,IAAI,KAAK,CAAC,GAAG,CAAA,CAAA,CAAG,CAAA;AACvE,SAAC,CAAC,CAAA;AAEF;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAC,MAAM;YAC/B,OAAO,CAAA,EAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,CAAA,CAAE,CAAA;AACtC,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,2BAA2B;YAC3B,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-rating.vue2.js","sources":["../../../src/components/base-rating.vue"],"sourcesContent":["<template>\n  <span class=\"x-rating\" role=\"img\" :aria-label=\"ariaLabel\" data-test=\"rating\">\n    <div class=\"x-rating--empty\" data-test=\"rating-empty\">\n      <!--\n        @slot The content to render as empty icon\n      -->\n      <slot v-for=\"i in max\" name=\"empty-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--empty\" />\n      </slot>\n    </div>\n    <div\n      class=\"x-rating--filled\"\n      :style=\"{ width: calculateFilledWrapperWidth }\"\n      data-test=\"rating-filled\"\n    >\n      <!--\n        @slot The content to render as filled icon\n      -->\n      <slot v-for=\"i in max\" name=\"filled-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--filled\" />\n      </slot>\n    </div>\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport StarIcon from './icons/star.vue'\n\n/**\n * Rating component. This component renders a set of elements filled based on the value passed as\n * prop.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseRating',\n  components: {\n    DefaultIcon: StarIcon,\n  },\n  props: {\n    /**\n     * Numeric value used to calculates the width of the filled elements.\n     *\n     * @public\n     */\n    value: {\n      type: Number,\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     * Calculates the width of the filled elements wrapper.\n     *\n     * @returns The % of the wrapper width.\n     *\n     * @internal\n     */\n    const calculateFilledWrapperWidth = computed(() => {\n      return props.value < 0 ? '0%' : `${(props.value * 100) / props.max}%`\n    })\n\n    /**\n     * Creates the aria label for accessibility purpose.\n     *\n     * @returns The aria label.\n     *\n     * @internal\n     */\n    const ariaLabel = computed(() => {\n      return `${props.value}/${props.max}`\n    })\n\n    return {\n      calculateFilledWrapperWidth,\n      ariaLabel,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-rating {\n  position: relative;\n  display: inline-block;\n  max-width: fit-content;\n}\n\n.x-rating--empty {\n  overflow: hidden;\n  display: flex;\n  flex-flow: row nowrap;\n  white-space: nowrap;\n}\n\n.x-rating--filled {\n  display: flex;\n  flex-flow: row nowrap;\n  white-space: nowrap;\n  position: absolute;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\n\n.x-rating__default-icon {\n  fill: currentColor;\n  stroke: currentColor;\n}\n\n.x-rating__default-icon--empty {\n  fill: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component receives a `value` as prop and renders a set of elements, which will be filled based\non this value.\n\n### Basic usage\n\n```vue\n<BaseRating :value=\"5.23\" />\n```\n\n### Customizing its contents\n\n```vue\n<BaseRating :value=\"7.15\" :max=\"10\">\n  <template #filled-icon>\n    <TestIcon/>\n  </template>\n  <template #empty-icon>\n    <TestIcon/>\n  </template>\n</BaseRating>\n```\n</docs>\n"],"names":[],"mappings":";;;AA6BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,UAAU,EAAE;AACV,QAAA,WAAW,EAAE,QAAQ;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,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,2BAA0B,GAAI,QAAQ,CAAC,MAAM;YACjD,OAAO,KAAK,CAAC,KAAM,GAAE,CAAE,GAAE,IAAG,GAAI,GAAG,CAAC,KAAK,CAAC,KAAM,GAAE,GAAG,IAAI,KAAK,CAAC,GAAG,CAAA,CAAA,CAAE,CAAA;AACtE,SAAC,CAAA,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAC,MAAM;YAC/B,OAAO,CAAA,EAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,CAAA,CAAC,CAAA;AACrC,SAAC,CAAA,CAAA;QAED,OAAO;YACL,2BAA2B;YAC3B,SAAS;SACX,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"base-slider.vue.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n  <div class=\"x-base-slider\">\n    <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n    <div class=\"x-base-slider__selected\">\n      <!--\n        @slot Default selected range rendering. This slot will be used by default for rendering\n        the selected range without an specific slot implementation.\n            @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n      -->\n      <slot :rangeSelected=\"rangeSelected\">\n        <p class=\"x-base-slider__selected-min\">\n          <span>min value</span>\n          <span>\n            {{ rangeSelected[0] }}\n          </span>\n        </p>\n        <p class=\"x-base-slider__selected-max\">\n          <span>max value</span>\n          <span>\n            {{ rangeSelected[1] }}\n          </span>\n        </p>\n      </slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { API, create } from 'nouislider';\n  import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue';\n\n  /**\n   * This component implements a range slider and prints the selected values.\n   * It receives a threshold prop to set the limits and uses v-model to get and set\n   * the selected values.\n   *\n   * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n   * for the slider implementation.\n   *\n   */\n  export default defineComponent({\n    name: 'BaseSlider',\n    props: {\n      /** The threshold prop sets the limits for the slider. */\n      threshold: {\n        type: Object as PropType<{ min: number; max: number }>,\n        default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER })\n      },\n      /** The modelValue prop sets the initial values for the slider. */\n      modelValue: {\n        type: Object as PropType<{ min: number; max: number }>,\n        required: true\n      },\n      /** Class to be able to customize slider styles. */\n      contentClass: {\n        type: String,\n        default: ''\n      }\n    },\n    /**\n     * The component emits an event with the selected values whenever\n     * the user changes the slider.\n     */\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      /** The nouislider instance. */\n      let sliderInstance: API;\n      /** The nouislider element reference. */\n      const slider = ref<HTMLElement>();\n\n      /** The selected min value. */\n      const minSelected = ref(props.modelValue?.min ?? props.threshold.min);\n      /** The selected max value. */\n      const maxSelected = ref(props.modelValue?.max ?? props.threshold.max);\n\n      /** The selected range as an array. */\n      const rangeSelected = computed(() => [minSelected.value, maxSelected.value]);\n      /** The range for the nouislider. */\n      const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }));\n\n      onMounted(() => {\n        // Create the slider instance\n        sliderInstance = create(slider.value!, {\n          start: rangeSelected.value,\n          range: slideRange.value,\n          step: 1,\n          connect: true,\n          margin: 1\n        });\n\n        // Update the selected values when the slider update its values\n        sliderInstance.on('update', ([min, max]) => {\n          minSelected.value = Number(min);\n          maxSelected.value = Number(max);\n        });\n\n        // Emits the selected values when the slider values change\n        sliderInstance.on('change', () =>\n          emit('update:modelValue', { min: minSelected.value, max: maxSelected.value })\n        );\n      });\n\n      onUnmounted(() => {\n        // Waiting to finish the collapse animation before destroying it\n        setTimeout(sliderInstance.destroy.bind(sliderInstance), 600);\n      });\n\n      /**\n       * Watch the threshold prop to update the slider state and emit the selected values.\n       */\n      watch(\n        () => props.threshold,\n        ({ min, max }) => {\n          sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false);\n          emit('update:modelValue', { min, max });\n        }\n      );\n\n      /**\n       * Watch the modelValue prop to update the slider state.\n       *\n       * @remarks It only update the values if the values are corrects. It means,\n       * values within the threshold limits and not equal to the current values.\n       *\n       * @returns Undefined.\n       */\n      watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n        // Check if the values are the same\n        if (min === minSelected.value && max === maxSelected.value) {\n          return;\n        }\n\n        // Validate the values\n        const minValidated = min < props.threshold.min ? props.threshold.min : min;\n        const maxValidated = max > props.threshold.max ? props.threshold.max : max;\n\n        // Update the nouislider values\n        sliderInstance.set([minValidated, maxValidated]);\n\n        // Emit the selected values\n        if (minValidated !== min || maxValidated !== max) {\n          emit('update:modelValue', { min: minValidated, max: maxValidated });\n        }\n      });\n\n      return {\n        slider,\n        rangeSelected\n      };\n    }\n  });\n</script>\n<style lang=\"css\">\n  @import 'nouislider/dist/nouislider.css';\n  /** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n  .x-base-slider {\n    gap: 16px;\n  }\n\n  .x-base-slider,\n  .x-base-slider__selected-min,\n  .x-base-slider__selected-max {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n\n  .x-base-slider__selected {\n    display: inline-flex;\n  }\n\n  .x-base-slider__selected-min,\n  .x-base-slider__selected-max {\n    flex: 50%;\n  }\n\n  .x-base-slider__nouislider {\n    margin: 16px 0;\n    padding: 0 16px;\n  }\n\n  .x-base-slider__nouislider .noUi-handle {\n    box-shadow: none;\n  }\n\n  .x-base-slider__nouislider .noUi-handle:before,\n  .x-base-slider__nouislider .noUi-handle:after {\n    content: none;\n  }\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script>\n  import { BaseSlider } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSliderDemo',\n    components: {\n      BaseSlider\n    },\n    setup() {\n      const selectedRange = ref({ min: 0, max: 1000 });\n\n      return {\n        selectedRange\n      };\n    }\n  };\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script>\n  import { BaseSlider } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSliderDemo',\n    components: {\n      BaseSliderDemo\n    },\n    setup() {\n      const threshold = ref({ min: 0, max: 1000 });\n      const selectedRange = ref(threshold.value);\n\n      return {\n        selectedRange,\n        threshold\n      };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n    <p class=\"x-base-slider__selected-min\">\n      <span>min value</span>\n      <span>\n        {{ rangeSelected[0] }}\n      </span>\n    </p>\n    <p class=\"x-base-slider__selected-max\">\n      <span>max value</span>\n      <span>\n        {{ rangeSelected[1] }}\n      </span>\n    </p>\n  </BaseSlider>\n</template>\n\n<script>\n  import { BaseSlider } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSliderDemo',\n    components: {\n      BaseSliderDemo\n    },\n    setup() {\n      const threshold = ref({ min: 0, max: 1000 });\n      const selectedRange = ref(threshold.value);\n\n      return {\n        selectedRange,\n        threshold\n      };\n    }\n  };\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n    <input\n      @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n      class=\"x-input\"\n      name=\"min\"\n      type=\"number\"\n      :value=\"selectedRange.min\"\n      :aria-label=\"'min'\"\n    />\n\n    <input\n      @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n      style=\"display: block\"\n      class=\"x-input\"\n      name=\"max\"\n      type=\"number\"\n      :value=\"selectedRange.max\"\n      :aria-label=\"'max'\"\n    />\n  </BaseSlider>\n</template>\n\n<script>\n  import { BaseSlider } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSliderDemo',\n    components: {\n      BaseSliderDemo\n    },\n    setup() {\n      const threshold = ref({ min: 0, max: 1000 });\n      const selectedRange = ref(threshold.value);\n\n      return {\n        selectedRange,\n        threshold\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_createElementVNode","_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_toDisplayString"],"mappings":";;;;;qBAUW,KAAM,EAAA,eAAA,EAAA,CAAA;AACe,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,yBAAA,EAAA,CAAA;AAKrB,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,6BAA6B,EAAA,CAAA;AACpC,MAAA,UAAA,mBAAAA,kBAAA;AAAA,EAAsB,MAAA;AAAA,EAAA,IAAA;AAAA,EAAhB,WAAA;AAAA,EAAS,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA;;;;;;;;;SAfrB,WAAqF,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAA7EC,SAAS,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAF,kBAAA;AAFrB,MAAA,KAAA;AAAA,MAAA;AAAA,QAAA,GAAA,EAAA,QAAA;QAGI,KAoBM,EAAAG,cAAA,CAAA,CAAA,2BAAA,CAAA,CAAA,MAAA,CAAA,CAAA,EAAA,IAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OAAA;AAdJ,MAAA,IAAA;AAAA,MAAA,CAAA;AAAA;AAAA,KAaO;AAAA,IAAAH,kBAAA,CAZL,KAKI,EAAA,UAAA,EAAA;AAAA,MAAAI,UAAA,CAJF,IAAsB,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,EAAA,MAAA;AAAA,QAAAJ,kBAAA,CACtB,GAEO,EAAA,UAAA,EAAA;AAAA,UAAA,UAAA;AAET,UAAAA,kBAAA;AAAA,YAKI,MAAA;AAAA,YALJ,IAAA;AAAA,YAKIK,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,CAAA,CAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,CAAA;2BAHF,GAEO,EAAA,UAAA,EAAA;AAAA,UAAA,UAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-slider.vue.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n  <div class=\"x-base-slider\">\n    <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n    <div class=\"x-base-slider__selected\">\n      <!--\n        @slot Default selected range rendering. This slot will be used by default for rendering\n        the selected range without an specific slot implementation.\n            @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n      -->\n      <slot :range-selected=\"rangeSelected\">\n        <p class=\"x-base-slider__selected-min\">\n          <span>min value</span>\n          <span>\n            {{ rangeSelected[0] }}\n          </span>\n        </p>\n        <p class=\"x-base-slider__selected-max\">\n          <span>max value</span>\n          <span>\n            {{ rangeSelected[1] }}\n          </span>\n        </p>\n      </slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport type { API } from 'nouislider'\nimport type { PropType } from 'vue'\nimport { create } from 'nouislider'\nimport { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'\n\n/**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\nexport default defineComponent({\n  name: 'BaseSlider',\n  props: {\n    /** The threshold prop sets the limits for the slider. */\n    threshold: {\n      type: Object as PropType<{ min: number; max: number }>,\n      default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER }),\n    },\n    /** The modelValue prop sets the initial values for the slider. */\n    modelValue: {\n      type: Object as PropType<{ min: number; max: number }>,\n      required: true,\n    },\n    /** Class to be able to customize slider styles. */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n  /**\n   * The component emits an event with the selected values whenever\n   * the user changes the slider.\n   */\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /** The nouislider instance. */\n    let sliderInstance: API\n    /** The nouislider element reference. */\n    const slider = ref<HTMLElement>()\n\n    /** The selected min value. */\n    const minSelected = ref(props.modelValue?.min ?? props.threshold.min)\n    /** The selected max value. */\n    const maxSelected = ref(props.modelValue?.max ?? props.threshold.max)\n\n    /** The selected range as an array. */\n    const rangeSelected = computed(() => [minSelected.value, maxSelected.value])\n    /** The range for the nouislider. */\n    const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }))\n\n    onMounted(() => {\n      // Create the slider instance\n      sliderInstance = create(slider.value!, {\n        start: rangeSelected.value,\n        range: slideRange.value,\n        step: 1,\n        connect: true,\n        margin: 1,\n      })\n\n      // Update the selected values when the slider update its values\n      sliderInstance.on('update', ([min, max]) => {\n        minSelected.value = Number(min)\n        maxSelected.value = Number(max)\n      })\n\n      // Emits the selected values when the slider values change\n      sliderInstance.on('change', () =>\n        emit('update:modelValue', { min: minSelected.value, max: maxSelected.value }),\n      )\n    })\n\n    onUnmounted(() => {\n      // Waiting to finish the collapse animation before destroying it\n      setTimeout(sliderInstance.destroy.bind(sliderInstance), 600)\n    })\n\n    /**\n     * Watch the threshold prop to update the slider state and emit the selected values.\n     */\n    watch(\n      () => props.threshold,\n      ({ min, max }) => {\n        sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false)\n        emit('update:modelValue', { min, max })\n      },\n    )\n\n    /**\n     * Watch the modelValue prop to update the slider state.\n     *\n     * @remarks It only update the values if the values are corrects. It means,\n     * values within the threshold limits and not equal to the current values.\n     *\n     * @returns Undefined.\n     */\n    watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n      // Check if the values are the same\n      if (min === minSelected.value && max === maxSelected.value) {\n        return\n      }\n\n      // Validate the values\n      const minValidated = min < props.threshold.min ? props.threshold.min : min\n      const maxValidated = max > props.threshold.max ? props.threshold.max : max\n\n      // Update the nouislider values\n      sliderInstance.set([minValidated, maxValidated])\n\n      // Emit the selected values\n      if (minValidated !== min || maxValidated !== max) {\n        emit('update:modelValue', { min: minValidated, max: maxValidated })\n      }\n    })\n\n    return {\n      slider,\n      rangeSelected,\n    }\n  },\n})\n</script>\n<style lang=\"css\">\n@import 'nouislider/dist/nouislider.css';\n/** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n.x-base-slider {\n  gap: 16px;\n}\n\n.x-base-slider,\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-slider__selected {\n  display: inline-flex;\n}\n\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  flex: 50%;\n}\n\n.x-base-slider__nouislider {\n  margin: 16px 0;\n  padding: 0 16px;\n}\n\n.x-base-slider__nouislider .noUi-handle {\n  box-shadow: none;\n}\n\n.x-base-slider__nouislider .noUi-handle:before,\n.x-base-slider__nouislider .noUi-handle:after {\n  content: none;\n}\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSliderDemo',\n  components: {\n    BaseSlider,\n  },\n  setup() {\n    const selectedRange = ref({ min: 0, max: 1000 })\n\n    return {\n      selectedRange,\n    }\n  },\n}\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSliderDemo',\n  components: {\n    BaseSliderDemo,\n  },\n  setup() {\n    const threshold = ref({ min: 0, max: 1000 })\n    const selectedRange = ref(threshold.value)\n\n    return {\n      selectedRange,\n      threshold,\n    }\n  },\n}\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n    <p class=\"x-base-slider__selected-min\">\n      <span>min value</span>\n      <span>\n        {{ rangeSelected[0] }}\n      </span>\n    </p>\n    <p class=\"x-base-slider__selected-max\">\n      <span>max value</span>\n      <span>\n        {{ rangeSelected[1] }}\n      </span>\n    </p>\n  </BaseSlider>\n</template>\n\n<script>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSliderDemo',\n  components: {\n    BaseSliderDemo,\n  },\n  setup() {\n    const threshold = ref({ min: 0, max: 1000 })\n    const selectedRange = ref(threshold.value)\n\n    return {\n      selectedRange,\n      threshold,\n    }\n  },\n}\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n    <input\n      @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n      class=\"x-input\"\n      name=\"min\"\n      type=\"number\"\n      :value=\"selectedRange.min\"\n      :aria-label=\"'min'\"\n    />\n\n    <input\n      @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n      style=\"display: block\"\n      class=\"x-input\"\n      name=\"max\"\n      type=\"number\"\n      :value=\"selectedRange.max\"\n      :aria-label=\"'max'\"\n    />\n  </BaseSlider>\n</template>\n\n<script>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSliderDemo',\n  components: {\n    BaseSliderDemo,\n  },\n  setup() {\n    const threshold = ref({ min: 0, max: 1000 })\n    const selectedRange = ref(threshold.value)\n\n    return {\n      selectedRange,\n      threshold,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createElementVNode","_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_toDisplayString"],"mappings":";;;;;qBAUW,KAAM,EAAA,eAAA,EAAA,CAAA;AACe,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,yBAAA,EAAA,CAAA;AAKrB,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,6BAA6B,EAAA,CAAA;AACpC,MAAA,UAAA,mBAAAA,kBAAA;AAAA,EAAsB,MAAA;AAAA,EAAA,IAAA;AAAA,EAAhB,WAAA;AAAA,EAAS,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA;;;;;;;;;SAfrB,WAAqF,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAA7EC,SAAS,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAF,kBAAA;AAFrB,MAAA,KAAA;AAAA,MAAA;AAAA,QAAA,GAAA,EAAA,QAAA;QAGI,KAoBM,EAAAG,cAAA,CAAA,CAAA,2BAAA,CAAA,CAAA,MAAA,CAAA,CAAA,EAAA,IAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OAAA;AAdJ,MAAA,IAAA;AAAA,MAAA,CAAA;AAAA;AAAA,KAaO;AAAA,IAAAH,kBAAA,CAZL,KAKI,EAAA,UAAA,EAAA;AAAA,MAAAI,UAAA,CAJF,IAAsB,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,EAAA,MAAA;AAAA,QAAAJ,kBAAA,CACtB,GAEO,EAAA,UAAA,EAAA;AAAA,UAAA,UAAA;AAET,UAAAA,kBAAA;AAAA,YAKI,MAAA;AAAA,YALJ,IAAA;AAAA,YAKIK,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,CAAA,CAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,CAAA;2BAHF,GAEO,EAAA,UAAA,EAAA;AAAA,UAAA,UAAA;;;;;;;;;;;;;;;;;"}

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

@@ -16,18 +16,18 @@ var _sfc_main = defineComponent({
         /** The threshold prop sets the limits for the slider. */
         threshold: {
             type: Object,
-            default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER })
+            default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER }),
         },
         /** The modelValue prop sets the initial values for the slider. */
         modelValue: {
             type: Object,
-            required: true
+            required: true,
         },
         /** Class to be able to customize slider styles. */
         contentClass: {
             type: String,
-            default: ''
-        }
+            default: '',
+        },
     },
     /**
      * The component emits an event with the selected values whenever
@@ -54,7 +54,7 @@ var _sfc_main = defineComponent({
                 range: slideRange.value,
                 step: 1,
                 connect: true,
-                margin: 1
+                margin: 1,
             });
             // Update the selected values when the slider update its values
             sliderInstance.on('update', ([min, max]) => {
@@ -100,9 +100,9 @@ var _sfc_main = defineComponent({
         });
         return {
             slider,
-            rangeSelected
+            rangeSelected,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"base-slider.vue2.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n  <div class=\"x-base-slider\">\n    <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n    <div class=\"x-base-slider__selected\">\n      <!--\n        @slot Default selected range rendering. This slot will be used by default for rendering\n        the selected range without an specific slot implementation.\n            @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n      -->\n      <slot :rangeSelected=\"rangeSelected\">\n        <p class=\"x-base-slider__selected-min\">\n          <span>min value</span>\n          <span>\n            {{ rangeSelected[0] }}\n          </span>\n        </p>\n        <p class=\"x-base-slider__selected-max\">\n          <span>max value</span>\n          <span>\n            {{ rangeSelected[1] }}\n          </span>\n        </p>\n      </slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { API, create } from 'nouislider';\n  import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue';\n\n  /**\n   * This component implements a range slider and prints the selected values.\n   * It receives a threshold prop to set the limits and uses v-model to get and set\n   * the selected values.\n   *\n   * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n   * for the slider implementation.\n   *\n   */\n  export default defineComponent({\n    name: 'BaseSlider',\n    props: {\n      /** The threshold prop sets the limits for the slider. */\n      threshold: {\n        type: Object as PropType<{ min: number; max: number }>,\n        default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER })\n      },\n      /** The modelValue prop sets the initial values for the slider. */\n      modelValue: {\n        type: Object as PropType<{ min: number; max: number }>,\n        required: true\n      },\n      /** Class to be able to customize slider styles. */\n      contentClass: {\n        type: String,\n        default: ''\n      }\n    },\n    /**\n     * The component emits an event with the selected values whenever\n     * the user changes the slider.\n     */\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      /** The nouislider instance. */\n      let sliderInstance: API;\n      /** The nouislider element reference. */\n      const slider = ref<HTMLElement>();\n\n      /** The selected min value. */\n      const minSelected = ref(props.modelValue?.min ?? props.threshold.min);\n      /** The selected max value. */\n      const maxSelected = ref(props.modelValue?.max ?? props.threshold.max);\n\n      /** The selected range as an array. */\n      const rangeSelected = computed(() => [minSelected.value, maxSelected.value]);\n      /** The range for the nouislider. */\n      const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }));\n\n      onMounted(() => {\n        // Create the slider instance\n        sliderInstance = create(slider.value!, {\n          start: rangeSelected.value,\n          range: slideRange.value,\n          step: 1,\n          connect: true,\n          margin: 1\n        });\n\n        // Update the selected values when the slider update its values\n        sliderInstance.on('update', ([min, max]) => {\n          minSelected.value = Number(min);\n          maxSelected.value = Number(max);\n        });\n\n        // Emits the selected values when the slider values change\n        sliderInstance.on('change', () =>\n          emit('update:modelValue', { min: minSelected.value, max: maxSelected.value })\n        );\n      });\n\n      onUnmounted(() => {\n        // Waiting to finish the collapse animation before destroying it\n        setTimeout(sliderInstance.destroy.bind(sliderInstance), 600);\n      });\n\n      /**\n       * Watch the threshold prop to update the slider state and emit the selected values.\n       */\n      watch(\n        () => props.threshold,\n        ({ min, max }) => {\n          sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false);\n          emit('update:modelValue', { min, max });\n        }\n      );\n\n      /**\n       * Watch the modelValue prop to update the slider state.\n       *\n       * @remarks It only update the values if the values are corrects. It means,\n       * values within the threshold limits and not equal to the current values.\n       *\n       * @returns Undefined.\n       */\n      watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n        // Check if the values are the same\n        if (min === minSelected.value && max === maxSelected.value) {\n          return;\n        }\n\n        // Validate the values\n        const minValidated = min < props.threshold.min ? props.threshold.min : min;\n        const maxValidated = max > props.threshold.max ? props.threshold.max : max;\n\n        // Update the nouislider values\n        sliderInstance.set([minValidated, maxValidated]);\n\n        // Emit the selected values\n        if (minValidated !== min || maxValidated !== max) {\n          emit('update:modelValue', { min: minValidated, max: maxValidated });\n        }\n      });\n\n      return {\n        slider,\n        rangeSelected\n      };\n    }\n  });\n</script>\n<style lang=\"css\">\n  @import 'nouislider/dist/nouislider.css';\n  /** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n  .x-base-slider {\n    gap: 16px;\n  }\n\n  .x-base-slider,\n  .x-base-slider__selected-min,\n  .x-base-slider__selected-max {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n\n  .x-base-slider__selected {\n    display: inline-flex;\n  }\n\n  .x-base-slider__selected-min,\n  .x-base-slider__selected-max {\n    flex: 50%;\n  }\n\n  .x-base-slider__nouislider {\n    margin: 16px 0;\n    padding: 0 16px;\n  }\n\n  .x-base-slider__nouislider .noUi-handle {\n    box-shadow: none;\n  }\n\n  .x-base-slider__nouislider .noUi-handle:before,\n  .x-base-slider__nouislider .noUi-handle:after {\n    content: none;\n  }\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script>\n  import { BaseSlider } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSliderDemo',\n    components: {\n      BaseSlider\n    },\n    setup() {\n      const selectedRange = ref({ min: 0, max: 1000 });\n\n      return {\n        selectedRange\n      };\n    }\n  };\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script>\n  import { BaseSlider } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSliderDemo',\n    components: {\n      BaseSliderDemo\n    },\n    setup() {\n      const threshold = ref({ min: 0, max: 1000 });\n      const selectedRange = ref(threshold.value);\n\n      return {\n        selectedRange,\n        threshold\n      };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n    <p class=\"x-base-slider__selected-min\">\n      <span>min value</span>\n      <span>\n        {{ rangeSelected[0] }}\n      </span>\n    </p>\n    <p class=\"x-base-slider__selected-max\">\n      <span>max value</span>\n      <span>\n        {{ rangeSelected[1] }}\n      </span>\n    </p>\n  </BaseSlider>\n</template>\n\n<script>\n  import { BaseSlider } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSliderDemo',\n    components: {\n      BaseSliderDemo\n    },\n    setup() {\n      const threshold = ref({ min: 0, max: 1000 });\n      const selectedRange = ref(threshold.value);\n\n      return {\n        selectedRange,\n        threshold\n      };\n    }\n  };\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n    <input\n      @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n      class=\"x-input\"\n      name=\"min\"\n      type=\"number\"\n      :value=\"selectedRange.min\"\n      :aria-label=\"'min'\"\n    />\n\n    <input\n      @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n      style=\"display: block\"\n      class=\"x-input\"\n      name=\"max\"\n      type=\"number\"\n      :value=\"selectedRange.max\"\n      :aria-label=\"'max'\"\n    />\n  </BaseSlider>\n</template>\n\n<script>\n  import { BaseSlider } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSliderDemo',\n    components: {\n      BaseSliderDemo\n    },\n    setup() {\n      const threshold = ref({ min: 0, max: 1000 });\n      const selectedRange = ref(threshold.value);\n\n      return {\n        selectedRange,\n        threshold\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-slider.vue2.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n  <div class=\"x-base-slider\">\n    <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n    <div class=\"x-base-slider__selected\">\n      <!--\n        @slot Default selected range rendering. This slot will be used by default for rendering\n        the selected range without an specific slot implementation.\n            @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n      -->\n      <slot :range-selected=\"rangeSelected\">\n        <p class=\"x-base-slider__selected-min\">\n          <span>min value</span>\n          <span>\n            {{ rangeSelected[0] }}\n          </span>\n        </p>\n        <p class=\"x-base-slider__selected-max\">\n          <span>max value</span>\n          <span>\n            {{ rangeSelected[1] }}\n          </span>\n        </p>\n      </slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport type { API } from 'nouislider'\nimport type { PropType } from 'vue'\nimport { create } from 'nouislider'\nimport { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'\n\n/**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\nexport default defineComponent({\n  name: 'BaseSlider',\n  props: {\n    /** The threshold prop sets the limits for the slider. */\n    threshold: {\n      type: Object as PropType<{ min: number; max: number }>,\n      default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER }),\n    },\n    /** The modelValue prop sets the initial values for the slider. */\n    modelValue: {\n      type: Object as PropType<{ min: number; max: number }>,\n      required: true,\n    },\n    /** Class to be able to customize slider styles. */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n  /**\n   * The component emits an event with the selected values whenever\n   * the user changes the slider.\n   */\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /** The nouislider instance. */\n    let sliderInstance: API\n    /** The nouislider element reference. */\n    const slider = ref<HTMLElement>()\n\n    /** The selected min value. */\n    const minSelected = ref(props.modelValue?.min ?? props.threshold.min)\n    /** The selected max value. */\n    const maxSelected = ref(props.modelValue?.max ?? props.threshold.max)\n\n    /** The selected range as an array. */\n    const rangeSelected = computed(() => [minSelected.value, maxSelected.value])\n    /** The range for the nouislider. */\n    const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }))\n\n    onMounted(() => {\n      // Create the slider instance\n      sliderInstance = create(slider.value!, {\n        start: rangeSelected.value,\n        range: slideRange.value,\n        step: 1,\n        connect: true,\n        margin: 1,\n      })\n\n      // Update the selected values when the slider update its values\n      sliderInstance.on('update', ([min, max]) => {\n        minSelected.value = Number(min)\n        maxSelected.value = Number(max)\n      })\n\n      // Emits the selected values when the slider values change\n      sliderInstance.on('change', () =>\n        emit('update:modelValue', { min: minSelected.value, max: maxSelected.value }),\n      )\n    })\n\n    onUnmounted(() => {\n      // Waiting to finish the collapse animation before destroying it\n      setTimeout(sliderInstance.destroy.bind(sliderInstance), 600)\n    })\n\n    /**\n     * Watch the threshold prop to update the slider state and emit the selected values.\n     */\n    watch(\n      () => props.threshold,\n      ({ min, max }) => {\n        sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false)\n        emit('update:modelValue', { min, max })\n      },\n    )\n\n    /**\n     * Watch the modelValue prop to update the slider state.\n     *\n     * @remarks It only update the values if the values are corrects. It means,\n     * values within the threshold limits and not equal to the current values.\n     *\n     * @returns Undefined.\n     */\n    watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n      // Check if the values are the same\n      if (min === minSelected.value && max === maxSelected.value) {\n        return\n      }\n\n      // Validate the values\n      const minValidated = min < props.threshold.min ? props.threshold.min : min\n      const maxValidated = max > props.threshold.max ? props.threshold.max : max\n\n      // Update the nouislider values\n      sliderInstance.set([minValidated, maxValidated])\n\n      // Emit the selected values\n      if (minValidated !== min || maxValidated !== max) {\n        emit('update:modelValue', { min: minValidated, max: maxValidated })\n      }\n    })\n\n    return {\n      slider,\n      rangeSelected,\n    }\n  },\n})\n</script>\n<style lang=\"css\">\n@import 'nouislider/dist/nouislider.css';\n/** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n.x-base-slider {\n  gap: 16px;\n}\n\n.x-base-slider,\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-slider__selected {\n  display: inline-flex;\n}\n\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  flex: 50%;\n}\n\n.x-base-slider__nouislider {\n  margin: 16px 0;\n  padding: 0 16px;\n}\n\n.x-base-slider__nouislider .noUi-handle {\n  box-shadow: none;\n}\n\n.x-base-slider__nouislider .noUi-handle:before,\n.x-base-slider__nouislider .noUi-handle:after {\n  content: none;\n}\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSliderDemo',\n  components: {\n    BaseSlider,\n  },\n  setup() {\n    const selectedRange = ref({ min: 0, max: 1000 })\n\n    return {\n      selectedRange,\n    }\n  },\n}\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSliderDemo',\n  components: {\n    BaseSliderDemo,\n  },\n  setup() {\n    const threshold = ref({ min: 0, max: 1000 })\n    const selectedRange = ref(threshold.value)\n\n    return {\n      selectedRange,\n      threshold,\n    }\n  },\n}\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n    <p class=\"x-base-slider__selected-min\">\n      <span>min value</span>\n      <span>\n        {{ rangeSelected[0] }}\n      </span>\n    </p>\n    <p class=\"x-base-slider__selected-max\">\n      <span>max value</span>\n      <span>\n        {{ rangeSelected[1] }}\n      </span>\n    </p>\n  </BaseSlider>\n</template>\n\n<script>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSliderDemo',\n  components: {\n    BaseSliderDemo,\n  },\n  setup() {\n    const threshold = ref({ min: 0, max: 1000 })\n    const selectedRange = ref(threshold.value)\n\n    return {\n      selectedRange,\n      threshold,\n    }\n  },\n}\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n    <input\n      @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n      class=\"x-input\"\n      name=\"min\"\n      type=\"number\"\n      :value=\"selectedRange.min\"\n      :aria-label=\"'min'\"\n    />\n\n    <input\n      @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n      style=\"display: block\"\n      class=\"x-input\"\n      name=\"max\"\n      type=\"number\"\n      :value=\"selectedRange.max\"\n      :aria-label=\"'max'\"\n    />\n  </BaseSlider>\n</template>\n\n<script>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSliderDemo',\n  components: {\n    BaseSliderDemo,\n  },\n  setup() {\n    const threshold = ref({ min: 0, max: 1000 })\n    const selectedRange = ref(threshold.value)\n\n    return {\n      selectedRange,\n      threshold,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -17,10 +17,10 @@ const _hoisted_3 = [
 ];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("button", {
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args)),
     "aria-checked": _ctx.modelValue || void 0,
     class: normalizeClass([_ctx.cssClasses, "x-switch"]),
-    role: "switch"
+    role: "switch",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
   }, [..._hoisted_3], 10, _hoisted_1);
 }
 var BaseSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3ae6056b"]]);

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

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\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\n  export 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 x-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 @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\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>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_pushScopeId","_popScopeId","_createElementVNode","_openBlock","cssClasses","_normalizeClass"],"mappings":";;;;;AAQI,MAAA,YAAA,GAAA,CAAA,CAAA,MAAAA,WAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,EAAAC,UAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;MAAA,UAAgC,mBAAA,YAAA,CAAA,sBAAAC,kBAAA;AAAA,EAAA,KAAA;AAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA,CAAA;;;;AAN/B,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACP,EAAA,OAAAC,SAAA,uBAA4B,QAAS,EAAA;AAAA,IACrC,OAJL,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAIYC,CAAU,CAAA,GAAA,CAAA,GAAA,IAAA,KACZ,IAAU,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAChB,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IANjB,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IAAA,IAAA,EAAA,QAAA;;;;;;;"}
+{"version":3,"file":"base-switch.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 x-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 @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\nimport { BaseSwitch } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSwitchDemo',\n  components: {\n    BaseSwitch,\n  },\n  data() {\n    return {\n      value: false,\n    }\n  },\n}\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>\nimport { BaseSwitch } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSwitchDemo',\n  components: {\n    BaseSwitch,\n  },\n  data() {\n    return {\n      value: false,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_pushScopeId","_popScopeId","_createElementVNode","modelValue","_openBlock","_normalizeClass"],"mappings":";;;;;AAQI,MAAA,YAAA,GAAA,CAAA,CAAA,MAAAA,WAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,EAAAC,UAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;MAAA,UAAgC,mBAAA,YAAA,CAAA,sBAAAC,kBAAA;AAAA,EAAA,KAAA;AAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA,CAAA;;;;SAN/B,WAAcC,CAAAA,IAAAA,EAAAA,MAAAA,EAAU,QAAI,MAAS,EAAA,KAAA,EAAA,QAAA,EAAA;AAChC,EAAA,OAAAC,SAAA,uBAAY,QACZ,EAAA;AAAA,IACN,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IACZ,OAAKC,cAAE,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IANZ,IAAA,EAAA,QAAA;AAAA,IAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;;;;;;;"}

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

@@ -17,8 +17,8 @@ var _sfc_main = defineComponent({
     props: {
         modelValue: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
     emits: ['update:modelValue'],
     setup(props, { emit }) {
@@ -30,7 +30,7 @@ var _sfc_main = defineComponent({
          * @internal
          */
         const cssClasses = computed(() => ({
-            'x-switch--is-selected x-selected': props.modelValue
+            'x-switch--is-selected x-selected': props.modelValue,
         }));
         /**
          * Emits an event with the new value of the switch.
@@ -43,9 +43,9 @@ var _sfc_main = defineComponent({
         };
         return {
             cssClasses,
-            toggle
+            toggle,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\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\n  export 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 x-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 @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\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>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBE;;;;;;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,KAAI;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAgB,OAAO;YAChD,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAC,CAAA;AAEH;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;AAClC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AACrC,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"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 x-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 @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\nimport { BaseSwitch } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSwitchDemo',\n  components: {\n    BaseSwitch,\n  },\n  data() {\n    return {\n      value: false,\n    }\n  },\n}\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>\nimport { BaseSwitch } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSwitchDemo',\n  components: {\n    BaseSwitch,\n  },\n  data() {\n    return {\n      value: false,\n    }\n  },\n}\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,UAAW,GAAE,QAAQ,CAAgB,OAAO;YAChD,kCAAkC,EAAE,KAAK,CAAC,UAAU;AACrD,SAAA,CAAC,CAAA,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAS,CAAA;AACjC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAA,CAAA;AACpC,SAAA,CAAA;QAEA,OAAO;YACL,UAAU;YACV,MAAM;SACR,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -0,0 +1,17 @@
+import _sfc_main from './base-teleport.vue2.js';
+import { openBlock, createBlock, Teleport, createElementVNode, renderSlot } from 'vue';
+import './base-teleport.vue3.js';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
+
+const _hoisted_1 = { class: "x-base-teleport" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Teleport, { to: _ctx.target }, [
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ], 8, ["to"]);
+}
+var baseTeleport = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { baseTeleport as default };
+//# sourceMappingURL=base-teleport.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"target\">\n    <div class=\"x-base-teleport\">\n      <slot></slot>\n    </div>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    target: {\n      type: String,\n      required: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":["_openBlock","_createBlock","_Teleport","_createElementVNode"],"mappings":";;;;;;AAEI,SAAA,WAAA,CAAA,IAAA,EAEM,QAFN,MAEM,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SADJA,SAAa,EAAA,EAAAC,WAAA,CAAAC,QAAA,EAAA,EAAA,EAAA,EAAA,IAAA,CAAA,MAAA,EAAA,EAAA;AAAA,IAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;;;;;;;;;"}

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

@@ -0,0 +1,14 @@
+import { defineComponent } from 'vue';
+
+var _sfc_main = defineComponent({
+    name: 'BaseTeleport',
+    props: {
+        target: {
+            type: String,
+            required: true,
+        },
+    },
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=base-teleport.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"target\">\n    <div class=\"x-base-teleport\">\n      <slot></slot>\n    </div>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    target: {\n      type: String,\n      required: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":[],"mappings":";;AAWA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import injectCss from '../../tools/inject-css.js';
+
+var css = ":has(>.x-base-teleport)>:not(.x-base-teleport){display:none}";
+injectCss(css);
+
+export { css, css as default };
+//# sourceMappingURL=base-teleport.vue3.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"base-variable-column-grid.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\" v-slot:[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\">\n  import { computed, defineComponent, PropType, ref } from 'vue';\n  import { ListItem } from '../utils/types';\n  import { AnimationProp } from '../types/animation-prop';\n  import { useXBus } from '../composables/use-x-bus';\n  import 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   */\n  export 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## Example\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 `scopedSlots`.\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>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    },\n    methods: {\n      setColumns(columns) {\n        this.$x.emit('UserClickedColumnPicker', columns);\n      }\n    }\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>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    },\n    methods: {\n      setColumns(columns) {\n        this.$x.emit('UserClickedColumnPicker', columns);\n      }\n    }\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>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","items","slots"],"mappings":";;;;;8BACEA,gBASW,CAAA,UAAA,CAAA,CAAA;AATuB,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,mBAAA,EAAA;AAAA,IAAG,SAAOC,EAAAA,IAAAA,CAAAA,SAAAA;AAAAA,IADtE,OAAA,EAAA,IAAA,CAAA,eAAA;AAAA,IAEkCC,KAAAA,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,GAAAA,EAAAA,WAAAA,CAAAA;;;;eAAc,IAAM,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,IAAA,KAAA;AAFtD,MAAA,OAAA;AAAA,QAAA,IAAA;;;;;;;;;;;;"}
+{"version":3,"file":"base-variable-column-grid.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## Example\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 `scopedSlots`.\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>\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultsSection',\n  components: {\n    BaseVariableColumnGrid,\n  },\n  data() {\n    return {\n      animation: StaggeredFadeAndSlide,\n      items: [\n        {\n          id: 'res-1',\n          modelName: 'Result',\n          name: 'Product 1',\n        },\n        {\n          id: 'res-2',\n          modelName: 'Result',\n          name: 'Product 2',\n        },\n      ],\n    }\n  },\n  methods: {\n    setColumns(columns) {\n      this.$x.emit('UserClickedColumnPicker', columns)\n    },\n  },\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>\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultsSection',\n  components: {\n    BaseVariableColumnGrid,\n  },\n  data() {\n    return {\n      animation: StaggeredFadeAndSlide,\n      items: [\n        {\n          id: 'res-1',\n          modelName: 'Result',\n          name: 'Product 1',\n        },\n        {\n          id: 'res-2',\n          modelName: 'Result',\n          name: 'Product 2',\n        },\n      ],\n    }\n  },\n  methods: {\n    setColumns(columns) {\n      this.$x.emit('UserClickedColumnPicker', columns)\n    },\n  },\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>\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultsSection',\n  components: {\n    BaseVariableColumnGrid,\n  },\n  data() {\n    return {\n      animation: StaggeredFadeAndSlide,\n      items: [\n        {\n          id: 'res-1',\n          modelName: 'Result',\n          name: 'Product 1',\n        },\n        {\n          id: 'res-2',\n          modelName: 'Result',\n          name: 'Product 2',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","items","slots"],"mappings":";;;;;8BACEA,gBASW,CAAA,UAAA,CAAA,CAAA;AATuB,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,mBAAA,EAAA;AAAA,IAAG,SAAOC,EAAAA,IAAAA,CAAAA,SAAAA;AAAAA,IADtE,OAAA,EAAA,IAAA,CAAA,eAAA;AAAA,IAEkCC,KAAAA,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,GAAAA,EAAAA,WAAAA,CAAAA;;;;eAAQ,IAAM,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,IAAA,KAAA;AAFhD,MAAA,OAAA;AAAA,QAAA,IAAA;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed } from 'vue';
-import { AnimationProp } from '../types/animation-prop.js';
 import { useXBus } from '../composables/use-x-bus.js';
+import { AnimationProp } from '../types/animation-prop.js';
 import BaseGrid from './base-grid.vue.js';
 
 /**
@@ -14,7 +14,7 @@ import BaseGrid from './base-grid.vue.js';
 var _sfc_main = defineComponent({
     name: 'BaseVariableColumnGrid',
     components: {
-        BaseGrid
+        BaseGrid,
     },
     props: {
         /**
@@ -24,7 +24,7 @@ var _sfc_main = defineComponent({
          */
         animation: {
             type: AnimationProp,
-            default: 'ul'
+            default: 'ul',
         },
         /**
          * The list of items to be rendered.
@@ -42,8 +42,8 @@ var _sfc_main = defineComponent({
          */
         columns: {
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     setup(props, { slots }) {
         const bus = useXBus();
@@ -73,9 +73,9 @@ var _sfc_main = defineComponent({
             .subscribe(newColumns => (providedColumns.value = newColumns));
         return {
             columnsToRender,
-            slots
+            slots,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };