@empathyco/x-components 3.0.0-alpha.21 → 3.0.0-alpha.210

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

@@ -0,0 +1,55 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import __vue_component__ from './base-grid.vue.js';
+import { XOn } from './decorators/bus.decorators.js';
+
+/**
+ * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
+ * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the
+ * selected number of columns to the grid. It also allows to customize the grid items using the
+ * available `scopedSlots`.
+ *
+ * @public
+ */
+let BaseVariableColumnGrid = class BaseVariableColumnGrid extends Vue {
+    constructor() {
+        super(...arguments);
+        /**
+         * The columns to render in the grid.
+         *
+         * @internal
+         */
+        this.columns = 0;
+    }
+    /**
+     * Handler to update the number of columns when the user selects a new value.
+     *
+     * @param newColumns - The new columns value.
+     *
+     * @internal
+     */
+    setColumns(newColumns) {
+        this.columns = newColumns;
+    }
+};
+__decorate([
+    Prop({ default: 'ul' })
+], BaseVariableColumnGrid.prototype, "animation", void 0);
+__decorate([
+    Prop()
+], BaseVariableColumnGrid.prototype, "items", void 0);
+__decorate([
+    XOn(['ColumnsNumberProvided'])
+], BaseVariableColumnGrid.prototype, "setColumns", null);
+BaseVariableColumnGrid = __decorate([
+    Component({
+        components: {
+            BaseGrid: __vue_component__
+        }
+    })
+], BaseVariableColumnGrid);
+var script = BaseVariableColumnGrid;
+
+export { script as default };
+//# sourceMappingURL=base-variable-column-grid.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +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\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { ListItem } from '../utils/types';\nimport BaseGrid from './base-grid.vue';\nimport { 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})\nexport 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":";;;;;;AAoBA;;;;;;;;AAaA,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,GAAG;IAAvD;;;;;;;QAwBY,YAAO,GAAG,CAAC,CAAC;KAavB;;;;;;;;IAHC,UAAU,CAAC,UAAkB;QAC3B,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;KAC3B;CACF,CAAA;AA9BC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACW;AAUnC;IADC,IAAI,EAAE;qDACsB;AAiB7B;IADC,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC;wDAG9B;AApCkB,sBAAsB;IAL1C,SAAS,CAAC;QACT,UAAU,EAAE;sBACVA,iBAAQ;SACT;KACF,CAAC;GACmB,sBAAsB,CAqC1C;aArCoB,sBAAsB;;;;"}

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

