@empathyco/x-components 3.0.0-alpha.207 → 3.0.0-alpha.209

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.209](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.208...@empathyco/x-components@3.0.0-alpha.209) (2022-11-02)
+
+### Features
+
+- **components:** Emit ColumnsNumberRendered event on BaseGrid (#806)
+  ([87a8ca9](https://github.com/empathyco/x/commit/87a8ca947f8d83dff1a0044db80649eb297361fb)),
+  closes [EX-7291](https://searchbroker.atlassian.net/browse/EX-7291)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.208](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.207...@empathyco/x-components@3.0.0-alpha.208) (2022-11-02)
+
+### Features
+
+- apply dynamic css mixin to sliding panel and column picker list buttons (#815)
+  ([4cc040d](https://github.com/empathyco/x/commit/4cc040d7d7c4751a5f31c6e36acfa64d28cbb23d)),
+  closes [EX-7224](https://searchbroker.atlassian.net/browse/EX-7224)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.207](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.206...@empathyco/x-components@3.0.0-alpha.207) (2022-11-02)
 
 ### Bug Fixes

package/design-system/full-theme.css

@@ -3420,26 +3420,6 @@
   --x-size-gap-row-20: var(--x-size-base-20);
 }
 /* @deprecated */
-.x-row--padding-02 {
-  --x-size-padding-row: var(--x-size-padding-row-02);
-}
-
-.x-row--padding-03 {
-  --x-size-padding-row: var(--x-size-padding-row-03);
-}
-
-.x-row--padding-04 {
-  --x-size-padding-row: var(--x-size-padding-row-04);
-}
-
-.x-row--padding-05 {
-  --x-size-padding-row: var(--x-size-padding-row-05);
-}
-
-.x-row--padding-06 {
-  --x-size-padding-row: var(--x-size-padding-row-06);
-}
-/* @deprecated */
 :root {
   --x-size-padding-row-02: var(--x-size-base-02);
   --x-size-padding-row-03: var(--x-size-base-03);
@@ -4014,6 +3994,26 @@
     --x-number-font-weight-tag-default-selected
   );
 }
+/* @deprecated */
+.x-row--padding-02 {
+  --x-size-padding-row: var(--x-size-padding-row-02);
+}
+
+.x-row--padding-03 {
+  --x-size-padding-row: var(--x-size-padding-row-03);
+}
+
+.x-row--padding-04 {
+  --x-size-padding-row: var(--x-size-padding-row-04);
+}
+
+.x-row--padding-05 {
+  --x-size-padding-row: var(--x-size-padding-row-05);
+}
+
+.x-row--padding-06 {
+  --x-size-padding-row: var(--x-size-padding-row-06);
+}
 .x-tag--ghost.x-tag,
 .x-tag--ghost .x-tag {
   --x-color-background-tag-default: var(--x-color-background-tag-ghost);

package/docs/API-reference/api/x-components.basecolumnpickerlist.md

@@ -6,6 +6,8 @@
 
 Column picker list component renders a list of buttons to choose the columns number.
 
+Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`<!-- -->.
+
 <b>Signature:</b>
 
 ```typescript

package/docs/API-reference/api/x-components.md

@@ -18,7 +18,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BannersList](./x-components.bannerslist.md) | It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the <code>ItemsInjectionMixin</code>.<!-- -->The component provides a default slot which wraps the whole component with the <code>banners</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.<!-- -->It also provides the parent slots to customize the items. |
 |  [BaseAddToCart](./x-components.baseaddtocart.md) | Renders a button with a default slot. It receives the result with the data and emits [XEventsTypes.UserClickedResultAddToCart](./x-components.xeventstypes.userclickedresultaddtocart.md) to the bus on click mouse event. |
 |  [BaseColumnPickerDropdown](./x-components.basecolumnpickerdropdown.md) | Column picker dropdown component renders [dropdown](./x-components.basedropdown.md) component which options are the different columns you can set for a grid.<!-- -->It emits [UserClickedColumnPicker](./x-components.xeventstypes.userclickedcolumnpicker.md) on dropdown input. |
-|  [BaseColumnPickerList](./x-components.basecolumnpickerlist.md) | Column picker list component renders a list of buttons to choose the columns number. |
+|  [BaseColumnPickerList](./x-components.basecolumnpickerlist.md) | Column picker list component renders a list of buttons to choose the columns number.<!-- -->Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>. |
 |  [BaseCurrency](./x-components.basecurrency.md) | Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.<!-- -->Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the <code>?</code> symbol after the decimal characters (e.g. 'i.iii,dd?', for <code>1234</code> you would get <code>1.234</code> instead of <code>1.234,00</code>). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'. |
 |  [BaseDropdown](./x-components.basedropdown.md) | Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents. |
 |  [BaseEventButton](./x-components.baseeventbutton.md) | Component to be reused that renders a <code>&lt;button&gt;</code> with the logic of emitting events to the bus on click. The events are passed as an object to prop [events](./x-components.xeventstypes.md)<!-- -->. The keys are the event name and the values are the payload of each event. All events are emitted with its respective payload. If any event doesn't need payload a <code>undefined</code> must be passed as value. |
@@ -130,7 +130,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SimpleFilter](./x-components.simplefilter.md) | Renders a simple filter, emitting the needed events when clicked. |
 |  [SingleColumnLayout](./x-components.singlecolumnlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
 |  [SlicedFilters](./x-components.slicedfilters.md) | Component that slices a list of filters and returns them using the default scoped slot, allowing the user to show the full list of them or slicing them again using the show more/less buttons. |
-|  [SlidingPanel](./x-components.slidingpanel.md) | This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior. |
+|  [SlidingPanel](./x-components.slidingpanel.md) | This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.<!-- -->Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>. |
 |  [SnippetCallbacks](./x-components.snippetcallbacks.md) | This component subscribes to any [XEvent](./x-components.xevent.md) with a custom callbacks provided by the snippet configuration. |
 |  [SnippetConfigExtraParams](./x-components.snippetconfigextraparams.md) | Extracts the extra parameters from the [SnippetConfig](./x-components.snippetconfig.md) and syncs it with the request objects of every x-module. |
 |  [SortDropdown](./x-components.sortdropdown.md) | The <code>SortDropdown</code> component allows user to select the search results order. This component also allows to change the selected sort programmatically. |

package/docs/API-reference/api/x-components.slidingpanel.md

@@ -6,18 +6,19 @@
 
 This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.
 
+Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`<!-- -->.
+
 <b>Signature:</b>
 
 ```typescript
-export default class SlidingPanel extends Vue 
+export default class SlidingPanel extends SlidingPanel_base 
 ```
-<b>Extends:</b> Vue
+<b>Extends:</b> SlidingPanel\_base
 
 ## Properties
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [buttonClass?](./x-components.slidingpanel.buttonclass.md) |  | string | <i>(Optional)</i> CSS classes to add to the buttons. |
 |  [resetOnContentChange](./x-components.slidingpanel.resetoncontentchange.md) |  | boolean | When true, whenever the DOM content in the sliding panel slot changes, it will reset the scroll position to 0. |
 |  [scrollFactor](./x-components.slidingpanel.scrollfactor.md) |  | number | Scroll factor that will dictate how much the scroll moves when pressing a navigation button. |
 |  [showButtons](./x-components.slidingpanel.showbuttons.md) |  | boolean | Would make the navigation buttons visible when they're needed or always hide them. |

package/docs/API-reference/api/x-components.xeventstypes.columnsnumberprovided.md

@@ -4,7 +4,7 @@
 
 ## XEventsTypes.ColumnsNumberProvided property
 
-The number of columns of a grid has changed. Payload: the columns number.
+The provided number of columns of a grid has changed. Payload: the columns number.
 
 <b>Signature:</b>
 

package/docs/API-reference/api/x-components.xeventstypes.md

@@ -21,8 +21,9 @@ Aside from common [XEvents](./x-components.xevent.md)<!-- -->, this interface al
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [ColumnsNumberProvided](./x-components.xeventstypes.columnsnumberprovided.md) | number | The number of columns of a grid has changed. Payload: the columns number. |
+|  [ColumnsNumberProvided](./x-components.xeventstypes.columnsnumberprovided.md) | number | The provided number of columns of a grid has changed. Payload: the columns number. |
 |  [ModuleRegistered](./x-components.xeventstypes.moduleregistered.md) | [XModuleName](./x-components.xmodulename.md) | A new [XModule](./x-components.xmodule.md) has been registered. Payload: The name of the XModule that has been registered. |
+|  [RenderedColumnsNumberChanged](./x-components.xeventstypes.renderedcolumnsnumberchanged.md) | number | The rendered number of columns of a grid has changed. Payload: the columns number. |
 |  [SnippetCallbackExecuted](./x-components.xeventstypes.snippetcallbackexecuted.md) | { event: [XEvent](./x-components.xevent.md)<!-- -->; callbackReturn: unknown; payload: [ExtractPayload](./x-components.extractpayload.md)<!-- -->&lt;[XEvent](./x-components.xevent.md)<!-- -->&gt;; metadata: [WireMetadata](./x-components.wiremetadata.md)<!-- -->; } | A callback from the snippet has been executed. Payload: An object containing the event that executed the callback, the callback result, and the original event payload and metadata. |
 |  [SuggestionsDisplayed](./x-components.xeventstypes.suggestionsdisplayed.md) | Suggestion\[\] | Any kind of suggestions have been displayed (query-suggestions, popular searches...) Payload: The displayed [suggestions](./x-types.suggestion.md)<!-- -->. |
 |  [TogglePanelStateChanged](./x-components.xeventstypes.togglepanelstatechanged.md) | boolean | The <code>BaseToggleIdPanel</code> <code>isOpen</code> state changed. Payload: the new state. |

package/docs/API-reference/api/x-components.xeventstypes.renderedcolumnsnumberchanged.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XEventsTypes](./x-components.xeventstypes.md) &gt; [RenderedColumnsNumberChanged](./x-components.xeventstypes.renderedcolumnsnumberchanged.md)
+
+## XEventsTypes.RenderedColumnsNumberChanged property
+
+The rendered number of columns of a grid has changed. Payload: the columns number.
+
+<b>Signature:</b>
+
+```typescript
+RenderedColumnsNumberChanged: number;
+```

package/docs/API-reference/components/common/column-picker/x-components.base-column-picker-list.md

@@ -8,6 +8,9 @@ title: BaseColumnPickerList
 
 Column picker list component renders a list of buttons to choose the columns number.
 
+Additionally, this component exposes the following props to modify the classes of the
+elements: `buttonClass`.
+
 ## Props
 
 | Name                 | Description                                                          | Type                | Default       |
@@ -104,6 +107,28 @@ export default {
 </script>
 ```
 
+#### Customizing the buttons with classes
+
+The `buttonClass` prop can be used to add classes to the buttons.
+
+```vue
+<template>
+  <BaseColumnPickerList :columns="columns" buttonClass="x-button--round" />
+</template>
+<script>
+import { BaseColumnPickerList } from "@empathyco/xcomponents";
+
+export default {
+  components: {
+    BaseColumnPickerList
+  },
+  data() {
+    return { columns: [2, 4, 6] };
+  }
+};
+</script>
+```
+
 ## Events
 
 A list of events that the component will emit:

package/docs/API-reference/components/common/x-components.sliding-panel.md

@@ -10,6 +10,9 @@ This component allows for any other component or element inside it to be horizon
 navigable. It also implements customizable buttons as well as other minor customizations to its
 general behavior.
 
+Additionally, this component exposes the following props to modify the classes of the
+elements: `buttonClass`.
+
 ## Props
 
 | Name                              | Description                                                                                                         | Type                 | Default           |
@@ -17,7 +20,6 @@ general behavior.
 | <code>scrollFactor</code>         | Scroll factor that will dictate how much the scroll moves when pressing a navigation button.                        | <code>number</code>  | <code>0.7</code>  |
 | <code>showButtons</code>          | Would make the navigation buttons visible when they're needed or always hide them.                                  | <code>boolean</code> | <code>true</code> |
 | <code>resetOnContentChange</code> | When true, whenever the DOM content in the sliding panel slot changes, it will reset<br />the scroll position to 0. | <code>boolean</code> | <code>true</code> |
-| <code>buttonClass</code>          | CSS classes to add to the buttons.                                                                                  | <code>string</code>  | <code></code>     |
 
 ## Slots
 
@@ -147,6 +149,43 @@ export default {
 </style>
 ```
 
+#### Customizing the buttons with classes
+
+The `buttonClass` prop can be used to add classes to the buttons.
+
+```vue
+<template>
+  <SlidingPanel buttonClass="x-button--round">
+    <div class="item">Item 1</div>
+    <div class="item">Item 2</div>
+    <div class="item">Item 3</div>
+    <div class="item">Item 4</div>
+  </SlidingPanel>
+</template>
+
+<script>
+import { SlidingPanel } from "@empathyco/x-components";
+
+export default {
+  name: "SlidingPanelDemo",
+  components: {
+    SlidingPanel
+  }
+};
+</script>
+
+<style>
+.x-sliding-panel {
+  width: 200px;
+}
+
+.item {
+  display: inline-block;
+  width: 100px;
+}
+</style>
+```
+
 #### Disabling reset the scroll when content changes
 
 By default, whenever the content of the sliding panel changes, it auto resets its scroll position.

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

@@ -56,7 +56,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-604592d3";
+  const __vue_scope_id__ = "data-v-b51c3610";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    :style=\"style\"\n    class=\"x-grid x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ slotName, item, cssClass } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-grid__item x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { toKebabCase } from '../utils/string';\n  import { ListItem, VueCSSClasses } from '../utils/types';\n  import { XInject } from './decorators/injection.decorators';\n  import { 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   */\n  interface 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({})\n  export 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</script>\n\n<style lang=\"scss\" scoped>\n  .x-base-grid {\n    padding: var(--x-size-padding-grid, 0);\n    margin: 0;\n    display: grid;\n    grid-auto-flow: dense;\n    list-style: none;\n\n    &__banner,\n    &__next-queries-group {\n      grid-column-start: 1;\n      grid-column-end: -1;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    :style=\"style\"\n    class=\"x-grid x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ slotName, item, cssClass } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-grid__item x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { toKebabCase } from '../utils/string';\n  import { ListItem, VueCSSClasses } from '../utils/types';\n  import { XEmit } from './decorators/bus.decorators';\n  import { XInject } from './decorators/injection.decorators';\n  import { 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   */\n  interface 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({})\n  export 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     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}\n     * event whenever the number of columns rendered inside the grid changes.\n     *\n     * @internal\n     */\n    @XEmit('RenderedColumnsNumberChanged', { immediate: false })\n    public renderedColumnsNumber = 0;\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    /**\n     * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.\n     *\n     * @internal\n     */\n    protected mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.updateRenderedColumnsNumber);\n      resizeObserver.observe(this.$el);\n      this.$on('hook:beforeDestroy', () => {\n        resizeObserver.disconnect();\n      });\n    }\n\n    /**\n     * Updates the number of columns rendered inside the grid.\n     *\n     * @internal\n     */\n    protected updateRenderedColumnsNumber(): void {\n      const { gridTemplateColumns } = getComputedStyle(this.$el);\n      this.renderedColumnsNumber = gridTemplateColumns.split(' ').length;\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-base-grid {\n    padding: var(--x-size-padding-grid, 0);\n    margin: 0;\n    display: grid;\n    grid-auto-flow: dense;\n    list-style: none;\n\n    &__banner,\n    &__next-queries-group {\n      grid-column-start: 1;\n      grid-column-end: -1;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -2,6 +2,7 @@ import { __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
 import { toKebabCase } from '../utils/string.js';
+import { XEmit } from './decorators/bus.decorators.js';
 import { XInject } from './decorators/injection.decorators.js';
 import { LIST_ITEMS_KEY } from './decorators/injection.consts.js';
 
@@ -16,6 +17,16 @@ import { LIST_ITEMS_KEY } from './decorators/injection.consts.js';
  * @public
  */
 let BaseGrid = class BaseGrid extends Vue {
+    constructor() {
+        super(...arguments);
+        /**
+         * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}
+         * event whenever the number of columns rendered inside the grid changes.
+         *
+         * @internal
+         */
+        this.renderedColumnsNumber = 0;
+    }
     /**
      * It returns the items passed as props or the injected ones.
      *
@@ -73,6 +84,28 @@ let BaseGrid = class BaseGrid extends Vue {
             };
         });
     }
+    /**
+     * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.
+     *
+     * @internal
+     */
+    mounted() {
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const resizeObserver = new ResizeObserver(this.updateRenderedColumnsNumber);
+        resizeObserver.observe(this.$el);
+        this.$on('hook:beforeDestroy', () => {
+            resizeObserver.disconnect();
+        });
+    }
+    /**
+     * Updates the number of columns rendered inside the grid.
+     *
+     * @internal
+     */
+    updateRenderedColumnsNumber() {
+        const { gridTemplateColumns } = getComputedStyle(this.$el);
+        this.renderedColumnsNumber = gridTemplateColumns.split(' ').length;
+    }
 };
 __decorate([
     Prop({ default: 'ul' })
@@ -86,6 +119,9 @@ __decorate([
 __decorate([
     XInject(LIST_ITEMS_KEY)
 ], BaseGrid.prototype, "injectedListItems", void 0);
+__decorate([
+    XEmit('RenderedColumnsNumberChanged', { immediate: false })
+], BaseGrid.prototype, "renderedColumnsNumber", void 0);
 BaseGrid = __decorate([
     Component({})
 ], BaseGrid);

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

@@ -1 +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;;;;"}
+{"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 { XEmit } from './decorators/bus.decorators';\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   * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}\n   * event whenever the number of columns rendered inside the grid changes.\n   *\n   * @internal\n   */\n  @XEmit('RenderedColumnsNumberChanged', { immediate: false })\n  public renderedColumnsNumber = 0;\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  /**\n   * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.\n   *\n   * @internal\n   */\n  protected mounted(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const resizeObserver = new ResizeObserver(this.updateRenderedColumnsNumber);\n    resizeObserver.observe(this.$el);\n    this.$on('hook:beforeDestroy', () => {\n      resizeObserver.disconnect();\n    });\n  }\n\n  /**\n   * Updates the number of columns rendered inside the grid.\n   *\n   * @internal\n   */\n  protected updateRenderedColumnsNumber(): void {\n    const { gridTemplateColumns } = getComputedStyle(this.$el);\n    this.renderedColumnsNumber = gridTemplateColumns.split(' ').length;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAoDA;;;;;;;;;;AAWA,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,GAAG;IAAzC;;;;;;;;QA2CS,0BAAqB,GAAG,CAAC,CAAC;KAwFlC;;;;;;;;IA/EC,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;;;;;;IAOS,OAAO;;QAEf,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;QAC5E,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,oBAAoB,EAAE;YAC7B,cAAc,CAAC,UAAU,EAAE,CAAC;SAC7B,CAAC,CAAC;KACJ;;;;;;IAOS,2BAA2B;QACnC,MAAM,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3D,IAAI,CAAC,qBAAqB,GAAG,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;KACpE;CACF,CAAA;AA5HC;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;AAStC;IADC,KAAK,CAAC,8BAA8B,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDAC3B;AA3Cd,QAAQ;IAD5B,SAAS,CAAC,EAAE,CAAC;GACO,QAAQ,CAmI5B;aAnIoB,QAAQ;;;;"}

package/js/components/base-grid.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-base-grid[data-v-604592d3] {\n  padding: var(--x-size-padding-grid, 0);\n  margin: 0;\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n}\n.x-base-grid__banner[data-v-604592d3], .x-base-grid__next-queries-group[data-v-604592d3] {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}";
+var css = ".x-base-grid[data-v-b51c3610] {\n  padding: var(--x-size-padding-grid, 0);\n  margin: 0;\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n}\n.x-base-grid__banner[data-v-b51c3610], .x-base-grid__next-queries-group[data-v-b51c3610] {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

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

@@ -33,6 +33,7 @@ var __vue_render__ = function () {
             "BaseEventButton",
             {
               staticClass: "x-button column-picker-item__button",
+              class: _vm.buttonClass,
               attrs: {
                 "data-test": "column-picker-button",
                 "aria-selected": isSelected.toString(),
@@ -64,7 +65,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-435aee1f";
+  const __vue_scope_id__ = "data-v-5eadffbc";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <ul class=\"x-option-list x-column-picker-list\" data-test=\"column-picker-list\">\n    <li\n      v-for=\"{ column, cssClasses, events, isSelected } in columnsWithCssClasses\"\n      :key=\"column\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-column-picker-list__item\"\n      data-test=\"column-picker-item\"\n    >\n      <BaseEventButton\n        class=\"x-button column-picker-item__button\"\n        data-test=\"column-picker-button\"\n        :aria-selected=\"isSelected.toString()\"\n        :events=\"events\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </ul>\n</template>\n\n<style lang=\"scss\" scoped>\n  .x-column-picker-list {\n    display: flex;\n    list-style-type: none;\n  }\n</style>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n  import ColumnPickerMixin from './column-picker.mixin';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * @remarks It extends {@link ColumnPickerMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseColumnPickerList extends mixins(ColumnPickerMixin) {\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     *\n     * @internal\n     */\n    protected get columnsWithCssClasses(): ColumnPickerItem[] {\n      return this.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__item--${column}-cols`,\n          {\n            'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n            'x-option-list__item--is-selected': this.selectedColumns === column\n          }\n        ],\n        isSelected: this.selectedColumns === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column\n        }\n      }));\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedColumnPicker`: the event is emitted after the user clicks an item. The event payload\n  is the number of columns that the clicked item represents.\n- `ColumnsNumberProvided`: the event is emitted on component mount. The event payload is the current\n  `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <ul class=\"x-option-list x-column-picker-list\" data-test=\"column-picker-list\">\n    <li\n      v-for=\"{ column, cssClasses, events, isSelected } in columnsWithCssClasses\"\n      :key=\"column\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-column-picker-list__item\"\n      data-test=\"column-picker-item\"\n    >\n      <BaseEventButton\n        class=\"x-button column-picker-item__button\"\n        :class=\"buttonClass\"\n        data-test=\"column-picker-button\"\n        :aria-selected=\"isSelected.toString()\"\n        :events=\"events\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n  import { dynamicPropsMixin } from '../dynamic-props.mixin';\n  import ColumnPickerMixin from './column-picker.mixin';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @remarks It extends {@link ColumnPickerMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseColumnPickerList extends mixins(\n    ColumnPickerMixin,\n    dynamicPropsMixin(['buttonClass'])\n  ) {\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     *\n     * @internal\n     */\n    protected get columnsWithCssClasses(): ColumnPickerItem[] {\n      return this.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__item--${column}-cols`,\n          {\n            'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n            'x-option-list__item--is-selected': this.selectedColumns === column\n          }\n        ],\n        isSelected: this.selectedColumns === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column\n        }\n      }));\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-column-picker-list {\n    display: flex;\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedColumnPicker`: the event is emitted after the user clicks an item. The event payload\n  is the number of columns that the clicked item represents.\n- `ColumnsNumberProvided`: the event is emitted on component mount. The event payload is the current\n  `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_script.vue.js

@@ -2,16 +2,20 @@ import { __decorate } from 'tslib';
 import { mixins } from 'vue-class-component';
 import { Component } from 'vue-property-decorator';
 import __vue_component__ from '../base-event-button.vue.js';
+import { dynamicPropsMixin } from '../dynamic-props.mixin.js';
 import ColumnPickerMixin from './column-picker.mixin.js';
 
 /**
  * Column picker list component renders a list of buttons to choose the columns number.
  *
+ * Additionally, this component exposes the following props to modify the classes of the
+ * elements: `buttonClass`.
+ *
  * @remarks It extends {@link ColumnPickerMixin}.
  *
  * @public
  */
-let BaseColumnPickerList = class BaseColumnPickerList extends mixins(ColumnPickerMixin) {
+let BaseColumnPickerList = class BaseColumnPickerList extends mixins(ColumnPickerMixin, dynamicPropsMixin(['buttonClass'])) {
     /**
      * Maps the column to an object containing: the `column` and `CSS classes`.
      *

package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.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\n\n\n\n\n\nimport { mixins } from 'vue-class-component';\nimport { Component } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring';\nimport BaseEventButton from '../base-event-button.vue';\nimport ColumnPickerMixin from './column-picker.mixin';\n\ninterface ColumnPickerItem {\n  column: number;\n  cssClasses: VueCSSClasses;\n  events: Partial<XEventsTypes>;\n  isSelected: boolean;\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * @remarks It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton }\n})\nexport default class BaseColumnPickerList extends mixins(ColumnPickerMixin) {\n  /**\n   * Maps the column to an object containing: the `column` and `CSS classes`.\n   *\n   * @returns An array of objects containing the column number and CSS classes.\n   *\n   * @internal\n   */\n  protected get columnsWithCssClasses(): ColumnPickerItem[] {\n    return this.columns.map(column => ({\n      column,\n      cssClasses: [\n        `x-column-picker-list__item--${column}-cols`,\n        {\n          'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n          'x-option-list__item--is-selected': this.selectedColumns === column\n        }\n      ],\n      isSelected: this.selectedColumns === column,\n      events: {\n        UserClickedColumnPicker: column,\n        ColumnsNumberProvided: column\n      }\n    }));\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;AAmDA;;;;;;;AAUA,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,MAAM,CAAC,iBAAiB,CAAC;;;;;;;;IAQzE,IAAc,qBAAqB;QACjC,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;YACjC,MAAM;YACN,UAAU,EAAE;gBACV,+BAA+B,MAAM,OAAO;gBAC5C;oBACE,yCAAyC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;oBAC1E,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;iBACpE;aACF;YACD,UAAU,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YAC3C,MAAM,EAAE;gBACN,uBAAuB,EAAE,MAAM;gBAC/B,qBAAqB,EAAE,MAAM;aAC9B;SACF,CAAC,CAAC,CAAC;KACL;CACF,CAAA;AAzBoB,oBAAoB;IAHxC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,oBAAoB,CAyBxC;aAzBoB,oBAAoB;;;;"}
+{"version":3,"file":"base-column-picker-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.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\nimport { mixins } from 'vue-class-component';\nimport { Component } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring';\nimport BaseEventButton from '../base-event-button.vue';\nimport { dynamicPropsMixin } from '../dynamic-props.mixin';\nimport ColumnPickerMixin from './column-picker.mixin';\n\ninterface ColumnPickerItem {\n  column: number;\n  cssClasses: VueCSSClasses;\n  events: Partial<XEventsTypes>;\n  isSelected: boolean;\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @remarks It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton }\n})\nexport default class BaseColumnPickerList extends mixins(\n  ColumnPickerMixin,\n  dynamicPropsMixin(['buttonClass'])\n) {\n  /**\n   * Maps the column to an object containing: the `column` and `CSS classes`.\n   *\n   * @returns An array of objects containing the column number and CSS classes.\n   *\n   * @internal\n   */\n  protected get columnsWithCssClasses(): ColumnPickerItem[] {\n    return this.columns.map(column => ({\n      column,\n      cssClasses: [\n        `x-column-picker-list__item--${column}-cols`,\n        {\n          'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n          'x-option-list__item--is-selected': this.selectedColumns === column\n        }\n      ],\n      isSelected: this.selectedColumns === column,\n      events: {\n        UserClickedColumnPicker: column,\n        ColumnsNumberProvided: column\n      }\n    }));\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;AA8CA;;;;;;;;;;AAaA,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,MAAM,CACtD,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CACnC;;;;;;;;IAQC,IAAc,qBAAqB;QACjC,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;YACjC,MAAM;YACN,UAAU,EAAE;gBACV,+BAA+B,MAAM,OAAO;gBAC5C;oBACE,yCAAyC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;oBAC1E,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;iBACpE;aACF;YACD,UAAU,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YAC3C,MAAM,EAAE;gBACN,uBAAuB,EAAE,MAAM;gBAC/B,qBAAqB,EAAE,MAAM;aAC9B;SACF,CAAC,CAAC,CAAC;KACL;CACF,CAAA;AA5BoB,oBAAoB;IAHxC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,oBAAoB,CA4BxC;aA5BoB,oBAAoB;;;;"}

package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-column-picker-list[data-v-435aee1f] {\n  display: flex;\n  list-style-type: none;\n}";
+var css = ".x-column-picker-list[data-v-5eadffbc] {\n  display: flex;\n  list-style-type: none;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/js/components/dynamic-props.mixin.js

@@ -0,0 +1,29 @@
+import Vue from 'vue';
+
+/**
+ * Mixin that creates a string prop in the component for each element
+ * within the array passed as `propNames` argument.
+ *
+ * @param propNames - Array with the names of the props to create.
+ * @example
+ * ```typescript
+ *
+ *   @Component({
+ *     components: { RelatedTag },
+ *     mixins: [xComponentMixin(relatedTagsXModule)]
+ *   })
+ *   export default class RelatedTags extends Mixins(dynamicPropsMixin(['list', 'li', 'tag'])) {
+ *   // This component will have available 3 props: 'list', 'li' and 'tag'
+ *   }
+ * ```
+ * @returns Mixin for the component.
+ *
+ */
+function dynamicPropsMixin(propNames) {
+    return Vue.extend({
+        props: propNames.reduce((props, propName) => ({ ...props, [propName]: { type: String } }), {})
+    });
+}
+
+export { dynamicPropsMixin };
+//# sourceMappingURL=dynamic-props.mixin.js.map

package/js/components/dynamic-props.mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-props.mixin.js","sources":["../../../src/components/dynamic-props.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { PropValidator } from 'vue/types/options';\nimport { ExtendedVue } from 'vue/types/vue';\n\n/**\n * Mixin that creates a string prop in the component for each element\n * within the array passed as `propNames` argument.\n *\n * @param propNames - Array with the names of the props to create.\n * @example\n * ```typescript\n *\n *   @Component({\n *     components: { RelatedTag },\n *     mixins: [xComponentMixin(relatedTagsXModule)]\n *   })\n *   export default class RelatedTags extends Mixins(dynamicPropsMixin(['list', 'li', 'tag'])) {\n *   // This component will have available 3 props: 'list', 'li' and 'tag'\n *   }\n * ```\n * @returns Mixin for the component.\n *\n */\nexport function dynamicPropsMixin<PropNames extends string>(\n  propNames: PropNames[]\n): ExtendedVue<Vue, unknown, unknown, unknown, Partial<Record<PropNames, string>>> {\n  return Vue.extend({\n    props: propNames.reduce(\n      (props, propName) => ({ ...props, [propName]: { type: String } }),\n      {} as Record<PropNames, PropValidator<string>>\n    )\n  });\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;;;;;;;;;;;;SAmBgB,iBAAiB,CAC/B,SAAsB;IAEtB,OAAO,GAAG,CAAC,MAAM,CAAC;QAChB,KAAK,EAAE,SAAS,CAAC,MAAM,CACrB,CAAC,KAAK,EAAE,QAAQ,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EACjE,EAA8C,CAC/C;KACF,CAAC,CAAC;AACL;;;;"}

package/js/components/sliding-panel.vue.js

@@ -81,7 +81,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-386346f9";
+  const __vue_scope_id__ = "data-v-6843711c";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/sliding-panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-left x-button\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-right x-button\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Vue {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * CSS classes to add to the buttons.\n     *\n     * @public\n     */\n    @Prop()\n    public buttonClass?: string;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel--at-start': this.isScrollAtStart,\n        'x-sliding-panel--at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      if (this.$refs.scrollContainer !== undefined) {\n        const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n        this.isScrollAtStart = !scrollLeft;\n        /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n         *  less than the scroll width even when the scroll is at the end */\n        this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n      }\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    height: 100%;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n      &-left {\n        left: 0;\n      }\n\n      &-right {\n        right: 0;\n      }\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow-x: auto;\n      overflow-y: hidden;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n      .x-sliding-panel__button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n      .x-sliding-panel__button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-left x-button\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-right x-button\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n  import { dynamicPropsMixin } from './dynamic-props.mixin';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Mixins(dynamicPropsMixin(['buttonClass'])) {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel--at-start': this.isScrollAtStart,\n        'x-sliding-panel--at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      if (this.$refs.scrollContainer !== undefined) {\n        const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n        this.isScrollAtStart = !scrollLeft;\n        /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n         *  less than the scroll width even when the scroll is at the end */\n        this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n      }\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    height: 100%;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n      &-left {\n        left: 0;\n      }\n\n      &-right {\n        right: 0;\n      }\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow-x: auto;\n      overflow-y: hidden;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n      .x-sliding-panel__button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n      .x-sliding-panel__button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/sliding-panel.vue_rollup-plugin-vue_script.vue.js

@@ -1,16 +1,19 @@
 import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
+import { Mixins, Prop, Component } from 'vue-property-decorator';
 import { Debounce } from './decorators/debounce.decorators.js';
+import { dynamicPropsMixin } from './dynamic-props.mixin.js';
 
 /**
  * This component allows for any other component or element inside it to be horizontally
  * navigable. It also implements customizable buttons as well as other minor customizations to its
  * general behavior.
  *
+ * Additionally, this component exposes the following props to modify the classes of the
+ * elements: `buttonClass`.
+ *
  * @public
  */
-let SlidingPanel = class SlidingPanel extends Vue {
+let SlidingPanel = class SlidingPanel extends Mixins(dynamicPropsMixin(['buttonClass'])) {
     constructor() {
         super(...arguments);
         /**
@@ -142,9 +145,6 @@ __decorate([
 __decorate([
     Prop({ default: true })
 ], SlidingPanel.prototype, "resetOnContentChange", void 0);
-__decorate([
-    Prop()
-], SlidingPanel.prototype, "buttonClass", void 0);
 __decorate([
     Debounce(100, { leading: true })
 ], SlidingPanel.prototype, "restoreAndUpdateScroll", null);

package/js/components/sliding-panel.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/sliding-panel.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\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../utils/types';\nimport { Debounce } from './decorators/debounce.decorators';\n\n/**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * @public\n */\n@Component\nexport default class SlidingPanel extends Vue {\n  /**\n   * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n   *\n   * @public\n   */\n  @Prop({ default: 0.7 })\n  public scrollFactor!: number;\n\n  /**\n   * Would make the navigation buttons visible when they're needed or always hide them.\n   *\n   * @public\n   */\n  @Prop({ default: true })\n  public showButtons!: boolean;\n\n  /**\n   * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n   * the scroll position to 0.\n   *\n   * @public\n   */\n  @Prop({ default: true })\n  public resetOnContentChange!: boolean;\n\n  /**\n   * CSS classes to add to the buttons.\n   *\n   * @public\n   */\n  @Prop()\n  public buttonClass?: string;\n\n  /**\n   * Indicates if the scroll is at the start of the sliding panel.\n   *\n   * @internal\n   */\n  protected isScrollAtStart = true;\n\n  /**\n   * Indicates if the scroll is at the end of the sliding panel.\n   *\n   * @internal\n   */\n  protected isScrollAtEnd = true;\n\n  /**\n   * HTMLElement referencing the scroll of the component.\n   *\n   * @internal\n   */\n  public $refs!: {\n    scrollContainer: HTMLElement;\n  };\n\n  /**\n   * CSS classes to apply based on the scroll position.\n   *\n   * @returns The CSS classes to apply.\n   *\n   * @internal\n   */\n  protected get cssClasses(): VueCSSClasses {\n    return {\n      'x-sliding-panel--at-start': this.isScrollAtStart,\n      'x-sliding-panel--at-end': this.isScrollAtEnd\n    };\n  }\n\n  /**\n   * Initialises browser platform code:\n   * - Creates a mutation observer to detect content changes and reset scroll position.\n   * - Stores initial size and scroll position values.\n   *\n   * @internal\n   */\n  mounted(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n    resizeObserver.observe(this.$el);\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n    this.$watch(\n      () => this.resetOnContentChange,\n      shouldReset => {\n        if (shouldReset) {\n          contentChangedObserver.observe(this.$refs.scrollContainer, {\n            attributes: false,\n            childList: true,\n            subtree: true,\n            characterData: false\n          });\n        } else {\n          contentChangedObserver.disconnect();\n        }\n      },\n      { immediate: true }\n    );\n    this.$on('hook:beforeDestroy', () => {\n      contentChangedObserver.disconnect();\n      resizeObserver.disconnect();\n    });\n\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Resets the scroll and updates the values of the scroll for the buttons to react.\n   *\n   * @internal\n   */\n  @Debounce(100, { leading: true })\n  restoreAndUpdateScroll(): void {\n    this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Updates the values of the scroll positions to show or hide the buttons depending on it.\n   *\n   * @internal\n   */\n  protected updateScrollPosition(): void {\n    if (this.$refs.scrollContainer !== undefined) {\n      const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n      this.isScrollAtStart = !scrollLeft;\n      /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n       *  less than the scroll width even when the scroll is at the end */\n      this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n    }\n  }\n\n  /**\n   * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n   * method.\n   *\n   * @internal\n   */\n  @Debounce(100, { leading: true })\n  debouncedUpdateScrollPosition(): void {\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Scrolls the wrapper element to the left.\n   *\n   * @internal\n   */\n  protected scrollLeft(): void {\n    this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n  }\n\n  /**\n   * Scrolls the wrapper element to the right.\n   *\n   * @internal\n   */\n  protected scrollRight(): void {\n    this.scrollTo(this.$refs.scrollContainer.clientWidth);\n  }\n\n  /**\n   * Scrolls the wrapper element towards the provided scroll value.\n   *\n   * @param scrollValue - The value the scroll will go towards.\n   *\n   * @internal\n   */\n  protected scrollTo(scrollValue: number): void {\n    this.$refs.scrollContainer.scrollBy({\n      left: scrollValue * this.scrollFactor,\n      behavior: 'smooth'\n    });\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sliding-panel.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/sliding-panel.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\n\n\n\n\n\nimport { Component, Mixins, Prop } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../utils/types';\nimport { Debounce } from './decorators/debounce.decorators';\nimport { dynamicPropsMixin } from './dynamic-props.mixin';\n\n/**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\n@Component\nexport default class SlidingPanel extends Mixins(dynamicPropsMixin(['buttonClass'])) {\n  /**\n   * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n   *\n   * @public\n   */\n  @Prop({ default: 0.7 })\n  public scrollFactor!: number;\n\n  /**\n   * Would make the navigation buttons visible when they're needed or always hide them.\n   *\n   * @public\n   */\n  @Prop({ default: true })\n  public showButtons!: boolean;\n\n  /**\n   * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n   * the scroll position to 0.\n   *\n   * @public\n   */\n  @Prop({ default: true })\n  public resetOnContentChange!: boolean;\n\n  /**\n   * Indicates if the scroll is at the start of the sliding panel.\n   *\n   * @internal\n   */\n  protected isScrollAtStart = true;\n\n  /**\n   * Indicates if the scroll is at the end of the sliding panel.\n   *\n   * @internal\n   */\n  protected isScrollAtEnd = true;\n\n  /**\n   * HTMLElement referencing the scroll of the component.\n   *\n   * @internal\n   */\n  public $refs!: {\n    scrollContainer: HTMLElement;\n  };\n\n  /**\n   * CSS classes to apply based on the scroll position.\n   *\n   * @returns The CSS classes to apply.\n   *\n   * @internal\n   */\n  protected get cssClasses(): VueCSSClasses {\n    return {\n      'x-sliding-panel--at-start': this.isScrollAtStart,\n      'x-sliding-panel--at-end': this.isScrollAtEnd\n    };\n  }\n\n  /**\n   * Initialises browser platform code:\n   * - Creates a mutation observer to detect content changes and reset scroll position.\n   * - Stores initial size and scroll position values.\n   *\n   * @internal\n   */\n  mounted(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n    resizeObserver.observe(this.$el);\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n    this.$watch(\n      () => this.resetOnContentChange,\n      shouldReset => {\n        if (shouldReset) {\n          contentChangedObserver.observe(this.$refs.scrollContainer, {\n            attributes: false,\n            childList: true,\n            subtree: true,\n            characterData: false\n          });\n        } else {\n          contentChangedObserver.disconnect();\n        }\n      },\n      { immediate: true }\n    );\n    this.$on('hook:beforeDestroy', () => {\n      contentChangedObserver.disconnect();\n      resizeObserver.disconnect();\n    });\n\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Resets the scroll and updates the values of the scroll for the buttons to react.\n   *\n   * @internal\n   */\n  @Debounce(100, { leading: true })\n  restoreAndUpdateScroll(): void {\n    this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Updates the values of the scroll positions to show or hide the buttons depending on it.\n   *\n   * @internal\n   */\n  protected updateScrollPosition(): void {\n    if (this.$refs.scrollContainer !== undefined) {\n      const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n      this.isScrollAtStart = !scrollLeft;\n      /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n       *  less than the scroll width even when the scroll is at the end */\n      this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n    }\n  }\n\n  /**\n   * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n   * method.\n   *\n   * @internal\n   */\n  @Debounce(100, { leading: true })\n  debouncedUpdateScrollPosition(): void {\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Scrolls the wrapper element to the left.\n   *\n   * @internal\n   */\n  protected scrollLeft(): void {\n    this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n  }\n\n  /**\n   * Scrolls the wrapper element to the right.\n   *\n   * @internal\n   */\n  protected scrollRight(): void {\n    this.scrollTo(this.$refs.scrollContainer.clientWidth);\n  }\n\n  /**\n   * Scrolls the wrapper element towards the provided scroll value.\n   *\n   * @param scrollValue - The value the scroll will go towards.\n   *\n   * @internal\n   */\n  protected scrollTo(scrollValue: number): void {\n    this.$refs.scrollContainer.scrollBy({\n      left: scrollValue * this.scrollFactor,\n      behavior: 'smooth'\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/components/sliding-panel.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-sliding-panel[data-v-386346f9] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-386346f9] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-386346f9] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-386346f9] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-386346f9] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-386346f9]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-386346f9] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-386346f9] {\n  opacity: 1;\n  pointer-events: all;\n}";
+var css = ".x-sliding-panel[data-v-6843711c] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-6843711c] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-6843711c] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-6843711c] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-6843711c] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-6843711c]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-6843711c] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-6843711c] {\n  opacity: 1;\n  pointer-events: all;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.207",
+  "version": "3.0.0-alpha.209",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -69,7 +69,6 @@
     "@empathyco/x-storage-service": "^2.0.0-alpha.4",
     "@empathyco/x-types": "^10.0.0-alpha.40",
     "@empathyco/x-utils": "^1.0.0-alpha.10",
-    "@types/resize-observer-browser": "~0.1.5",
     "@vue/devtools-api": "~6.2.1",
     "rxjs": "~7.4.0",
     "tslib": "~2.3.0",
@@ -136,5 +135,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "2bcaeda77fd3a5ba53c3da9f3150ac7118fffc54"
+  "gitHead": "580fb32f5aebe749fd602bfc415f8b9f9c21f8d9"
 }

package/report/x-components.api.json

@@ -2159,7 +2159,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@empathyco/x-components!BaseColumnPickerList:class",
-          "docComment": "/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * @remarks\n *\n * It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n",
+          "docComment": "/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`.\n *\n * @remarks\n *\n * It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -45993,7 +45993,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@empathyco/x-components!SlidingPanel:class",
-          "docComment": "/**\n * This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.\n *\n * @public\n */\n",
+          "docComment": "/**\n * This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.\n *\n * Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -46001,8 +46001,8 @@
             },
             {
               "kind": "Reference",
-              "text": "Vue",
-              "canonicalReference": "vue!Vue:interface"
+              "text": "SlidingPanel_base",
+              "canonicalReference": "@empathyco/x-components!~SlidingPanel_base"
             },
             {
               "kind": "Content",
@@ -46012,33 +46012,6 @@
           "releaseTag": "Public",
           "name": "SlidingPanel",
           "members": [
-            {
-              "kind": "Property",
-              "canonicalReference": "@empathyco/x-components!SlidingPanel#buttonClass:member",
-              "docComment": "/**\n * CSS classes to add to the buttons.\n *\n * @public\n */\n",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "buttonClass?: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "string"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isOptional": true,
-              "releaseTag": "Public",
-              "name": "buttonClass",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "isStatic": false
-            },
             {
               "kind": "Property",
               "canonicalReference": "@empathyco/x-components!SlidingPanel#resetOnContentChange:member",
@@ -56372,7 +56345,7 @@
             {
               "kind": "PropertySignature",
               "canonicalReference": "@empathyco/x-components!XEventsTypes#ColumnsNumberProvided:member",
-              "docComment": "/**\n * The number of columns of a grid has changed. Payload: the columns number.\n */\n",
+              "docComment": "/**\n * The provided number of columns of a grid has changed. Payload: the columns number.\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -56422,6 +56395,32 @@
                 "endIndex": 2
               }
             },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@empathyco/x-components!XEventsTypes#RenderedColumnsNumberChanged:member",
+              "docComment": "/**\n * The rendered number of columns of a grid has changed. Payload: the columns number.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "RenderedColumnsNumberChanged: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "number"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "RenderedColumnsNumberChanged",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
             {
               "kind": "PropertySignature",
               "canonicalReference": "@empathyco/x-components!XEventsTypes#SnippetCallbackExecuted:member",

package/report/x-components.api.md

@@ -357,7 +357,13 @@ export class BaseGrid extends Vue_2 {
     injectedListItems: ListItem[];
     protected items: ListItem[];
     // @internal
+    protected mounted(): void;
+    // @internal
+    renderedColumnsNumber: number;
+    // @internal
     protected get style(): Partial<CSSStyleDeclaration>;
+    // @internal
+    protected updateRenderedColumnsNumber(): void;
 }
 
 // @public
@@ -4408,13 +4414,14 @@ export class SlicedFilters extends SlicedFilters_base {
     protected toggleShowMoreFilters(event: MouseEvent): void;
 }
 
+// Warning: (ae-forgotten-export) The symbol "SlidingPanel_base" needs to be exported by the entry point index.d.ts
+//
 // @public
-export class SlidingPanel extends Vue_2 {
+export class SlidingPanel extends SlidingPanel_base {
     // @internal
     $refs: {
         scrollContainer: HTMLElement;
     };
-    buttonClass?: string;
     // @internal
     protected get cssClasses(): VueCSSClasses;
     // @internal
@@ -5245,6 +5252,7 @@ export type XEventsOf<Type> = PropsWithType<XEventsTypes, Type>;
 export interface XEventsTypes extends DeviceXEvents, EmpathizeXEvents, ExtraParamsXEvents, FacetsXEvents, HistoryQueriesXEvents, IdentifierResultsXEvents, NextQueriesXEvents, PopularSearchesXEvents, QueriesPreviewXEvents, QuerySuggestionsXEvents, RecommendationsXEvents, RelatedTagsXEvents, ScrollXEvents, SearchBoxXEvents, SearchXEvents, TaggingXEvents, UrlXEvents {
     ColumnsNumberProvided: number;
     ModuleRegistered: XModuleName;
+    RenderedColumnsNumberChanged: number;
     SnippetCallbackExecuted: {
         event: XEvent;
         callbackReturn: unknown;

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

@@ -49,6 +49,13 @@ export default class BaseGrid extends Vue {
      * @internal
      */
     injectedListItems: ListItem[];
+    /**
+     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}
+     * event whenever the number of columns rendered inside the grid changes.
+     *
+     * @internal
+     */
+    renderedColumnsNumber: number;
     /**
      * It returns the items passed as props or the injected ones.
      *
@@ -83,6 +90,18 @@ export default class BaseGrid extends Vue {
      * @internal
      */
     protected get gridItems(): GridItem[];
+    /**
+     * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.
+     *
+     * @internal
+     */
+    protected mounted(): void;
+    /**
+     * Updates the number of columns rendered inside the grid.
+     *
+     * @internal
+     */
+    protected updateRenderedColumnsNumber(): void;
 }
 export {};
 //# sourceMappingURL=base-grid.vue?rollup-plugin-vue=script.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-grid.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/base-grid.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIzD;;;;;GAKG;AACH,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED;;;;;;;;;GASG;AAEH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,GAAG;IACvC;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;;OAKG;IAEH,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B;;;;;;OAMG;IAEH,SAAS,CAAC,KAAK,EAAG,QAAQ,EAAE,CAAC;IAE7B;;;;OAIG;IAEI,iBAAiB,EAAG,QAAQ,EAAE,CAAC;IAEtC;;;;;;OAMG;IACH,SAAS,KAAK,aAAa,IAAI,QAAQ,EAAE,CAQxC;IAED;;;;;;;OAOG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAExC;IAED;;;;;;;OAOG;IACH,SAAS,KAAK,KAAK,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAMlD;IAED;;;;;;OAMG;IACH,SAAS,KAAK,SAAS,IAAI,QAAQ,EAAE,CASpC;CACF"}
+{"version":3,"file":"base-grid.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/base-grid.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAKzD;;;;;GAKG;AACH,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED;;;;;;;;;GASG;AAEH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,GAAG;IACvC;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;;OAKG;IAEH,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B;;;;;;OAMG;IAEH,SAAS,CAAC,KAAK,EAAG,QAAQ,EAAE,CAAC;IAE7B;;;;OAIG;IAEI,iBAAiB,EAAG,QAAQ,EAAE,CAAC;IAEtC;;;;;OAKG;IAEI,qBAAqB,SAAK;IAEjC;;;;;;OAMG;IACH,SAAS,KAAK,aAAa,IAAI,QAAQ,EAAE,CAQxC;IAED;;;;;;;OAOG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAExC;IAED;;;;;;;OAOG;IACH,SAAS,KAAK,KAAK,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAMlD;IAED;;;;;;OAMG;IACH,SAAS,KAAK,SAAS,IAAI,QAAQ,EAAE,CASpC;IAED;;;;OAIG;IACH,SAAS,CAAC,OAAO,IAAI,IAAI;IASzB;;;;OAIG;IACH,SAAS,CAAC,2BAA2B,IAAI,IAAI;CAI9C"}

package/types/components/column-picker/base-column-picker-list.vue.d.ts

@@ -7,10 +7,13 @@ interface ColumnPickerItem {
     events: Partial<XEventsTypes>;
     isSelected: boolean;
 }
-declare const BaseColumnPickerList_base: import("vue-class-component/lib/declarations").VueClass<ColumnPickerMixin>;
+declare const BaseColumnPickerList_base: import("vue-class-component/lib/declarations").VueClass<ColumnPickerMixin & object & Record<never, any> & Partial<Record<"buttonClass", string>>>;
 /**
  * Column picker list component renders a list of buttons to choose the columns number.
  *
+ * Additionally, this component exposes the following props to modify the classes of the
+ * elements: `buttonClass`.
+ *
  * @remarks It extends {@link ColumnPickerMixin}.
  *
  * @public

package/types/components/column-picker/base-column-picker-list.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/column-picker/base-column-picker-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAuCA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAEtD,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;CACrB;;AAED;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,yBAAyB;IACzE;;;;;;OAMG;IACH,SAAS,KAAK,qBAAqB,IAAI,gBAAgB,EAAE,CAgBxD;CACF"}
+{"version":3,"file":"base-column-picker-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/column-picker/base-column-picker-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAiCA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAEtD,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;CACrB;;AAED;;;;;;;;;GASG;AAIH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,yBAGjD;IACC;;;;;;OAMG;IACH,SAAS,KAAK,qBAAqB,IAAI,gBAAgB,EAAE,CAgBxD;CACF"}

package/types/components/sliding-panel.vue.d.ts

@@ -1,13 +1,16 @@
-import Vue from 'vue';
 import { VueCSSClasses } from '../utils/types';
+declare const SlidingPanel_base: import("vue-class-component/lib/declarations").VueClass<object & Record<never, any> & Partial<Record<"buttonClass", string>>>;
 /**
  * This component allows for any other component or element inside it to be horizontally
  * navigable. It also implements customizable buttons as well as other minor customizations to its
  * general behavior.
  *
+ * Additionally, this component exposes the following props to modify the classes of the
+ * elements: `buttonClass`.
+ *
  * @public
  */
-export default class SlidingPanel extends Vue {
+export default class SlidingPanel extends SlidingPanel_base {
     /**
      * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.
      *
@@ -27,12 +30,6 @@ export default class SlidingPanel extends Vue {
      * @public
      */
     resetOnContentChange: boolean;
-    /**
-     * CSS classes to add to the buttons.
-     *
-     * @public
-     */
-    buttonClass?: string;
     /**
      * Indicates if the scroll is at the start of the sliding panel.
      *
@@ -109,4 +106,5 @@ export default class SlidingPanel extends Vue {
      */
     protected scrollTo(scrollValue: number): void;
 }
+export {};
 //# sourceMappingURL=sliding-panel.vue?rollup-plugin-vue=script.d.ts.map

package/types/components/sliding-panel.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/sliding-panel.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAqCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,GAAG;IAC3C;;;;OAIG;IAEI,YAAY,EAAG,MAAM,CAAC;IAE7B;;;;OAIG;IAEI,WAAW,EAAG,OAAO,CAAC;IAE7B;;;;;OAKG;IAEI,oBAAoB,EAAG,OAAO,CAAC;IAEtC;;;;OAIG;IAEI,WAAW,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;OAIG;IACH,SAAS,CAAC,eAAe,UAAQ;IAEjC;;;;OAIG;IACH,SAAS,CAAC,aAAa,UAAQ;IAE/B;;;;OAIG;IACI,KAAK,EAAG;QACb,eAAe,EAAE,WAAW,CAAC;KAC9B,CAAC;IAEF;;;;;;OAMG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAKxC;IAED;;;;;;OAMG;IACH,OAAO,IAAI,IAAI;IA8Bf;;;;OAIG;IAEH,sBAAsB,IAAI,IAAI;IAK9B;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAUtC;;;;;OAKG;IAEH,6BAA6B,IAAI,IAAI;IAIrC;;;;OAIG;IACH,SAAS,CAAC,UAAU,IAAI,IAAI;IAI5B;;;;OAIG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;CAM9C"}
+{"version":3,"file":"sliding-panel.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/sliding-panel.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAsCA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAI/C;;;;;;;;;GASG;AAEH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,iBAA0C;IAClF;;;;OAIG;IAEI,YAAY,EAAG,MAAM,CAAC;IAE7B;;;;OAIG;IAEI,WAAW,EAAG,OAAO,CAAC;IAE7B;;;;;OAKG;IAEI,oBAAoB,EAAG,OAAO,CAAC;IAEtC;;;;OAIG;IACH,SAAS,CAAC,eAAe,UAAQ;IAEjC;;;;OAIG;IACH,SAAS,CAAC,aAAa,UAAQ;IAE/B;;;;OAIG;IACI,KAAK,EAAG;QACb,eAAe,EAAE,WAAW,CAAC;KAC9B,CAAC;IAEF;;;;;;OAMG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAKxC;IAED;;;;;;OAMG;IACH,OAAO,IAAI,IAAI;IA8Bf;;;;OAIG;IAEH,sBAAsB,IAAI,IAAI;IAK9B;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAUtC;;;;;OAKG;IAEH,6BAA6B,IAAI,IAAI;IAIrC;;;;OAIG;IACH,SAAS,CAAC,UAAU,IAAI,IAAI;IAI5B;;;;OAIG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;CAM9C"}

package/types/wiring/events.types.d.ts

@@ -49,10 +49,15 @@ import { WireMetadata } from './wiring.types';
  */
 export interface XEventsTypes extends DeviceXEvents, EmpathizeXEvents, ExtraParamsXEvents, FacetsXEvents, HistoryQueriesXEvents, IdentifierResultsXEvents, NextQueriesXEvents, PopularSearchesXEvents, QueriesPreviewXEvents, QuerySuggestionsXEvents, RecommendationsXEvents, RelatedTagsXEvents, ScrollXEvents, SearchBoxXEvents, SearchXEvents, TaggingXEvents, UrlXEvents {
     /**
-     * The number of columns of a grid has changed.
+     * The provided number of columns of a grid has changed.
      * Payload: the columns number.
      */
     ColumnsNumberProvided: number;
+    /**
+     * The rendered number of columns of a grid has changed.
+     * Payload: the columns number.
+     */
+    RenderedColumnsNumberChanged: number;
     /**
      * Any kind of suggestions have been displayed (query-suggestions, popular searches...)
      * Payload: The displayed {@link @empathyco/x-types#Suggestion | suggestions}.

package/types/wiring/events.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.types.d.ts","sourceRoot":"","sources":["../../../src/wiring/events.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"events.types.d.ts","sourceRoot":"","sources":["../../../src/wiring/events.types.ts"],"names":[],"mappings":"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"}

package/docs/API-reference/api/x-components.slidingpanel.buttonclass.md

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SlidingPanel](./x-components.slidingpanel.md) &gt; [buttonClass](./x-components.slidingpanel.buttonclass.md)
-
-## SlidingPanel.buttonClass property
-
-CSS classes to add to the buttons.
-
-<b>Signature:</b>
-
-```typescript
-buttonClass?: string;
-```