@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

package/js/components/base-keyboard-navigation.vue.js

@@ -1,85 +1,25 @@
-import script from './base-keyboard-navigation.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './base-keyboard-navigation.vue2.js';
+import { openBlock, createElementBlock, withKeys, withModifiers, createCommentVNode, renderSlot } from 'vue';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
     "div",
     {
-      staticClass: "x-keyboard-navigation",
-      attrs: { "data-test": "keyboard-navigation" },
-      on: {
-        keydown: function ($event) {
-          if (
-            !$event.type.indexOf("key") &&
-            _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]) &&
-            _vm._k($event.keyCode, "down", 40, $event.key, [
-              "Down",
-              "ArrowDown",
-            ]) &&
-            _vm._k($event.keyCode, "right", 39, $event.key, [
-              "Right",
-              "ArrowRight",
-            ]) &&
-            _vm._k($event.keyCode, "left", 37, $event.key, [
-              "Left",
-              "ArrowLeft",
-            ])
-          ) {
-            return null
-          }
-          if ("button" in $event && $event.button !== 2) {
-            return null
-          }
-          if ("button" in $event && $event.button !== 0) {
-            return null
-          }
-          $event.preventDefault();
-          return _vm.focusNextNavigableElement.apply(null, arguments)
-        },
-      },
+      ref: "el",
+      onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => _ctx.focusNextNavigableElement && _ctx.focusNextNavigableElement(...args), ["prevent"]), ["up", "down", "right", "left"])),
+      class: "x-keyboard-navigation",
+      "data-test": "keyboard-navigation"
     },
-    [_vm._t("default")],
-    2
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
+    [
+      createCommentVNode(" @slot (Required) Container content "),
+      renderSlot(_ctx.$slots, "default")
+    ],
+    544
+    /* NEED_HYDRATION, NEED_PATCH */
   );
+}
+var baseKeyboardNavigation = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { baseKeyboardNavigation as default };
 //# sourceMappingURL=base-keyboard-navigation.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-keyboard-navigation.vue.js","sources":["../../../src/components/base-keyboard-navigation.vue"],"sourcesContent":["<template>\n  <div\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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\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 { XOn } from './decorators/bus.decorators';\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  @Component\n  export default class BaseKeyboardNavigation extends Vue {\n    /**\n     * An array of {@link TakeNavigationControl} objects defining when to\n     * take control of the keyboard navigation.\n     */\n    @Prop({\n      default: () => [\n        { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }\n      ]\n    })\n    protected navigationHijacker!: TakeNavigationControl[];\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    @Prop({ default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' }) })\n    protected eventsForDirectionLimit!: Partial<EventsForDirectionLimit>;\n\n    /**\n     * The {@link SpatialNavigation} service to use.\n     */\n    protected navigationService!: SpatialNavigation;\n\n    /**\n     * The element to focus.\n     */\n    protected elementToFocus: HTMLElement | undefined;\n\n    mounted(): void {\n      // TODO Replace this with injection\n      this.navigationService = new DirectionalFocusNavigationService(this.$el as HTMLElement);\n    }\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    protected get navigationHijackerEvents(): XEventsOf<ArrowKey>[] {\n      const eventsSet = this.navigationHijacker.map(({ xEvent }) => xEvent);\n      return Array.from(new Set(eventsSet));\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    @XOn(component => (component as BaseKeyboardNavigation).navigationHijackerEvents)\n    triggerNavigation(eventPayload: ArrowKey, metadata: WireMetadata): void {\n      if (this.hasToTakeNavigationControl(eventPayload, metadata)) {\n        this.focusNextNavigableElement(eventPayload);\n      }\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    private hasToTakeNavigationControl(eventPayload: ArrowKey, metadata: WireMetadata): boolean {\n      return this.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    protected focusNextNavigableElement(direction: ArrowKey | KeyboardEvent): void {\n      const dir = typeof direction === 'object' ? (direction.key as ArrowKey) : direction;\n      const nextElementToFocus = this.navigationService?.navigateTo(dir);\n\n      if (this.elementToFocus !== nextElementToFocus) {\n        this.elementToFocus = nextElementToFocus;\n        this.elementToFocus.focus();\n      } else {\n        this.emitDirectionalLimitReached(dir);\n        this.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    private emitDirectionalLimitReached(direction: ArrowKey): void {\n      const xEvent = this.eventsForDirectionLimit?.[direction];\n      if (xEvent) {\n        this.$x.emit(xEvent, undefined, { target: this.elementToFocus });\n      }\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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-keyboard-navigation.vue.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":["_openBlock","_createElementBlock","_withKeys","_withModifiers","_createCommentVNode"],"mappings":";;;;SAEQ,WAAI,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACPA,SAAO,EAAA,EAAAC,kBAAA;AAAA,IAHZ,KAAA;AAAA,IAAA;AAAA,MAII,GAAK,EAAA,IAAA;AAAA,MACL,SAAA,EAAS,OAAC,CAAqB,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,QAAA,CAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,yBAAA,IAAA,IAAA,CAAA,yBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAA,uBAAA;AAE/B,MAAA,WAAA,EAAA,qBAAA;AAAA,KAAA;AACA,IAAA;AAAA,MAAAC,kBAAA,CAAA,sCAAA,CAAA;;;;;;;;;;;"}

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