@@ -1,11 +1,11 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './base-column-picker-dropdown.vue_rollup-plugin-vue=script.js';
+import script from './base-column-picker-dropdown.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -13,7 +13,7 @@ var __vue_render__ = function() {
     attrs: {
       value: _vm.selectedColumns,
       items: _vm.columns,
-      animation: _vm.animation
+      animation: _vm.animation,
     },
     on: { change: _vm.emitEvent },
     scopedSlots: _vm._u(
@@ -21,18 +21,18 @@ var __vue_render__ = function() {
         _vm.$scopedSlots.toggle
           ? {
               key: "toggle",
-              fn: function(ref) {
+              fn: function (ref) {
                 var item = ref.item;
                 var isOpen = ref.isOpen;
                 return [
-                  _vm._t("toggle", null, null, { item: item, isOpen: isOpen })
+                  _vm._t("toggle", null, null, { item: item, isOpen: isOpen }),
                 ]
-              }
+              },
             }
           : null,
         {
           key: "item",
-          fn: function(ref) {
+          fn: function (ref) {
             var item = ref.item;
             var isSelected = ref.isSelected;
             var isHighlighted = ref.isHighlighted;
@@ -40,28 +40,28 @@ var __vue_render__ = function() {
               _vm._t("item", null, null, {
                 item: item,
                 isSelected: isSelected,
-                isHighlighted: isHighlighted
-              })
+                isHighlighted: isHighlighted,
+              }),
             ]
-          }
-        }
+          },
+        },
       ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -70,7 +70,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -83,5 +83,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-column-picker-dropdown.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-dropdown.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    @change=\"emitEvent\"\n    :value=\"selectedColumns\"\n    :items=\"columns\"\n    :animation=\"animation\"\n  >\n    <template v-if=\"$scopedSlots.toggle\" #toggle=\"{ item, isOpen }\">\n      <!--\n           @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n           button. If not provided, it uses the `item` slot as fallback.\n           @binding {string|number|Identifiable} item - The item data to render.\n           @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n           closed.\n        -->\n      <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n    </template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <!--\n           @slot (required) From `BaseDropdown` component: Used to render each one of the items\n           content, and as fallback for the toggle button content slot if it is not provided.\n             @binding {string|number|Identifiable} item - Item to render\n             @binding {boolean} isHighlighted - True when the item has the focus.\n             @binding {boolean} isSelected - True when the item is selected.\n        -->\n      <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop } from 'vue-property-decorator';\n  import { mixins } from 'vue-class-component';\n  import Vue from 'vue';\n  import BaseEventButton from '../base-event-button.vue';\n  import BaseDropdown from '../base-dropdown.vue';\n  import ColumnPickerMixin from './column-picker.mixin';\n\n  /**\n   * Column picker dropdown component renders {@link BaseDropdown | dropdown} component which\n   * options are the different columns you can set for a grid.\n   *\n   * It emits {@link XEventsTypes.UserClickedColumnPicker | UserClickedColumnPicker} on dropdown\n   * input.\n   *\n   * @remarks It extends {@link ColumnPickerMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseDropdown, BaseEventButton }\n  })\n  export default class BaseColumnPickerDropdown extends mixins(ColumnPickerMixin) {\n    /**\n     * The transition to use for opening and closing the dropdown.\n     *\n     * @public\n     */\n    @Prop()\n    public animation?: string | typeof Vue;\n\n    /**\n     * Emits a {@link XEventsTypes.UserClickedColumnPicker | UserClickedColumnPicker} and\n     * {@link XEventsTypes.ColumnsNumberProvided | ColumnsNumberProvided} events.\n     *\n     * @param column - Column number payload.\n     */\n    emitEvent(column: number): void {\n      this.$x.emit('UserClickedColumnPicker', column);\n      this.$x.emit('ColumnsNumberProvided', column);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Example\n\nColumn picker dropdown component renders a dropdown component which options are the different\ncolumns you can set for a grid.\n\n## Usage\n\nNotice that the slots provided match with the `BaseDropdown` component. The `item` slot is required\nunlike the `toggle`, which renders the same `item` slot defined by default.\n\n### Default usage\n\n```vue\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    },\n    data() {\n      return {\n        selectedColumns: 2\n      };\n    }\n  };\n</script>\n```\n\n### Customizing toggle button\n\n```vue\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    },\n    data() {\n      return {\n        selectedColumns: 2\n      };\n    }\n  };\n</script>\n```\n\n### Using it without v-model / value\n\nThe component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to\nthat event from outside, so you don't need to store the current column value to keep it synchronized\nwith other column pickers.\n\n```vue\n<template>\n  <BaseColumnPickerDropdown :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    }\n  };\n</script>\n```\n\n## Events\n\nAn event that the component will emit:\n\n- `UserClickedColumnPicker`: the event is emitted after the user clicks an item in the dropdown. The\n  event payload is the number of columns that the clicked item represents.\n- `ColumnsNumberProvided`: the event is emitted on component mount, and whenever the value changes.\n  The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-column-picker-dropdown.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    @change=\"emitEvent\"\n    :value=\"selectedColumns\"\n    :items=\"columns\"\n    :animation=\"animation\"\n  >\n    <template v-if=\"$scopedSlots.toggle\" #toggle=\"{ item, isOpen }\">\n      <!--\n           @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n           button. If not provided, it uses the `item` slot as fallback.\n           @binding {string|number|Identifiable} item - The item data to render.\n           @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n           closed.\n        -->\n      <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n    </template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <!--\n           @slot (required) From `BaseDropdown` component: Used to render each one of the items\n           content, and as fallback for the toggle button content slot if it is not provided.\n             @binding {string|number|Identifiable} item - Item to render\n             @binding {boolean} isHighlighted - True when the item has the focus.\n             @binding {boolean} isSelected - True when the item is selected.\n        -->\n      <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop } from 'vue-property-decorator';\n  import { mixins } from 'vue-class-component';\n  import Vue from 'vue';\n  import BaseEventButton from '../base-event-button.vue';\n  import BaseDropdown from '../base-dropdown.vue';\n  import ColumnPickerMixin from './column-picker.mixin';\n\n  /**\n   * Column picker dropdown component renders {@link BaseDropdown | dropdown} component which\n   * options are the different columns you can set for a grid.\n   *\n   * It emits {@link XEventsTypes.UserClickedColumnPicker | UserClickedColumnPicker} on dropdown\n   * input.\n   *\n   * @remarks It extends {@link ColumnPickerMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseDropdown, BaseEventButton }\n  })\n  export default class BaseColumnPickerDropdown extends mixins(ColumnPickerMixin) {\n    /**\n     * The transition to use for opening and closing the dropdown.\n     *\n     * @public\n     */\n    @Prop()\n    public animation?: string | typeof Vue;\n\n    /**\n     * Emits a {@link XEventsTypes.UserClickedColumnPicker | UserClickedColumnPicker} and\n     * {@link XEventsTypes.ColumnsNumberProvided | ColumnsNumberProvided} events.\n     *\n     * @param column - Column number payload.\n     */\n    emitEvent(column: number): void {\n      this.$x.emit('UserClickedColumnPicker', column);\n      this.$x.emit('ColumnsNumberProvided', column);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nColumn picker dropdown component renders a dropdown component which options are the different\ncolumns you can set for a grid.\n\n### Usage\n\nNotice that the slots provided match with the `BaseDropdown` component. The `item` slot is required\nunlike the `toggle`, which renders the same `item` slot defined by default.\n\n#### Default usage\n\n```vue\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    },\n    data() {\n      return {\n        selectedColumns: 2\n      };\n    }\n  };\n</script>\n```\n\n#### Customizing toggle button\n\n```vue\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    },\n    data() {\n      return {\n        selectedColumns: 2\n      };\n    }\n  };\n</script>\n```\n\n#### Using it without v-model / value\n\nThe component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to\nthat event from outside, so you don't need to store the current column value to keep it synchronized\nwith other column pickers.\n\n```vue\n<template>\n  <BaseColumnPickerDropdown :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    }\n  };\n</script>\n```\n\n## Events\n\nAn event that the component will emit:\n\n- `UserClickedColumnPicker`: the event is emitted after the user clicks an item in the dropdown. The\n  event payload is the number of columns that the clicked item represents.\n- `ColumnsNumberProvided`: the event is emitted on component mount, and whenever the value changes.\n  The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,42 @@
