@empathyco/x-components 3.0.0-alpha.7 → 3.0.0-alpha.70

package/js/components/base-grid.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,95 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import { toKebabCase } from '../utils/string.js';
+import { XInject } from './decorators/injection.decorators.js';
+import { LIST_ITEMS_KEY } from './decorators/injection.consts.js';
+
+/**
+ * Grid component that is able to render different items based on their modelName value. In order
+ * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used
+ * do not have modelName property, the default slot is used instead. It has a required property:
+ * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the
+ * number of columns is not specified, the grid automatically fills the rows with as many columns
+ * as it can fit.
+ *
+ * @public
+ */
+let BaseGrid = class BaseGrid extends Vue {
+    /**
+     * It returns the items passed as props or the injected ones.
+     *
+     * @returns List of grid items.
+     *
+     * @public
+     */
+    get computedItems() {
+        return (this.items ??
+            this.injectedListItems ??
+            //TODO: add here logger
+            //eslint-disable-next-line no-console
+            console.warn('It is necessary to pass a prop or inject the list of filters'));
+    }
+    /**
+     * CSS class based on the column property value so items inside the grid can fill different
+     * amount of columns or rows based on how many columns the grid is divided into.
+     *
+     * @returns CSS class with the column property value.
+     *
+     * @internal
+     */
+    get cssClasses() {
+        return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';
+    }
+    /**
+     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on
+     * the column property value.
+     *
+     * @returns A CSSStyleDeclaration to use as the style attribute.
+     *
+     * @internal
+     */
+    get style() {
+        return {
+            gridTemplateColumns: this.columns
+                ? `repeat(${this.columns}, minmax(0, 1fr))`
+                : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'
+        };
+    }
+    /**
+     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.
+     *
+     * @returns An array of objects containing the item and its CSS class.
+     *
+     * @internal
+     */
+    get gridItems() {
+        return this.computedItems.map(item => {
+            const slotName = toKebabCase(item.modelName);
+            return {
+                slotName,
+                item,
+                cssClass: `x-base-grid__${slotName}`
+            };
+        });
+    }
+};
+__decorate([
+    Prop({ default: 'ul' })
+], BaseGrid.prototype, "animation", void 0);
+__decorate([
+    Prop({ default: 0 })
+], BaseGrid.prototype, "columns", void 0);
+__decorate([
+    Prop()
+], BaseGrid.prototype, "items", void 0);
+__decorate([
+    XInject(LIST_ITEMS_KEY)
+], BaseGrid.prototype, "injectedListItems", void 0);
+BaseGrid = __decorate([
+    Component({})
+], BaseGrid);
+var script = BaseGrid;
+
+export { script as default };
+//# sourceMappingURL=base-grid.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/base-grid.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-grid.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-grid.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { toKebabCase } from '../utils/string';\nimport { ListItem, VueCSSClasses } from '../utils/types';\nimport { XInject } from './decorators/injection.decorators';\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n/**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\ninterface GridItem {\n  slotName: string;\n  item: ListItem;\n  cssClass: VueCSSClasses;\n}\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n@Component({})\nexport default class BaseGrid extends Vue {\n  /**\n   * Animation component that will be used to animate the base grid.\n   *\n   * @public\n   */\n  @Prop({ default: 'ul' })\n  protected animation!: Vue | string;\n\n  /**\n   * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n   * columns mode to auto-fill.\n   *\n   * @public\n   */\n  @Prop({ default: 0 })\n  protected columns!: number;\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  @Prop()\n  protected items!: ListItem[];\n\n  /**\n   * It injects {@link ListItem} provided by an ancestor.\n   *\n   * @internal\n   */\n  @XInject(LIST_ITEMS_KEY)\n  public injectedListItems!: ListItem[];\n\n  /**\n   * It returns the items passed as props or the injected ones.\n   *\n   * @returns List of grid items.\n   *\n   * @public\n   */\n  protected get computedItems(): ListItem[] {\n    return (\n      this.items ??\n      this.injectedListItems ??\n      //TODO: add here logger\n      //eslint-disable-next-line no-console\n      console.warn('It is necessary to pass a prop or inject the list of filters')\n    );\n  }\n\n  /**\n   * CSS class based on the column property value so items inside the grid can fill different\n   * amount of columns or rows based on how many columns the grid is divided into.\n   *\n   * @returns CSS class with the column property value.\n   *\n   * @internal\n   */\n  protected get cssClasses(): VueCSSClasses {\n    return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';\n  }\n\n  /**\n   * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n   * the column property value.\n   *\n   * @returns A CSSStyleDeclaration to use as the style attribute.\n   *\n   * @internal\n   */\n  protected get style(): Partial<CSSStyleDeclaration> {\n    return {\n      gridTemplateColumns: this.columns\n        ? `repeat(${this.columns}, minmax(0, 1fr))`\n        : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n    };\n  }\n\n  /**\n   * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n   *\n   * @returns An array of objects containing the item and its CSS class.\n   *\n   * @internal\n   */\n  protected get gridItems(): GridItem[] {\n    return this.computedItems.map(item => {\n      const slotName = toKebabCase(item.modelName);\n      return {\n        slotName,\n        item,\n        cssClass: `x-base-grid__${slotName}`\n      };\n    });\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAmDA;;;;;;;;;;AAWA,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,GAAG;;;;;;;;IA2CvC,IAAc,aAAa;QACzB,QACE,IAAI,CAAC,KAAK;YACV,IAAI,CAAC,iBAAiB;;;YAGtB,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC,EAC5E;KACH;;;;;;;;;IAUD,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,OAAO,GAAG,gBAAgB,IAAI,CAAC,OAAO,EAAE,GAAG,mBAAmB,CAAC;KAC5E;;;;;;;;;IAUD,IAAc,KAAK;QACjB,OAAO;YACL,mBAAmB,EAAE,IAAI,CAAC,OAAO;kBAC7B,UAAU,IAAI,CAAC,OAAO,mBAAmB;kBACzC,0EAA0E;SAC/E,CAAC;KACH;;;;;;;;IASD,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI;YAChC,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC7C,OAAO;gBACL,QAAQ;gBACR,IAAI;gBACJ,QAAQ,EAAE,gBAAgB,QAAQ,EAAE;aACrC,CAAC;SACH,CAAC,CAAC;KACJ;CACF,CAAA;AA3FC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACW;AASnC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;yCACM;AAU3B;IADC,IAAI,EAAE;uCACsB;AAQ7B;IADC,OAAO,CAAC,cAAc,CAAC;mDACc;AAlCnB,QAAQ;IAD5B,SAAS,CAAC,EAAE,CAAC;GACO,QAAQ,CAkG5B;aAlGoB,QAAQ;;;;"}

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