@@ -1,8 +1,17 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
+import { defineComponent, ref, computed, onMounted } from 'vue';
 import { DirectionalFocusNavigationService } from '../services/directional-focus-navigation.service.js';
-import { XOn } from './decorators/bus.decorators.js';
+import '../composables/create-use-device.js';
+import '@vue/devtools-api';
+import '../plugins/devtools/timeline.devtools.js';
+import '@empathyco/x-utils';
+import 'rxjs/operators';
+import 'rxjs';
+import '../plugins/devtools/colors.utils.js';
+import '../plugins/x-bus.js';
+import '../plugins/x-plugin.js';
+import 'vuex';
+import { useXBus } from '../composables/use-x-bus.js';
+import '@vueuse/core';
 
 /**
  * Base component to handle keyboard navigation for elements inside it. It has a required slot to
@@ -16,95 +25,114 @@ import { XOn } from './decorators/bus.decorators.js';
  *
  * @public
  */
-let BaseKeyboardNavigation = class BaseKeyboardNavigation extends Vue {
-    mounted() {
-        // TODO Replace this with injection
-        this.navigationService = new DirectionalFocusNavigationService(this.$el);
-    }
-    /**
-     * Get the navigation hijacker events.
-     *
-     * @remarks
-     * If the same {@link XEvent} is defined multiple times it is only inserted once.
-     *
-     * @returns The events to hijack the navigation.
-     */
-    get navigationHijackerEvents() {
-        const eventsSet = this.navigationHijacker.map(({ xEvent }) => xEvent);
-        return Array.from(new Set(eventsSet));
-    }
-    /**
-     * Trigger navigation if this component is in control of it.
-     *
-     * @param eventPayload - The {@link @empathyco/x-bus#SubjectPayload.eventPayload}.
-     * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.
-     * @public
-     */
-    triggerNavigation(eventPayload, metadata) {
-        if (this.hasToTakeNavigationControl(eventPayload, metadata)) {
-            this.focusNextNavigableElement(eventPayload);
+var _sfc_main = defineComponent({
+    name: 'BaseKeyboardNavigation',
+    props: {
+        /**
+         * An array of {@link TakeNavigationControl} objects defining when to
+         * take control of the keyboard navigation.
+         */
+        navigationHijacker: {
+            type: Array,
+            default: () => [
+                { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }
+            ]
+        },
+        /**
+         * An {@link EventsForDirectionLimit} to emit when the user is already at the furthest element
+         * in a direction and tries to keep going on the same direction.
+         */
+        eventsForDirectionLimit: {
+            type: Object,
+            default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' })
         }
-    }
-    /**
-     * Checks if the component has to take control of the keyboard navigation.
-     *
-     * @param eventPayload - The {@link ArrowKey}.
-     * @param metadata - The {@link WireMetadata}.
-     *
-     * @returns Whether the component needs to take control of the keyboard navigation or not.
-     * @internal
-     */
-    hasToTakeNavigationControl(eventPayload, metadata) {
-        return this.navigationHijacker.some(({ moduleName, direction }) => moduleName === metadata.moduleName && direction === eventPayload);
-    }
-    /**
-     * Focus the next navigable element returned by the navigation service.
-     *
-     * @param direction - The navigation direction.
-     * @internal
-     */
-    focusNextNavigableElement(direction) {
-        const dir = typeof direction === 'object' ? direction.key : direction;
-        const nextElementToFocus = this.navigationService?.navigateTo(dir);
-        if (this.elementToFocus !== nextElementToFocus) {
-            this.elementToFocus = nextElementToFocus;
-            this.elementToFocus.focus();
+    },
+    setup: function (props) {
+        const el = ref();
+        const xBus = useXBus();
+        /**
+         * The {@link SpatialNavigation} service to use.
+         */
+        let navigationService;
+        /**
+         * The element to focus.
+         */
+        let elementToFocus;
+        /**
+         * Get the navigation hijacker events.
+         *
+         * @remarks
+         * If the same {@link XEvent} is defined multiple times it is only inserted once.
+         *
+         * @returns The events to hijack the navigation.
+         */
+        const navigationHijackerEvents = computed(() => {
+            const eventsSet = props.navigationHijacker.map(({ xEvent }) => xEvent);
+            return Array.from(new Set(eventsSet));
+        });
+        onMounted(() => {
+            // TODO Replace this with injection
+            navigationService = new DirectionalFocusNavigationService(el.value);
+        });
+        /**
+         * Checks if the component has to take control of the keyboard navigation.
+         *
+         * @param eventPayload - The {@link ArrowKey}.
+         * @param metadata - The {@link WireMetadata}.
+         *
+         * @returns Whether the component needs to take control of the keyboard navigation or not.
+         * @internal
+         */
+        function hasToTakeNavigationControl(eventPayload, metadata) {
+            return props.navigationHijacker.some(({ moduleName, direction }) => moduleName === metadata.moduleName && direction === eventPayload);
         }
-        else {
-            this.emitDirectionalLimitReached(dir);
-            this.elementToFocus = undefined;
+        /**
+         * Focus the next navigable element returned by the navigation service.
+         *
+         * @param direction - The navigation direction.
+         * @internal
+         */
+        function focusNextNavigableElement(direction) {
+            const dir = typeof direction === 'object' ? direction.key : direction;
+            const nextElementToFocus = navigationService?.navigateTo(dir);
+            if (elementToFocus !== nextElementToFocus) {
+                elementToFocus = nextElementToFocus;
+                elementToFocus.focus();
+            }
+            else {
+                emitDirectionalLimitReached(dir);
+                elementToFocus = undefined;
+            }
         }
-    }
-    /**
-     * Emit the {@link XEvent} associated to the navigation's direction when reaching its limit.
-     *
-     * @param direction - The navigation direction.
-     * @internal
-     */
-    emitDirectionalLimitReached(direction) {
-        const xEvent = this.eventsForDirectionLimit?.[direction];
-        if (xEvent) {
-            this.$x.emit(xEvent, undefined, { target: this.elementToFocus });
+        /**
+         * Emit the {@link XEvent} associated to the navigation's direction when reaching its limit.
+         *
+         * @param direction - The navigation direction.
+         * @internal
+         */
+        function emitDirectionalLimitReached(direction) {
+            const xEvent = props.eventsForDirectionLimit?.[direction];
+            if (xEvent) {
+                xBus.emit(xEvent, undefined, { target: elementToFocus });
+            }
         }
+        /**
+         * Trigger navigation if this component is in control of it.
+         *
+         * @param eventPayload - The {@link @empathyco/x-bus#SubjectPayload.eventPayload}.
+         * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.
+         * @public
+         */
+        navigationHijackerEvents.value.forEach(event => {
+            xBus.on(event, true).subscribe(({ eventPayload, metadata }) => {
+                if (hasToTakeNavigationControl(eventPayload, metadata)) {
+                    focusNextNavigableElement(eventPayload);
+                }
+            });
+        });
+        return { el, focusNextNavigableElement };
     }
-};
-__decorate([
-    Prop({
-        default: () => [
-            { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }
-        ]
-    })
-], BaseKeyboardNavigation.prototype, "navigationHijacker", void 0);
-__decorate([
-    Prop({ default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' }) })
-], BaseKeyboardNavigation.prototype, "eventsForDirectionLimit", void 0);
-__decorate([
-    XOn(component => component.navigationHijackerEvents)
-], BaseKeyboardNavigation.prototype, "triggerNavigation", null);
-BaseKeyboardNavigation = __decorate([
-    Component
-], BaseKeyboardNavigation);
-var script = BaseKeyboardNavigation;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-keyboard-navigation.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\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 { XOn } from './decorators/bus.decorators';\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  @Component\n  export default class BaseKeyboardNavigation extends Vue {\n    /**\n     * An array of {@link TakeNavigationControl} objects defining when to\n     * take control of the keyboard navigation.\n     */\n    @Prop({\n      default: () => [\n        { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }\n      ]\n    })\n    protected navigationHijacker!: TakeNavigationControl[];\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    @Prop({ default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' }) })\n    protected eventsForDirectionLimit!: Partial<EventsForDirectionLimit>;\n\n    /**\n     * The {@link SpatialNavigation} service to use.\n     */\n    protected navigationService!: SpatialNavigation;\n\n    /**\n     * The element to focus.\n     */\n    protected elementToFocus: HTMLElement | undefined;\n\n    mounted(): void {\n      // TODO Replace this with injection\n      this.navigationService = new DirectionalFocusNavigationService(this.$el as HTMLElement);\n    }\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    protected get navigationHijackerEvents(): XEventsOf<ArrowKey>[] {\n      const eventsSet = this.navigationHijacker.map(({ xEvent }) => xEvent);\n      return Array.from(new Set(eventsSet));\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    @XOn(component => (component as BaseKeyboardNavigation).navigationHijackerEvents)\n    triggerNavigation(eventPayload: ArrowKey, metadata: WireMetadata): void {\n      if (this.hasToTakeNavigationControl(eventPayload, metadata)) {\n        this.focusNextNavigableElement(eventPayload);\n      }\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    private hasToTakeNavigationControl(eventPayload: ArrowKey, metadata: WireMetadata): boolean {\n      return this.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    protected focusNextNavigableElement(direction: ArrowKey | KeyboardEvent): void {\n      const dir = typeof direction === 'object' ? (direction.key as ArrowKey) : direction;\n      const nextElementToFocus = this.navigationService?.navigateTo(dir);\n\n      if (this.elementToFocus !== nextElementToFocus) {\n        this.elementToFocus = nextElementToFocus;\n        this.elementToFocus.focus();\n      } else {\n        this.emitDirectionalLimitReached(dir);\n        this.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    private emitDirectionalLimitReached(direction: ArrowKey): void {\n      const xEvent = this.eventsForDirectionLimit?.[direction];\n      if (xEvent) {\n        this.$x.emit(xEvent, undefined, { target: this.elementToFocus });\n      }\n    }\n  }\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    @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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"}

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

@@ -1,102 +1,68 @@
-import script from './base-rating.vue2.js';
+import _sfc_main from './base-rating.vue2.js';
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, createCommentVNode, Fragment, renderList, renderSlot, createBlock, normalizeStyle } from 'vue';
 import './base-rating.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "span",
-    {
-      staticClass: "x-rating",
-      attrs: {
-        role: "img",
-        "aria-label": _vm.ariaLabel,
-        "data-test": "rating",
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
+  class: "x-rating--empty",
+  "data-test": "rating-empty"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_DefaultIcon = resolveComponent("DefaultIcon");
+  return openBlock(), createElementBlock("span", {
+    class: "x-rating",
+    role: "img",
+    "aria-label": _ctx.ariaLabel,
+    "data-test": "rating"
+  }, [
+    createElementVNode("div", _hoisted_2, [
+      createCommentVNode("\n        @slot The content to render as empty icon\n      "),
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.max, (i) => {
+          return renderSlot(_ctx.$slots, "empty-icon", {}, () => [
+            (openBlock(), createBlock(_component_DefaultIcon, {
+              key: i,
+              class: "x-rating__default-icon x-rating__default-icon--empty"
+            }))
+          ], true);
+        }),
+        256
+        /* UNKEYED_FRAGMENT */
+      ))
+    ]),
+    createElementVNode(
+      "div",
+      {
+        class: "x-rating--filled",
+        style: normalizeStyle({ width: _ctx.calculateFilledWrapperWidth }),
+        "data-test": "rating-filled"
       },
-    },
-    [
-      _c(
-        "div",
-        {
-          staticClass: "x-rating--empty",
-          attrs: { "data-test": "rating-empty" },
-        },
-        [
-          _vm._l(_vm.max, function (i) {
-            return _vm._t("empty-icon", function () {
-              return [
-                _c("DefaultIcon", {
-                  key: i,
-                  staticClass:
-                    "x-rating__default-icon x-rating__default-icon--empty",
-                }),
-              ]
-            })
-          }),
-        ],
-        2
-      ),
-      _c(
-        "div",
-        {
-          staticClass: "x-rating--filled",
-          style: { width: _vm.calculateFilledWrapperWidth },
-          attrs: { "data-test": "rating-filled" },
-        },
-        [
-          _vm._l(_vm.max, function (i) {
-            return _vm._t("filled-icon", function () {
-              return [
-                _c("DefaultIcon", {
-                  key: i,
-                  staticClass:
-                    "x-rating__default-icon x-rating__default-icon--filled",
-                }),
-              ]
-            })
+      [
+        createCommentVNode("\n        @slot The content to render as filled icon\n      "),
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(_ctx.max, (i) => {
+            return renderSlot(_ctx.$slots, "filled-icon", {}, () => [
+              (openBlock(), createBlock(_component_DefaultIcon, {
+                key: i,
+                class: "x-rating__default-icon x-rating__default-icon--filled"
+              }))
+            ], true);
           }),
-        ],
-        2
-      ),
-    ]
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-1683b9ba";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+          256
+          /* UNKEYED_FRAGMENT */
+        ))
+      ],
+      4
+      /* STYLE */
+    )
+  ], 8, _hoisted_1);
+}
+var BaseRating = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f3b7cb68"]]);
 
-export { __vue_component__ as default };
+export { BaseRating as default };
 //# sourceMappingURL=base-rating.vue.js.map

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=\"scss\" scoped>\n  .x-rating {\n    position: relative;\n    display: inline-block;\n    max-width: fit-content;\n\n    &--empty {\n      overflow: hidden;\n      display: flex;\n      flex-flow: row nowrap;\n      white-space: nowrap;\n    }\n\n    &--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    &__default-icon {\n      fill: currentColor;\n      stroke: currentColor;\n\n      &--empty {\n        fill: none;\n      }\n    }\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":";;;;;AAEA,MAAc,cAAA,GAAA,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\">\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","_createElementVNode","_createCommentVNode","_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;AAIE,IAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,MAEOC,kBAAA,CAAA,6DAAA,CAAA;AAAA,OADLH,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA;AAAA,QAAqFG,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,aAAQN,SAAA,EAAA,EAAAO,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;AAEA,QAAA,WAAA,EAAA,eAAA;AAAA,OAAA;;2BAGA,8DAEO,CAAA;AAAA,SADLR,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA;AAAA,UAAsFG,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,eAAQN,SAAA,EAAA,EAAAO,WAAA,CAAA,sBAAA,EAAA;AAAA,gBAAA,GAAA,EAAA,CAAA;;;;;;;AAnBpC,SAAA;AAAA,OAAA;;;;;;;;;;"}