+import { __decorate } from 'tslib';
+import { Prop, Component } from 'vue-property-decorator';
+import { mixins } from 'vue-class-component';
+import __vue_component__$1 from '../base-event-button.vue.js';
+import __vue_component__ from '../base-dropdown.vue.js';
+import ColumnPickerMixin from './column-picker.mixin.js';
+
+/**
+ * Column picker dropdown component renders {@link BaseDropdown | dropdown} component which
+ * options are the different columns you can set for a grid.
+ *
+ * It emits {@link XEventsTypes.UserClickedColumnPicker | UserClickedColumnPicker} on dropdown
+ * input.
+ *
+ * @remarks It extends {@link ColumnPickerMixin}.
+ *
+ * @public
+ */
+let BaseColumnPickerDropdown = class BaseColumnPickerDropdown extends mixins(ColumnPickerMixin) {
+    /**
+     * Emits a {@link XEventsTypes.UserClickedColumnPicker | UserClickedColumnPicker} and
+     * {@link XEventsTypes.ColumnsNumberProvided | ColumnsNumberProvided} events.
+     *
+     * @param column - Column number payload.
+     */
+    emitEvent(column) {
+        this.$x.emit('UserClickedColumnPicker', column);
+        this.$x.emit('ColumnsNumberProvided', column);
+    }
+};
+__decorate([
+    Prop()
+], BaseColumnPickerDropdown.prototype, "animation", void 0);
+BaseColumnPickerDropdown = __decorate([
+    Component({
+        components: { BaseDropdown: __vue_component__, BaseEventButton: __vue_component__$1 }
+    })
+], BaseColumnPickerDropdown);
+var script = BaseColumnPickerDropdown;
+
+export { script as default };
+//# sourceMappingURL=base-column-picker-dropdown.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-column-picker-dropdown.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.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 { Component, Prop } from 'vue-property-decorator';\nimport { mixins } from 'vue-class-component';\nimport Vue from 'vue';\nimport BaseEventButton from '../base-event-button.vue';\nimport BaseDropdown from '../base-dropdown.vue';\nimport ColumnPickerMixin from './column-picker.mixin';\n\n/**\n * Column picker dropdown component renders {@link BaseDropdown | dropdown} component which\n * options are the different columns you can set for a grid.\n *\n * It emits {@link XEventsTypes.UserClickedColumnPicker | UserClickedColumnPicker} on dropdown\n * input.\n *\n * @remarks It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n@Component({\n  components: { BaseDropdown, BaseEventButton }\n})\nexport default class BaseColumnPickerDropdown extends mixins(ColumnPickerMixin) {\n  /**\n   * The transition to use for opening and closing the dropdown.\n   *\n   * @public\n   */\n  @Prop()\n  public animation?: string | typeof Vue;\n\n  /**\n   * Emits a {@link XEventsTypes.UserClickedColumnPicker | UserClickedColumnPicker} and\n   * {@link XEventsTypes.ColumnsNumberProvided | ColumnsNumberProvided} events.\n   *\n   * @param column - Column number payload.\n   */\n  emitEvent(column: number): void {\n    this.$x.emit('UserClickedColumnPicker', column);\n    this.$x.emit('ColumnsNumberProvided', column);\n  }\n}\n"],"names":["BaseDropdown","BaseEventButton"],"mappings":";;;;;;;AAsCA;;;;;;;;;;;AAcA,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,MAAM,CAAC,iBAAiB,CAAC;;;;;;;IAe7E,SAAS,CAAC,MAAc;QACtB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;KAC/C;CACF,CAAA;AAZC;IADC,IAAI,EAAE;2DACgC;AAPpB,wBAAwB;IAH5C,SAAS,CAAC;QACT,UAAU,EAAE,gBAAEA,iBAAY,mBAAEC,mBAAe,EAAE;KAC9C,CAAC;GACmB,wBAAwB,CAmB5C;aAnBoB,wBAAwB;;;;"}

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

