@empathyco/x-components 3.0.0-alpha.337 → 3.0.0-alpha.339

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 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.339](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.338...@empathyco/x-components@3.0.0-alpha.339) (2023-03-27)
+
+### ⚠ BREAKING CHANGES
+
+- `base-column-picker-list` structure changes. It now wraps the buttons in a div instead of using ul
+  and li. Additionally, the class for the selected option has been changed to `x-selected`.
+
+### Features
+
+- adapt `base-column-picker-list` to use the XDS component of button group (#1115)
+  ([7057b8f](https://github.com/empathyco/x/commit/7057b8f7cd7f1e20ad248c40e8da97450895cd26)),
+  closes [EX-8144](https://searchbroker.atlassian.net/browse/EX-8144)
+
+# 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.338](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.337...@empathyco/x-components@3.0.0-alpha.338) (2023-03-23)
+
+### Features
+
+- **components:** add `columns` prop in `BaseVariableColumnGrid` (#1112)
+  ([8a74847](https://github.com/empathyco/x/commit/8a7484779542768a1f03dbd09eff164b0ecb8686)),
+  closes [EX-8135](https://searchbroker.atlassian.net/browse/EX-8135)
+
+# 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.337](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.336...@empathyco/x-components@3.0.0-alpha.337) (2023-03-22)
 
 **Note:** Version bump only for package @empathyco/x-components

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

@@ -24,6 +24,7 @@ title: BaseColumnPickerList
 | Name                 | Description                                                                      | Bindings<br />(name - type - description)                                                                                                            |
 | -------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
 | <code>default</code> | Customized Column Picker Button content. Specifying a slot with the column value | **column** <code>number</code> - Columns Number to pick.<br />**isSelected** <code>boolean</code> - True if the columns number are the chosen value. |
+| <code>divider</code> | Customized Column Picker divider. Specify an element to act as divider for       | None                                                                                                                                                 |
 
 ## Examples
 
@@ -102,6 +103,32 @@ export default {
 </script>
 ```
 
+It is also possible to add a divider element between the column picker buttons by overriding the
+`divider` slot.
+
+```vue
+<template>
+  <BaseColumnPickerList :columns="columns">
+    <template #divider>
+      <ChevronRightIcon aria-hidden="true" />
+    </template>
+  </BaseColumnPickerList>
+</template>
+<script>
+import { BaseColumnPickerList, ChevronRightIcon } from "@empathyco/xcomponents";
+
+export default {
+  components: {
+    BaseColumnPickerList,
+    ChevronRightIcon
+  },
+  data() {
+    return { columns: [2, 4, 6] };
+  }
+};
+</script>
+```
+
 #### Customizing the buttons with classes
 
 The `buttonClass` prop can be used to add classes to the buttons.

package/docs/API-reference/components/common/x-components.base-variable-column-grid.md

@@ -8,10 +8,11 @@ title: BaseVariableColumnGrid
 
 ## Props
 
-| Name                   | Description                                                | Type               | Default           |
-| ---------------------- | ---------------------------------------------------------- | ------------------ | ----------------- |
-| <code>animation</code> | Animation component that will be used to animate the grid. | <code>union</code> | <code>'ul'</code> |
-| <code>items</code>     | The list of items to be rendered.                          | <code>Array</code> | <code></code>     |
+| Name                   | Description                                                                                                                             | Type                | Default           |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------------- |
+| <code>animation</code> | Animation component that will be used to animate the grid.                                                                              | <code>union</code>  | <code>'ul'</code> |
+| <code>items</code>     | The list of items to be rendered.                                                                                                       | <code>Array</code>  | <code></code>     |
+| <code>columns</code>   | The columns to render by default in the grid. This property is used when the user has not<br />selected any value in the column picker. | <code>number</code> | <code>0</code>    |
 
 ## Slots
 
@@ -78,3 +79,62 @@ export default {
 };
 </script>
 ```
+
+### Playing with props
+
+Configuring the default columns to be rendered. These columns will be the default value until the
+`ColumnsNumberProvided` is emitted and changes the value.
+
+```vue
+<template>
+  <section class="results">
+    <button @click="setColumns(5)" class="column-picker-selector">
+      <span class="column-picker-selector__text">5 columns</span>
+    </button>
+    <BaseVariableColumnGrid :animation="animation" :items="items" :columns="3">
+      <template #default="{ item }">
+        <span data-test="default-slot">{{ item.id }}</span>
+      </template>
+      <template #result="{ item }">
+        <span data-test="result-slot">{{ "Result " + item.id }}</span>
+      </template>
+    </BaseVariableColumnGrid>
+  </section>
+</template>
+
+<script>
+import {
+  BaseVariableColumnGrid,
+  StaggeredFadeAndSlide
+} from "@empathyco/x-components";
+
+export default {
+  name: "ResultsSection",
+  components: {
+    BaseVariableColumnGrid
+  },
+  data() {
+    return {
+      animation: StaggeredFadeAndSlide,
+      items: [
+        {
+          id: "res-1",
+          modelName: "Result",
+          name: "Product 1"
+        },
+        {
+          id: "res-2",
+          modelName: "Result",
+          name: "Product 2"
+        }
+      ]
+    };
+  },
+  methods: {
+    setColumns(columns) {
+      this.$x.emit("UserClickedColumnPicker", columns);
+    }
+  }
+};
+</script>
+```

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

@@ -10,7 +10,11 @@ var __vue_render__ = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("BaseGrid", {
-    attrs: { animation: _vm.animation, columns: _vm.columns, items: _vm.items },
+    attrs: {
+      animation: _vm.animation,
+      columns: _vm.columnsToRender,
+      items: _vm.items,
+    },
     scopedSlots: _vm._u(
       [
         _vm._l(_vm.$scopedSlots, function (_, name) {

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

@@ -1 +1 @@
-{"version":3,"file":"base-variable-column-grid.vue.js","sources":["../../../src/components/base-variable-column-grid.vue"],"sourcesContent":["<template>\n  <BaseGrid :animation=\"animation\" :columns=\"columns\" :items=\"items\">\n    <template v-for=\"(_, name) in $scopedSlots\" v-slot:[name]=\"{ item }\">\n      <!--\n        @slot Customized item rendering. The slot name can either be default or the item's model\n         name.\n            @binding {GridItem} item - Item to render.\n      -->\n      <slot :name=\"name\" v-bind=\"{ item }\" />\n    </template>\n  </BaseGrid>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ListItem } from '../utils/types';\n  import BaseGrid from './base-grid.vue';\n  import { XOn } from './decorators/bus.decorators';\n\n  /**\n   * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n   * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n   * selected number of columns to the grid. It also allows to customize the grid items using the\n   * available `scopedSlots`.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseGrid\n    }\n  })\n  export default class BaseVariableColumnGrid extends Vue {\n    /**\n     * Animation component that will be used to animate the grid.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\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     * The columns to render in the grid.\n     *\n     * @internal\n     */\n    protected columns = 0;\n\n    /**\n     * Handler to update the number of columns when the user selects a new value.\n     *\n     * @param newColumns - The new columns value.\n     *\n     * @internal\n     */\n    @XOn(['ColumnsNumberProvided'])\n    setColumns(newColumns: number): void {\n      this.columns = newColumns;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the\n`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows\nyou to customize the grid items using the available `scopedSlots`.\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(4)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">4 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    },\n    methods: {\n      setColumns(columns) {\n        this.$x.emit('UserClickedColumnPicker', columns);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-variable-column-grid.vue.js","sources":["../../../src/components/base-variable-column-grid.vue"],"sourcesContent":["<template>\n  <BaseGrid :animation=\"animation\" :columns=\"columnsToRender\" :items=\"items\">\n    <template v-for=\"(_, name) in $scopedSlots\" v-slot:[name]=\"{ item }\">\n      <!--\n        @slot Customized item rendering. The slot name can either be default or the item's model\n         name.\n            @binding {GridItem} item - Item to render.\n      -->\n      <slot :name=\"name\" v-bind=\"{ item }\" />\n    </template>\n  </BaseGrid>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ListItem } from '../utils/types';\n  import BaseGrid from './base-grid.vue';\n  import { XOn } from './decorators/bus.decorators';\n\n  /**\n   * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n   * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n   * selected number of columns to the grid. It also allows to customize the grid items using the\n   * available `scopedSlots`.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseGrid\n    }\n  })\n  export default class BaseVariableColumnGrid extends Vue {\n    /**\n     * Animation component that will be used to animate the grid.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\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     * The columns to render by default in the grid. This property is used when the user has not\n     * selected any value in the column picker.\n     *\n     * @internal\n     */\n    @Prop({ default: 0 })\n    protected columns!: number;\n\n    /**\n     * The number of columns provided by a user interaction.\n     *\n     * @internal\n     */\n    protected providedColumns: number | null = null;\n\n    /**\n     * The number of columns to render in the grid.\n     *\n     * @returns The number of columns.\n     *\n     * @internal\n     */\n    protected get columnsToRender(): number {\n      return this.providedColumns === null ? this.columns : this.providedColumns;\n    }\n\n    /**\n     * Handler to update the number of columns when the user selects a new value.\n     *\n     * @param newColumns - The new columns value.\n     *\n     * @internal\n     */\n    @XOn(['ColumnsNumberProvided'])\n    setColumns(newColumns: number): void {\n      this.providedColumns = newColumns;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the\n`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows\nyou to customize the grid items using the available `scopedSlots`.\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(4)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">4 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    },\n    methods: {\n      setColumns(columns) {\n        this.$x.emit('UserClickedColumnPicker', columns);\n      }\n    }\n  };\n</script>\n```\n\n### Playing with props\n\nConfiguring the default columns to be rendered. These columns will be the default value until the\n`ColumnsNumberProvided` is emitted and changes the value.\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(5)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">5 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\" :columns=\"3\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    },\n    methods: {\n      setColumns(columns) {\n        this.$x.emit('UserClickedColumnPicker', columns);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -16,11 +16,21 @@ let BaseVariableColumnGrid = class BaseVariableColumnGrid extends Vue {
     constructor() {
         super(...arguments);
         /**
-         * The columns to render in the grid.
+         * The number of columns provided by a user interaction.
          *
          * @internal
          */
-        this.columns = 0;
+        this.providedColumns = null;
+    }
+    /**
+     * The number of columns to render in the grid.
+     *
+     * @returns The number of columns.
+     *
+     * @internal
+     */
+    get columnsToRender() {
+        return this.providedColumns === null ? this.columns : this.providedColumns;
     }
     /**
      * Handler to update the number of columns when the user selects a new value.
@@ -30,7 +40,7 @@ let BaseVariableColumnGrid = class BaseVariableColumnGrid extends Vue {
      * @internal
      */
     setColumns(newColumns) {
-        this.columns = newColumns;
+        this.providedColumns = newColumns;
     }
 };
 __decorate([
@@ -39,6 +49,9 @@ __decorate([
 __decorate([
     Prop()
 ], BaseVariableColumnGrid.prototype, "items", void 0);
+__decorate([
+    Prop({ default: 0 })
+], BaseVariableColumnGrid.prototype, "columns", void 0);
 __decorate([
     XOn(['ColumnsNumberProvided'])
 ], BaseVariableColumnGrid.prototype, "setColumns", null);

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

@@ -1 +1 @@
-{"version":3,"file":"base-variable-column-grid.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-variable-column-grid.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ListItem } from '../utils/types';\n  import BaseGrid from './base-grid.vue';\n  import { XOn } from './decorators/bus.decorators';\n\n  /**\n   * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n   * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n   * selected number of columns to the grid. It also allows to customize the grid items using the\n   * available `scopedSlots`.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseGrid\n    }\n  })\n  export default class BaseVariableColumnGrid extends Vue {\n    /**\n     * Animation component that will be used to animate the grid.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\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     * The columns to render in the grid.\n     *\n     * @internal\n     */\n    protected columns = 0;\n\n    /**\n     * Handler to update the number of columns when the user selects a new value.\n     *\n     * @param newColumns - The new columns value.\n     *\n     * @internal\n     */\n    @XOn(['ColumnsNumberProvided'])\n    setColumns(newColumns: number): void {\n      this.columns = newColumns;\n    }\n  }\n"],"names":["BaseGrid"],"mappings":";;;;;;AAoBE;;;;;;;AAOG;AAMY,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,GAAG,CAAA;AAAxC,IAAA,WAAA,GAAA;;AAmBb;;;;AAIG;QACO,IAAO,CAAA,OAAA,GAAG,CAAC,CAAC;KAavB;AAXC;;;;;;AAMG;AAEH,IAAA,UAAU,CAAC,UAAkB,EAAA;AAC3B,QAAA,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;KAC3B;CACF,CAAA;AA9BC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACW,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUnC,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACsB,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAiB7B,UAAA,CAAA;AADC,IAAA,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC;AAG9B,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,IAAA,CAAA,CAAA;AApCkB,sBAAsB,GAAA,UAAA,CAAA;AAL1C,IAAA,SAAS,CAAC;AACT,QAAA,UAAU,EAAE;sBACVA,iBAAQ;AACT,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,sBAAsB,CAqC1C,CAAA;aArCoB,sBAAsB;;;;"}
+{"version":3,"file":"base-variable-column-grid.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-variable-column-grid.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ListItem } from '../utils/types';\n  import BaseGrid from './base-grid.vue';\n  import { XOn } from './decorators/bus.decorators';\n\n  /**\n   * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n   * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n   * selected number of columns to the grid. It also allows to customize the grid items using the\n   * available `scopedSlots`.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseGrid\n    }\n  })\n  export default class BaseVariableColumnGrid extends Vue {\n    /**\n     * Animation component that will be used to animate the grid.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\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     * The columns to render by default in the grid. This property is used when the user has not\n     * selected any value in the column picker.\n     *\n     * @internal\n     */\n    @Prop({ default: 0 })\n    protected columns!: number;\n\n    /**\n     * The number of columns provided by a user interaction.\n     *\n     * @internal\n     */\n    protected providedColumns: number | null = null;\n\n    /**\n     * The number of columns to render in the grid.\n     *\n     * @returns The number of columns.\n     *\n     * @internal\n     */\n    protected get columnsToRender(): number {\n      return this.providedColumns === null ? this.columns : this.providedColumns;\n    }\n\n    /**\n     * Handler to update the number of columns when the user selects a new value.\n     *\n     * @param newColumns - The new columns value.\n     *\n     * @internal\n     */\n    @XOn(['ColumnsNumberProvided'])\n    setColumns(newColumns: number): void {\n      this.providedColumns = newColumns;\n    }\n  }\n"],"names":["BaseGrid"],"mappings":";;;;;;AAoBE;;;;;;;AAOG;AAMY,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,GAAG,CAAA;AAAxC,IAAA,WAAA,GAAA;;AA4Bb;;;;AAIG;QACO,IAAe,CAAA,eAAA,GAAkB,IAAI,CAAC;KAwBjD;AAtBC;;;;;;AAMG;AACH,IAAA,IAAc,eAAe,GAAA;AAC3B,QAAA,OAAO,IAAI,CAAC,eAAe,KAAK,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;KAC5E;AAED;;;;;;AAMG;AAEH,IAAA,UAAU,CAAC,UAAkB,EAAA;AAC3B,QAAA,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC;KACnC;CACF,CAAA;AAlDC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACW,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUnC,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACsB,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS7B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACM,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA4B3B,UAAA,CAAA;AADC,IAAA,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC;AAG9B,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,IAAA,CAAA,CAAA;AAxDkB,sBAAsB,GAAA,UAAA,CAAA;AAL1C,IAAA,SAAS,CAAC;AACT,QAAA,UAAU,EAAE;sBACVA,iBAAQ;AACT,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,sBAAsB,CAyD1C,CAAA;aAzDoB,sBAAsB;;;;"}

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

@@ -1,44 +1,39 @@
 import script from './base-column-picker-list.vue_rollup-plugin-vue_script.vue.js';
-import './base-column-picker-list.vue_rollup-plugin-vue_styles.0.vue.js';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
 const __vue_script__ = script;
+
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(
-    "ul",
+    "div",
     {
-      staticClass: "x-option-list x-column-picker-list",
-      attrs: { "data-test": "column-picker-list" },
+      staticClass: "x-column-picker-list x-button-group",
+      attrs: { "data-test": "column-picker-list", role: "list" },
     },
-    _vm._l(_vm.columnsWithCssClasses, function (ref) {
-      var column = ref.column;
-      var cssClasses = ref.cssClasses;
-      var events = ref.events;
-      var isSelected = ref.isSelected;
-      return _c(
-        "li",
-        {
-          key: column,
-          staticClass: "x-option-list__item x-column-picker-list__item",
-          class: cssClasses,
-          attrs: { "data-test": "column-picker-item" },
-        },
-        [
+    [
+      _vm._l(_vm.columnsWithCssClasses, function (ref, index) {
+        var column = ref.column;
+        var cssClasses = ref.cssClasses;
+        var events = ref.events;
+        var isSelected = ref.isSelected;
+        return [
           _c(
             "BaseEventButton",
             {
-              staticClass: "column-picker-item__button x-button",
-              class: _vm.buttonClass,
+              key: column,
+              staticClass: "x-column-picker-list__button x-button",
+              class: [_vm.buttonClass, cssClasses],
               attrs: {
                 "data-test": "column-picker-button",
                 "aria-pressed": isSelected,
                 events: events,
                 "aria-label": column + " columns",
+                role: "listitem",
               },
             },
             [
@@ -53,11 +48,13 @@ var __vue_render__ = function () {
             ],
             2
           ),
-        ],
-        1
-      )
-    }),
-    0
+          index !== _vm.columnsWithCssClasses.length - 1
+            ? _vm._t("divider")
+            : _vm._e(),
+        ]
+      }),
+    ],
+    2
   )
 };
 var __vue_staticRenderFns__ = [];
@@ -66,7 +63,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-308a0b10";
+  const __vue_scope_id__ = undefined;
   /* 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=\"column-picker-item__button x-button\"\n        :class=\"buttonClass\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\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,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\">\n      <BaseEventButton\n        :key=\"column\"\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\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__button--${column}-cols`,\n          {\n            'x-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\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList,\n      ChevronRightIcon\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,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -27,10 +27,9 @@ let BaseColumnPickerList = class BaseColumnPickerList extends mixins(ColumnPicke
         return this.columns.map(column => ({
             column,
             cssClasses: [
-                `x-column-picker-list__item--${column}-cols`,
+                `x-column-picker-list__button--${column}-cols`,
                 {
-                    'x-column-picker-list__item--is-selected': this.selectedColumns === column,
-                    'x-option-list__item--is-selected': this.selectedColumns === column
+                    'x-selected': this.selectedColumns === column
                 }
             ],
             isSelected: this.selectedColumns === column,

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  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"],"names":["BaseEventButton"],"mappings":";;;;;;;AA+CE;;;;;;;;;AASG;AAIY,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,MAAM,CACtD,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CACnC,CAAA;AACC;;;;;;AAMG;AACH,IAAA,IAAc,qBAAqB,GAAA;QACjC,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;YACjC,MAAM;AACN,YAAA,UAAU,EAAE;AACV,gBAAA,CAAA,4BAAA,EAA+B,MAAM,CAAO,KAAA,CAAA;AAC5C,gBAAA;AACE,oBAAA,yCAAyC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;AAC1E,oBAAA,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;AACpE,iBAAA;AACF,aAAA;AACD,YAAA,UAAU,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;AAC3C,YAAA,MAAM,EAAE;AACN,gBAAA,uBAAuB,EAAE,MAAM;AAC/B,gBAAA,qBAAqB,EAAE,MAAM;AAC9B,aAAA;AACF,SAAA,CAAC,CAAC,CAAC;KACL;CACF,CAAA;AA5BoB,oBAAoB,GAAA,UAAA,CAAA;AAHxC,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;AACmB,CAAA,EAAA,oBAAoB,CA4BxC,CAAA;aA5BoB,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\n\n\n\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__button--${column}-cols`,\n          {\n            'x-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":";;;;;;;AAiDE;;;;;;;;;AASG;AAIY,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,MAAM,CACtD,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CACnC,CAAA;AACC;;;;;;AAMG;AACH,IAAA,IAAc,qBAAqB,GAAA;QACjC,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;YACjC,MAAM;AACN,YAAA,UAAU,EAAE;AACV,gBAAA,CAAA,8BAAA,EAAiC,MAAM,CAAO,KAAA,CAAA;AAC9C,gBAAA;AACE,oBAAA,YAAY,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;AAC9C,iBAAA;AACF,aAAA;AACD,YAAA,UAAU,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;AAC3C,YAAA,MAAM,EAAE;AACN,gBAAA,uBAAuB,EAAE,MAAM;AAC/B,gBAAA,qBAAqB,EAAE,MAAM;AAC9B,aAAA;AACF,SAAA,CAAC,CAAC,CAAC;KACL;CACF,CAAA;AA3BoB,oBAAoB,GAAA,UAAA,CAAA;AAHxC,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;AACmB,CAAA,EAAA,oBAAoB,CA2BxC,CAAA;aA3BoB,oBAAoB;;;;"}

package/js/plugins/x-bus.js

@@ -13,10 +13,10 @@ const bus = new XPriorityBus({
         FromUrl: 8,
         User: 16,
         External: 32,
-        Provided: 64,
         Initialized: 64,
-        DataReceived: 128,
-        ModuleRegistered: 256
+        Provided: 128,
+        DataReceived: 256,
+        ModuleRegistered: 512
     },
     emitCallbacks: [logDevtoolsXEvent]
 });

package/js/plugins/x-bus.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-bus.js","sources":["../../../src/plugins/x-bus.ts"],"sourcesContent":["import { XPriorityBus } from '@empathyco/x-bus';\nimport { XEventsTypes } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { logDevtoolsXEvent } from './devtools/timeline.devtools';\n\n/**\n * Default {@link @empathyco/x-bus#XBus} implementation.\n *\n * @public\n */\nexport const bus = new XPriorityBus<XEventsTypes, WireMetadata>({\n  priorities: {\n    Updated: 2,\n    Changed: 4,\n    FromUrl: 8,\n    User: 16,\n    External: 32,\n    Provided: 64,\n    Initialized: 64,\n    DataReceived: 128,\n    ModuleRegistered: 256\n  },\n  emitCallbacks: [logDevtoolsXEvent]\n});\n"],"names":[],"mappings":";;;AAKA;;;;AAIG;AACU,MAAA,GAAG,GAAG,IAAI,YAAY,CAA6B;AAC9D,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,YAAY,EAAE,GAAG;AACjB,QAAA,gBAAgB,EAAE,GAAG;AACtB,KAAA;IACD,aAAa,EAAE,CAAC,iBAAiB,CAAC;AACnC,CAAA;;;;"}
+{"version":3,"file":"x-bus.js","sources":["../../../src/plugins/x-bus.ts"],"sourcesContent":["import { XPriorityBus } from '@empathyco/x-bus';\nimport { XEventsTypes } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { logDevtoolsXEvent } from './devtools/timeline.devtools';\n\n/**\n * Default {@link @empathyco/x-bus#XBus} implementation.\n *\n * @public\n */\nexport const bus = new XPriorityBus<XEventsTypes, WireMetadata>({\n  priorities: {\n    Updated: 2,\n    Changed: 4,\n    FromUrl: 8,\n    User: 16,\n    External: 32,\n    Initialized: 64,\n    Provided: 128,\n    DataReceived: 256,\n    ModuleRegistered: 512\n  },\n  emitCallbacks: [logDevtoolsXEvent]\n});\n"],"names":[],"mappings":";;;AAKA;;;;AAIG;AACU,MAAA,GAAG,GAAG,IAAI,YAAY,CAA6B;AAC9D,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,YAAY,EAAE,GAAG;AACjB,QAAA,gBAAgB,EAAE,GAAG;AACtB,KAAA;IACD,aAAa,EAAE,CAAC,iBAAiB,CAAC;AACnC,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.337",
+  "version": "3.0.0-alpha.339",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -91,7 +91,7 @@
     "@badeball/cypress-cucumber-preprocessor": "~15.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
     "@cypress/vue2": "~2.0.1",
-    "@empathyco/x-tailwindcss": "^1.0.0-alpha.17",
+    "@empathyco/x-tailwindcss": "^1.0.0-alpha.18",
     "@microsoft/api-documenter": "~7.21.3",
     "@microsoft/api-extractor": "~7.33.7",
     "@rollup/plugin-commonjs": "~24.0.0",
@@ -142,5 +142,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "f4f21a0baaea61d7ccacf928863b62b0fe146d2c"
+  "gitHead": "71d439bbe4d7f6d6176153f19ed96c4c16f9ffbe"
 }

package/report/x-components.api.md

@@ -703,8 +703,12 @@ export class BaseVariableColumnGrid extends Vue_2 {
     protected animation: Vue_2 | string;
     // @internal
     protected columns: number;
+    // @internal
+    protected get columnsToRender(): number;
     protected items?: ListItem[];
     // @internal
+    protected providedColumns: number | null;
+    // @internal
     setColumns(newColumns: number): void;
 }
 

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

@@ -24,11 +24,26 @@ export default class BaseVariableColumnGrid extends Vue {
      */
     protected items?: ListItem[];
     /**
-     * The columns to render in the grid.
+     * The columns to render by default in the grid. This property is used when the user has not
+     * selected any value in the column picker.
      *
      * @internal
      */
     protected columns: number;
+    /**
+     * The number of columns provided by a user interaction.
+     *
+     * @internal
+     */
+    protected providedColumns: number | null;
+    /**
+     * The number of columns to render in the grid.
+     *
+     * @returns The number of columns.
+     *
+     * @internal
+     */
+    protected get columnsToRender(): number;
     /**
      * Handler to update the number of columns when the user selects a new value.
      *

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

@@ -1 +1 @@
-{"version":3,"file":"base-variable-column-grid.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/base-variable-column-grid.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAcE,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI1C;;;;;;;GAOG;AAMH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,GAAG;IACrD;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;;;OAMG;IAEH,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAE7B;;;;OAIG;IACH,SAAS,CAAC,OAAO,SAAK;IAEtB;;;;;;OAMG;IAEH,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;CAGrC"}
+{"version":3,"file":"base-variable-column-grid.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/base-variable-column-grid.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAcE,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI1C;;;;;;;GAOG;AAMH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,GAAG;IACrD;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;;;OAMG;IAEH,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAE7B;;;;;OAKG;IAEH,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEhD;;;;;;OAMG;IACH,SAAS,KAAK,eAAe,IAAI,MAAM,CAEtC;IAED;;;;;;OAMG;IAEH,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;CAGrC"}

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":"AAkCE,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"}
+{"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":"AAoCE,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,CAexD;CACF"}

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

@@ -1,16 +0,0 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
-
-var css = ".x-column-picker-list[data-v-308a0b10] {\n  display: flex;\n  list-style-type: none;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/column-picker/base-column-picker-list.vue?rollup-plugin-vue=styles.0.css',{source:css});
-
-export { css, css as default };
-//# sourceMappingURL=base-column-picker-list.vue_rollup-plugin-vue_styles.0.vue.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"base-column-picker-list.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}