@@ -1,11 +1,11 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './base-keyboard-navigation.vue_rollup-plugin-vue=script.js';
+import script from './base-keyboard-navigation.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,21 +15,21 @@ var __vue_render__ = function() {
       staticClass: "x-keyboard-navigation",
       attrs: { "data-test": "keyboard-navigation" },
       on: {
-        keydown: function($event) {
+        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"
+              "ArrowDown",
             ]) &&
             _vm._k($event.keyCode, "right", 39, $event.key, [
               "Right",
-              "ArrowRight"
+              "ArrowRight",
             ]) &&
             _vm._k($event.keyCode, "left", 37, $event.key, [
               "Left",
-              "ArrowLeft"
+              "ArrowLeft",
             ])
           ) {
             return null
@@ -42,8 +42,8 @@ var __vue_render__ = function() {
           }
           $event.preventDefault();
           return _vm.focusNextNavigableElement.apply(null, arguments)
-        }
-      }
+        },
+      },
     },
     [_vm._t("default")],
     2
@@ -53,13 +53,13 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -68,7 +68,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -81,5 +81,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ 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 | navigation hijacker} 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 | navigation 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 WirePayload.eventPayload}.\n     * @param metadata - The {@link WirePayload.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>\n  #Example\n\n  This component has a slot to inject other components inside it. The component expects a required\n  prop, navigationHijacker, which is an array of objects containing: the xEvent to listen to, the\n  moduleName in charge of emitting the event and to which direction it should react to; to take\n  control of the navigation. It has another prop, optional in this case, to emit an xEvent when\n  reaching 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      xEvent: 'UserPressedArrowKey',\n      moduleName: 'searchBox',\n      direction: 'ArrowDown'\n    }, {\n      xEvent: 'UserPressedArrowKey',\n      moduleName: 'facets',\n      direction: 'ArrowRight'\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      xEvent: 'UserPressedArrowKey',\n      moduleName: 'searchBox',\n      direction: 'ArrowDown'\n    }]\"\n    :eventsForDirectionLimit=\"{\n      ArrowUp: 'UserReachedEmpathizeTop'\n    }\"\n  >\n    <QuerySuggestions/>\n  </KeyboardNavigation>\n  ```\n\n\n  ## Events\n\n  An event that the component will emit:\n\n  - `UserReachedEmpathizeTop`: the event emitted by default when the container reaches its top\n  navigation, but more events can be emitted for each direction using the `eventsForDirectionLimit`\n  prop.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 | navigation hijacker} 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 | navigation 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 WirePayload.eventPayload}.\n     * @param metadata - The {@link WirePayload.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## 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\n## Events\n\nAn event that the component will emit:\n\n- `UserReachedEmpathizeTop`: the event emitted by default when the container reaches its top\n  navigation, but more events can be emitted for each direction using the `eventsForDirectionLimit`\n  prop.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/base-keyboard-navigation.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,110 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import { DirectionalFocusNavigationService } from '../services/directional-focus-navigation.service.js';
+import { XOn } from './decorators/bus.decorators.js';
+
+/**
+ * Base component to handle keyboard navigation for elements inside it. It has a required slot to
+ * include the navigable elements.
+ *
+ * @remarks
+ * The component can be customized through props: an array of navigationHijacker objects, which
+ * contains: the xEvent to listen to, the moduleName in charge of emitting the event and to which
+ * direction it should react to; to take control of the navigation and eventsForDirectionLimit, to
+ * emit an xEvent when reaching the navigation limit in any direction.
+ *
+ * @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 WirePayload.eventPayload}.
+     * @param metadata - The {@link WirePayload.metadata}.
+     * @public
+     */
+    triggerNavigation(eventPayload, metadata) {
+        if (this.hasToTakeNavigationControl(eventPayload, metadata)) {
+            this.focusNextNavigableElement(eventPayload);
+        }
+    }
+    /**
+     * 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();
+        }
+        else {
+            this.emitDirectionalLimitReached(dir);
+            this.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 });
+        }
+    }
+};
+__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 };
+//# sourceMappingURL=base-keyboard-navigation.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/base-keyboard-navigation.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-keyboard-navigation.vue_rollup-plugin-vue_script.vue.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\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\n// eslint-disable-next-line max-len\nimport { DirectionalFocusNavigationService } from '../services/directional-focus-navigation.service';\nimport { SpatialNavigation } from '../services/services.types';\nimport { ArrowKey, EventsForDirectionLimit, TakeNavigationControl } from '../utils/types';\nimport { XEventsOf } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { 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\nexport default class BaseKeyboardNavigation extends Vue {\n  /**\n   * An array of {@link TakeNavigationControl | navigation hijacker} 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 | navigation 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 WirePayload.eventPayload}.\n   * @param metadata - The {@link WirePayload.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":";;;;;;AAsBA;;;;;;;;;;;;AAaA,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,GAAG;IA6BrD,OAAO;;QAEL,IAAI,CAAC,iBAAiB,GAAG,IAAI,iCAAiC,CAAC,IAAI,CAAC,GAAkB,CAAC,CAAC;KACzF;;;;;;;;;IAUD,IAAc,wBAAwB;QACpC,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC,CAAC;QACtE,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;KACvC;;;;;;;;IAUD,iBAAiB,CAAC,YAAsB,EAAE,QAAsB;QAC9D,IAAI,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,EAAE;YAC3D,IAAI,CAAC,yBAAyB,CAAC,YAAY,CAAC,CAAC;SAC9C;KACF;;;;;;;;;;IAWO,0BAA0B,CAAC,YAAsB,EAAE,QAAsB;QAC/E,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,CACjC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACxB,UAAU,KAAK,QAAQ,CAAC,UAAU,IAAI,SAAS,KAAK,YAAY,CACnE,CAAC;KACH;;;;;;;IAQS,yBAAyB,CAAC,SAAmC;QACrE,MAAM,GAAG,GAAG,OAAO,SAAS,KAAK,QAAQ,GAAI,SAAS,CAAC,GAAgB,GAAG,SAAS,CAAC;QACpF,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;QAEnE,IAAI,IAAI,CAAC,cAAc,KAAK,kBAAkB,EAAE;YAC9C,IAAI,CAAC,cAAc,GAAG,kBAAkB,CAAC;YACzC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,CAAC,2BAA2B,CAAC,GAAG,CAAC,CAAC;YACtC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;SACjC;KACF;;;;;;;IAQO,2BAA2B,CAAC,SAAmB;QACrD,MAAM,MAAM,GAAG,IAAI,CAAC,uBAAuB,GAAG,SAAS,CAAC,CAAC;QACzD,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;SAClE;KACF;CACF,CAAA;AAlGC;IALC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAM;YACb,EAAE,MAAM,EAAE,qBAAqB,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE;SACnF;KACF,CAAC;kEACqD;AAOvD;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,yBAAyB,EAAE,CAAC,EAAE,CAAC;uEACG;AAsCrE;IADC,GAAG,CAAC,SAAS,IAAK,SAAoC,CAAC,wBAAwB,CAAC;+DAKhF;AA3DkB,sBAAsB;IAD1C,SAAS;GACW,sBAAsB,CA4G1C;aA5GoB,sBAAsB;;;;"}

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

@@ -1,12 +1,12 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './base-rating.vue_rollup-plugin-vue=script.js';
+import script from './base-rating.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,27 +14,31 @@ var __vue_render__ = function() {
     "span",
     {
       staticClass: "x-rating",
-      attrs: { role: "img", "aria-label": _vm.ariaLabel, "data-test": "rating" }
+      attrs: {
+        role: "img",
+        "aria-label": _vm.ariaLabel,
+        "data-test": "rating",
+      },
     },
     [
       _c(
         "div",
         {
           staticClass: "x-rating--empty",
-          attrs: { "data-test": "rating-empty" }
+          attrs: { "data-test": "rating-empty" },
         },
         [
-          _vm._l(_vm.max, function(i) {
-            return _vm._t("emptyIcon", function() {
+          _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"
-                })
+                    "x-rating__default-icon x-rating__default-icon--empty",
+                }),
               ]
             })
-          })
+          }),
         ],
         2
       ),
@@ -44,23 +48,23 @@ var __vue_render__ = function() {
         {
           staticClass: "x-rating--filled",
           style: { width: _vm.calculateFilledWrapperWidth },
-          attrs: { "data-test": "rating-filled" }
+          attrs: { "data-test": "rating-filled" },
         },
         [
-          _vm._l(_vm.max, function(i) {
-            return _vm._t("filledIcon", function() {
+          _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"
-                })
+                    "x-rating__default-icon x-rating__default-icon--filled",
+                }),
               ]
             })
-          })
+          }),
         ],
         2
-      )
+      ),
     ]
   )
 };
@@ -68,24 +72,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-0ab68593_0", { source: ".x-rating[data-v-0ab68593] {\n  position: relative;\n  display: inline-block;\n}\n.x-rating--empty[data-v-0ab68593] {\n  overflow-x: hidden;\n  display: -ms-flexbox;\n  display: flex;\n}\n.x-rating--filled[data-v-0ab68593] {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  overflow-x: hidden;\n  top: 0;\n  left: 0;\n}\n.x-rating__default-icon[data-v-0ab68593] {\n  fill: currentColor;\n  stroke: currentColor;\n}\n.x-rating__default-icon--empty[data-v-0ab68593] {\n  fill: none;\n}", map: undefined, media: undefined });
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
+    inject("data-v-01a5c2e2_0", { source: ".x-rating[data-v-01a5c2e2] {\n  position: relative;\n  display: inline-block;\n}\n.x-rating--empty[data-v-01a5c2e2] {\n  overflow: hidden;\n  display: flex;\n  flex-flow: row nowrap;\n  white-space: nowrap;\n}\n.x-rating--filled[data-v-01a5c2e2] {\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.x-rating__default-icon[data-v-01a5c2e2] {\n  fill: currentColor;\n  stroke: currentColor;\n}\n.x-rating__default-icon--empty[data-v-01a5c2e2] {\n  fill: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-0ab68593";
+  const __vue_scope_id__ = "data-v-01a5c2e2";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -98,5 +102,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ 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=\"emptyIcon\">\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=\"filledIcon\">\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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\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  @Component({\n    components: {\n      DefaultIcon: StarIcon\n    }\n  })\n  export default class BaseRating extends Vue {\n    /**\n     * Numeric value used to calculates the width of the filled elements.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected value!: number;\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    protected max!: number;\n\n    /**\n     * Calculates the width of the filled elements wrapper.\n     *\n     * @returns The % of the wrapper width.\n     *\n     * @internal\n     */\n    protected get calculateFilledWrapperWidth(): string {\n      return this.value < 0 ? '0%' : `${(this.value * 100) / this.max}%`;\n    }\n\n    /**\n     * Creates the aria label for accessibility purpose.\n     *\n     * @returns The aria label.\n     *\n     * @internal\n     */\n    protected get ariaLabel(): string {\n      return `${this.value}/${this.max}`;\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-rating {\n    position: relative;\n    display: inline-block;\n\n    &--empty {\n      overflow-x: hidden;\n      display: flex;\n    }\n\n    &--filled {\n      display: flex;\n      position: absolute;\n      overflow-x: hidden;\n      top: 0;\n      left: 0;\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>\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 #filledIcon>\n    <TestIcon/>\n  </template>\n  <template #emptyIcon>\n    <TestIcon/>\n  </template>\n</BaseRating>\n```\n\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\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  @Component({\n    components: {\n      DefaultIcon: StarIcon\n    }\n  })\n  export default class BaseRating extends Vue {\n    /**\n     * Numeric value used to calculates the width of the filled elements.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected value!: number;\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    protected max!: number;\n\n    /**\n     * Calculates the width of the filled elements wrapper.\n     *\n     * @returns The % of the wrapper width.\n     *\n     * @internal\n     */\n    protected get calculateFilledWrapperWidth(): string {\n      return this.value < 0 ? '0%' : `${(this.value * 100) / this.max}%`;\n    }\n\n    /**\n     * Creates the aria label for accessibility purpose.\n     *\n     * @returns The aria label.\n     *\n     * @internal\n     */\n    protected get ariaLabel(): string {\n      return `${this.value}/${this.max}`;\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-rating {\n    position: relative;\n    display: inline-block;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/base-rating.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,50 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import __vue_component__ from './icons/star.vue.js';
+
+/**
+ * Rating component. This component renders a set of elements filled based on the value passed as
+ * prop.
+ *
+ * @public
+ */
+let BaseRating = class BaseRating extends Vue {
+    /**
+     * Calculates the width of the filled elements wrapper.
+     *
+     * @returns The % of the wrapper width.
+     *
+     * @internal
+     */
+    get calculateFilledWrapperWidth() {
+        return this.value < 0 ? '0%' : `${(this.value * 100) / this.max}%`;
+    }
+    /**
+     * Creates the aria label for accessibility purpose.
+     *
+     * @returns The aria label.
+     *
+     * @internal
+     */
+    get ariaLabel() {
+        return `${this.value}/${this.max}`;
+    }
+};
+__decorate([
+    Prop({ required: true })
+], BaseRating.prototype, "value", void 0);
+__decorate([
+    Prop({ default: 5 })
+], BaseRating.prototype, "max", void 0);
+BaseRating = __decorate([
+    Component({
+        components: {
+            DefaultIcon: __vue_component__
+        }
+    })
+], BaseRating);
+var script = BaseRating;
+
+export { script as default };
+//# sourceMappingURL=base-rating.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/base-rating.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-rating.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-rating.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\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 */\n@Component({\n  components: {\n    DefaultIcon: StarIcon\n  }\n})\nexport default class BaseRating extends Vue {\n  /**\n   * Numeric value used to calculates the width of the filled elements.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected value!: number;\n  /**\n   * Maximum number of elements to paint.\n   *\n   * @public\n   */\n  @Prop({ default: 5 })\n  protected max!: number;\n\n  /**\n   * Calculates the width of the filled elements wrapper.\n   *\n   * @returns The % of the wrapper width.\n   *\n   * @internal\n   */\n  protected get calculateFilledWrapperWidth(): string {\n    return this.value < 0 ? '0%' : `${(this.value * 100) / this.max}%`;\n  }\n\n  /**\n   * Creates the aria label for accessibility purpose.\n   *\n   * @returns The aria label.\n   *\n   * @internal\n   */\n  protected get ariaLabel(): string {\n    return `${this.value}/${this.max}`;\n  }\n}\n"],"names":["StarIcon"],"mappings":";;;;;AA8BA;;;;;;AAWA,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,GAAG;;;;;;;;IAuBzC,IAAc,2BAA2B;QACvC,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,GAAG,CAAC;KACpE;;;;;;;;IASD,IAAc,SAAS;QACrB,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;KACpC;CACF,CAAA;AA9BC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;yCACA;AAOzB;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;uCACE;AAdJ,UAAU;IAL9B,SAAS,CAAC;QACT,UAAU,EAAE;YACV,WAAW,EAAEA,iBAAQ;SACtB;KACF,CAAC;GACmB,UAAU,CAqC9B;aArCoB,UAAU;;;;"}

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

@@ -1,11 +1,11 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './base-variable-column-grid.vue_rollup-plugin-vue=script.js';
+import script from './base-variable-column-grid.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -13,32 +13,32 @@ var __vue_render__ = function() {
     attrs: { animation: _vm.animation, columns: _vm.columns, items: _vm.items },
     scopedSlots: _vm._u(
       [
-        _vm._l(_vm.$scopedSlots, function(_, name) {
+        _vm._l(_vm.$scopedSlots, function (_, name) {
           return {
             key: name,
-            fn: function(ref) {
+            fn: function (ref) {
               var item = ref.item;
               return [_vm._t(name, null, null, { item: item })]
-            }
+            },
           }
-        })
+        }),
       ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -47,7 +47,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -60,5 +60,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-variable-column-grid.vue.js.map