@@ -1,12 +1,11 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './base-column-picker-list.vue_rollup-plugin-vue=script.js';
+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 */
-var __vue_script__ = script;
-
+const __vue_script__ = script;
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,9 +13,9 @@ var __vue_render__ = function() {
     "ul",
     {
       staticClass: "x-option-list x-column-picker-list",
-      attrs: { "data-test": "column-picker-list" }
+      attrs: { "data-test": "column-picker-list" },
     },
-    _vm._l(_vm.columnsWithCssClasses, function(ref) {
+    _vm._l(_vm.columnsWithCssClasses, function (ref) {
       var column = ref.column;
       var cssClasses = ref.cssClasses;
       var events = ref.events;
@@ -27,31 +26,32 @@ var __vue_render__ = function() {
           key: column,
           staticClass: "x-option-list__item x-column-picker-list__item",
           class: cssClasses,
-          attrs: { "data-test": "column-picker-item" }
+          attrs: { "data-test": "column-picker-item" },
         },
         [
           _c(
             "BaseEventButton",
             {
               staticClass: "x-button column-picker-item__button",
+              class: _vm.buttonClass,
               attrs: {
                 "data-test": "column-picker-button",
                 "aria-selected": isSelected.toString(),
-                events: events
-              }
+                events: events,
+              },
             },
             [
               _vm._t(
                 "default",
-                function() {
+                function () {
                   return [_vm._v("\n        " + _vm._s(column) + "\n      ")]
                 },
                 null,
                 { column: column, isSelected: isSelected }
-              )
+              ),
             ],
             2
-          )
+          ),
         ],
         1
       )
@@ -63,24 +63,22 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-69bb6b2e_0", { source: ".x-column-picker-list[data-v-69bb6b2e] {\n  display: -ms-flexbox;\n  display: flex;\n  list-style-type: none;\n}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = "data-v-69bb6b2e";
+  const __vue_scope_id__ = "data-v-5eadffbc";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -88,10 +86,10 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-column-picker-list.vue.js.map

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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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

@@ -0,0 +1,52 @@
+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, dynamicPropsMixin(['buttonClass'])) {
+    /**
+     * Maps the column to an object containing: the `column` and `CSS classes`.
+     *
+     * @returns An array of objects containing the column number and CSS classes.
+     *
+     * @internal
+     */
+    get columnsWithCssClasses() {
+        return this.columns.map(column => ({
+            column,
+            cssClasses: [
+                `x-column-picker-list__item--${column}-cols`,
+                {
+                    'x-column-picker-list__item--is-selected': this.selectedColumns === column,
+                    'x-option-list__item--is-selected': this.selectedColumns === column
+                }
+            ],
+            isSelected: this.selectedColumns === column,
+            events: {
+                UserClickedColumnPicker: column,
+                ColumnsNumberProvided: column
+            }
+        }));
+    }
+};
+BaseColumnPickerList = __decorate([
+    Component({
+        components: { BaseEventButton: __vue_component__ }
+    })
+], BaseColumnPickerList);
+var script = BaseColumnPickerList;
+
+export { script as default };
+//# sourceMappingURL=base-column-picker-list.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +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\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

@@ -0,0 +1,16 @@
+import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+
+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) !==
+                '[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

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

package/js/components/column-picker/column-picker.mixin.js

@@ -1,4 +1,4 @@
-import { __extends, __decorate } from 'tslib';
+import { __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Watch } from 'vue-property-decorator';
 import Component from 'vue-class-component';
@@ -9,32 +9,25 @@ import { XEmit, XOn } from '../decorators/bus.decorators.js';
  *
  * @public
  */
-var ColumnPickerMixin = /** @class */ (function (_super) {
-    __extends(ColumnPickerMixin, _super);
-    function ColumnPickerMixin() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+let ColumnPickerMixin = class ColumnPickerMixin extends Vue {
+    constructor() {
+        super(...arguments);
         /**
          * Selected column, `value` prop by default or the first `columns` item.
          *
          * @internal
          */
-        _this.selectedColumns = _this.providedSelectedColumns;
-        return _this;
+        this.selectedColumns = this.providedSelectedColumns;
+    }
+    /**
+     * Retrieves the provided selected column.
+     *
+     * @returns The provided `value`, or the first value of the list of possible columns.
+     * @internal
+     */
+    get providedSelectedColumns() {
+        return this.value ?? this.columns[0];
     }
-    Object.defineProperty(ColumnPickerMixin.prototype, "providedSelectedColumns", {
-        /**
-         * Retrieves the provided selected column.
-         *
-         * @returns The provided `value`, or the first value of the list of possible columns.
-         * @internal
-         */
-        get: function () {
-            var _a;
-            return (_a = this.value) !== null && _a !== void 0 ? _a : this.columns[0];
-        },
-        enumerable: false,
-        configurable: true
-    });
     /**
      * Synchronizes the selected column with the one provided by argument.
      *
@@ -42,9 +35,9 @@ var ColumnPickerMixin = /** @class */ (function (_super) {
      *
      * @internal
      */
-    ColumnPickerMixin.prototype.setSelectedColumns = function (columns) {
+    setSelectedColumns(columns) {
         this.selectedColumns = columns;
-    };
+    }
     /**
      * Synchronizes the number of selected columns with the provided selected column value.
      *
@@ -52,11 +45,11 @@ var ColumnPickerMixin = /** @class */ (function (_super) {
      *
      * @internal
      */
-    ColumnPickerMixin.prototype.emitChange = function (column) {
+    emitChange(column) {
         if (this.value !== column) {
             this.$emit('change', column);
         }
-    };
+    }
     /**
      * Synchronizes the columns number before mounting the component. If the real number of selected
      * columns equals the provided columns, it emits the event to sync it with every other component.
@@ -65,39 +58,39 @@ var ColumnPickerMixin = /** @class */ (function (_super) {
      *
      * @internal
      */
-    ColumnPickerMixin.prototype.beforeMount = function () {
+    beforeMount() {
         if (this.selectedColumns === this.providedSelectedColumns) {
             this.$x.emit('ColumnsNumberProvided', this.selectedColumns);
         }
         else {
             this.emitChange(this.selectedColumns);
         }
-    };
-    __decorate([
-        Prop({ required: false })
-    ], ColumnPickerMixin.prototype, "value", void 0);
-    __decorate([
-        Prop({ required: true })
-    ], ColumnPickerMixin.prototype, "columns", void 0);
-    __decorate([
-        XEmit('ColumnsNumberProvided', { immediate: false })
-    ], ColumnPickerMixin.prototype, "selectedColumns", void 0);
-    __decorate([
-        Watch('providedSelectedColumns'),
-        XOn('ColumnsNumberProvided')
-    ], ColumnPickerMixin.prototype, "setSelectedColumns", null);
-    __decorate([
-        Watch('selectedColumns')
-    ], ColumnPickerMixin.prototype, "emitChange", null);
-    ColumnPickerMixin = __decorate([
-        Component({
-            model: {
-                event: 'change'
-            }
-        })
-    ], ColumnPickerMixin);
-    return ColumnPickerMixin;
-}(Vue));
+    }
+};
+__decorate([
+    Prop({ required: false })
+], ColumnPickerMixin.prototype, "value", void 0);
+__decorate([
+    Prop({ required: true })
+], ColumnPickerMixin.prototype, "columns", void 0);
+__decorate([
+    XEmit('ColumnsNumberProvided', { immediate: false })
+], ColumnPickerMixin.prototype, "selectedColumns", void 0);
+__decorate([
+    Watch('providedSelectedColumns'),
+    XOn('ColumnsNumberProvided')
+], ColumnPickerMixin.prototype, "setSelectedColumns", null);
+__decorate([
+    Watch('selectedColumns')
+], ColumnPickerMixin.prototype, "emitChange", null);
+ColumnPickerMixin = __decorate([
+    Component({
+        model: {
+            event: 'change'
+        }
+    })
+], ColumnPickerMixin);
+var ColumnPickerMixin$1 = ColumnPickerMixin;
 
-export default ColumnPickerMixin;
+export { ColumnPickerMixin$1 as default };
 //# sourceMappingURL=column-picker.mixin.js.map

package/js/components/column-picker/column-picker.mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-picker.mixin.js","sources":["../../../../src/components/column-picker/column-picker.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Prop, Watch } from 'vue-property-decorator';\nimport Component from 'vue-class-component';\nimport { XEmit, XOn } from '../decorators/bus.decorators';\n\n/**\n * Mixin to share Column Pickers logic.\n *\n * @public\n */\n@Component({\n  model: {\n    event: 'change'\n  }\n})\nexport default class ColumnPickerMixin extends Vue {\n  /**\n   * The value of the selected columns number.\n   *\n   * @public\n   */\n  @Prop({ required: false })\n  protected value?: number;\n\n  /**\n   * An array of numbers that represents the number of columns to render.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected columns!: number[];\n\n  /**\n   * Selected column, `value` prop by default or the first `columns` item.\n   *\n   * @internal\n   */\n  @XEmit('ColumnsNumberProvided', { immediate: false })\n  public selectedColumns = this.providedSelectedColumns;\n\n  /**\n   * Retrieves the provided selected column.\n   *\n   * @returns The provided `value`, or the first value of the list of possible columns.\n   * @internal\n   */\n  public get providedSelectedColumns(): number {\n    return this.value ?? this.columns[0];\n  }\n\n  /**\n   * Synchronizes the selected column with the one provided by argument.\n   *\n   * @param columns - The column number.\n   *\n   * @internal\n   */\n  @Watch('providedSelectedColumns')\n  @XOn('ColumnsNumberProvided')\n  setSelectedColumns(columns: number): void {\n    this.selectedColumns = columns;\n  }\n\n  /**\n   * Synchronizes the number of selected columns with the provided selected column value.\n   *\n   * @param column - The new number of columns.\n   *\n   * @internal\n   */\n  @Watch('selectedColumns')\n  protected emitChange(column: number): void {\n    if (this.value !== column) {\n      this.$emit('change', column);\n    }\n  }\n\n  /**\n   * Synchronizes the columns number before mounting the component. If the real number of selected\n   * columns equals the provided columns, it emits the event to sync it with every other component.\n   * If it is not equal it means that the user has already selected a number of columns, so we emit\n   * a `change` event so developers can sync the provided value.\n   *\n   * @internal\n   */\n  beforeMount(): void {\n    if (this.selectedColumns === this.providedSelectedColumns) {\n      this.$x.emit('ColumnsNumberProvided', this.selectedColumns);\n    } else {\n      this.emitChange(this.selectedColumns);\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;;AAKA;;;;;AAUA;IAA+C,qCAAG;IAAlD;QAAA,qEA6EC;;;;;;QAtDQ,qBAAe,GAAG,KAAI,CAAC,uBAAuB,CAAC;;KAsDvD;IA9CC,sBAAW,sDAAuB;;;;;;;aAAlC;;YACE,OAAO,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACtC;;;OAAA;;;;;;;;IAWD,8CAAkB,GAAlB,UAAmB,OAAe;QAChC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;KAChC;;;;;;;;IAUS,sCAAU,GAApB,UAAqB,MAAc;QACjC,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE;YACzB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;SAC9B;KACF;;;;;;;;;IAUD,uCAAW,GAAX;QACE,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,uBAAuB,EAAE;YACzD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;SAC7D;aAAM;YACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SACvC;KACF;IArED;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;oDACD;IAQzB;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;sDACI;IAQ7B;QADC,KAAK,CAAC,uBAAuB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8DACC;IAqBtD;QAFC,KAAK,CAAC,yBAAyB,CAAC;QAChC,GAAG,CAAC,uBAAuB,CAAC;+DAG5B;IAUD;QADC,KAAK,CAAC,iBAAiB,CAAC;uDAKxB;IA5DkB,iBAAiB;QALrC,SAAS,CAAC;YACT,KAAK,EAAE;gBACL,KAAK,EAAE,QAAQ;aAChB;SACF,CAAC;OACmB,iBAAiB,CA6ErC;IAAD,wBAAC;CAAA,CA7E8C,GAAG;;;;"}
+{"version":3,"file":"column-picker.mixin.js","sources":["../../../../src/components/column-picker/column-picker.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Prop, Watch } from 'vue-property-decorator';\nimport Component from 'vue-class-component';\nimport { XEmit, XOn } from '../decorators/bus.decorators';\n\n/**\n * Mixin to share Column Pickers logic.\n *\n * @public\n */\n@Component({\n  model: {\n    event: 'change'\n  }\n})\nexport default class ColumnPickerMixin extends Vue {\n  /**\n   * The value of the selected columns number.\n   *\n   * @public\n   */\n  @Prop({ required: false })\n  protected value?: number;\n\n  /**\n   * An array of numbers that represents the number of columns to render.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected columns!: number[];\n\n  /**\n   * Selected column, `value` prop by default or the first `columns` item.\n   *\n   * @internal\n   */\n  @XEmit('ColumnsNumberProvided', { immediate: false })\n  public selectedColumns = this.providedSelectedColumns;\n\n  /**\n   * Retrieves the provided selected column.\n   *\n   * @returns The provided `value`, or the first value of the list of possible columns.\n   * @internal\n   */\n  public get providedSelectedColumns(): number {\n    return this.value ?? this.columns[0];\n  }\n\n  /**\n   * Synchronizes the selected column with the one provided by argument.\n   *\n   * @param columns - The column number.\n   *\n   * @internal\n   */\n  @Watch('providedSelectedColumns')\n  @XOn('ColumnsNumberProvided')\n  setSelectedColumns(columns: number): void {\n    this.selectedColumns = columns;\n  }\n\n  /**\n   * Synchronizes the number of selected columns with the provided selected column value.\n   *\n   * @param column - The new number of columns.\n   *\n   * @internal\n   */\n  @Watch('selectedColumns')\n  protected emitChange(column: number): void {\n    if (this.value !== column) {\n      this.$emit('change', column);\n    }\n  }\n\n  /**\n   * Synchronizes the columns number before mounting the component. If the real number of selected\n   * columns equals the provided columns, it emits the event to sync it with every other component.\n   * If it is not equal it means that the user has already selected a number of columns, so we emit\n   * a `change` event so developers can sync the provided value.\n   *\n   * @internal\n   */\n  beforeMount(): void {\n    if (this.selectedColumns === this.providedSelectedColumns) {\n      this.$x.emit('ColumnsNumberProvided', this.selectedColumns);\n    } else {\n      this.emitChange(this.selectedColumns);\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;;AAKA;;;;;AAUA,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,GAAG;IAAlD;;;;;;;QAuBS,oBAAe,GAAG,IAAI,CAAC,uBAAuB,CAAC;KAsDvD;;;;;;;IA9CC,IAAW,uBAAuB;QAChC,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;KACtC;;;;;;;;IAWD,kBAAkB,CAAC,OAAe;QAChC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;KAChC;;;;;;;;IAUS,UAAU,CAAC,MAAc;QACjC,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE;YACzB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;SAC9B;KACF;;;;;;;;;IAUD,WAAW;QACT,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,uBAAuB,EAAE;YACzD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;SAC7D;aAAM;YACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SACvC;KACF;CACF,CAAA;AAtEC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;gDACD;AAQzB;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACI;AAQ7B;IADC,KAAK,CAAC,uBAAuB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0DACC;AAqBtD;IAFC,KAAK,CAAC,yBAAyB,CAAC;IAChC,GAAG,CAAC,uBAAuB,CAAC;2DAG5B;AAUD;IADC,KAAK,CAAC,iBAAiB,CAAC;mDAKxB;AA5DkB,iBAAiB;IALrC,SAAS,CAAC;QACT,KAAK,EAAE;YACL,KAAK,EAAE,QAAQ;SAChB;KACF,CAAC;GACmB,iBAAiB,CA6ErC;0BA7EoB,iBAAiB;;;;"}