@empathyco/x-components 3.0.0-alpha.358 → 3.0.0-alpha.359

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 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.359](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.358...@empathyco/x-components@3.0.0-alpha.359) (2023-04-24)
+
+### Bug Fixes
+
+- **search:** export `SortPickerList` (#1157)
+  ([eaf877d](https://github.com/empathyco/x/commit/eaf877db49b7c6578ce4daf707d91c711621eae2))
+
+# 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.358](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.357...@empathyco/x-components@3.0.0-alpha.358) (2023-04-24)
 
 ### Features

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -139,6 +139,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SortedFilters](./x-components.sortedfilters.md) | Component that sorts a list of filters and returns them using the default scoped slot. |
 |  [SortList](./x-components.sortlist.md) | The <code>SortList</code> component allows user to select the search results order. This component also allows to change the selected sort programmatically. |
 |  [SortMixin](./x-components.sortmixin.md) | Mixin to share Sort logic. |
+|  [SortPickerList](./x-components.sortpickerlist.md) | The <code>SortPickerList</code> component allows user to select the search results order. This component also allows to change the selected sort programmatically. |
 |  [Spellcheck](./x-components.spellcheck.md) | <p>The <code>Spellcheck</code> component allows to inform the user with a friendly message that he might have misspelled the search query. This message can be set using the default slot of the component, which gives access to the searched query using the <code>query</code> scope property, and the spellchecked query proposal, using the <code>spellcheckedQuery</code> scope property.</p><p>The component will only render itself if the <code>spellcheckedQuery</code> property has value.</p> |
 |  [SpellcheckButton](./x-components.spellcheckbutton.md) | A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [XEventsTypes.UserAcceptedSpellcheckQuery](./x-components.xeventstypes.useracceptedspellcheckquery.md) events, expressing the user intention to set the spellchecked query. |
 |  [StaggeredFadeAndSlide](./x-components.staggeredfadeandslide.md) | Renders a transition group wrapping the elements passed in the default slot and animating them with an staggered fade and slide animation. |

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SortPickerList](./x-components.sortpickerlist.md) &gt; [animation](./x-components.sortpickerlist.animation.md)
+
+## SortPickerList.animation property
+
+The transition to use for rendering the list.
+
+**Signature:**
+
+```typescript
+animation?: string | typeof Vue;
+```

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

@@ -0,0 +1,25 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SortPickerList](./x-components.sortpickerlist.md)
+
+## SortPickerList class
+
+The `SortPickerList` component allows user to select the search results order. This component also allows to change the selected sort programmatically.
+
+**Signature:**
+
+```typescript
+export default class SortPickerList extends SortPickerList_base 
+```
+**Extends:** SortPickerList\_base
+
+## Remarks
+
+It extends [SortMixin](./x-components.sortmixin.md)<!-- -->.
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [animation?](./x-components.sortpickerlist.animation.md) |  | string \| typeof Vue | _(Optional)_ The transition to use for rendering the list. |
+

package/js/index.js

@@ -355,6 +355,7 @@ export { default as Redirection } from './x-modules/search/components/redirectio
 export { default as ResultsList } from './x-modules/search/components/results-list.vue.js';
 export { default as SortDropdown } from './x-modules/search/components/sort-dropdown.vue.js';
 export { default as SortList } from './x-modules/search/components/sort-list.vue.js';
+export { default as SortPickerList } from './x-modules/search/components/sort-picker-list.vue.js';
 export { default as SortMixin } from './x-modules/search/components/sort.mixin.js';
 export { default as Spellcheck } from './x-modules/search/components/spellcheck.vue.js';
 export { default as SpellcheckButton } from './x-modules/search/components/spellcheck-button.vue.js';

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/sort-picker-list.vue.js

@@ -0,0 +1,84 @@
+import script from './sort-picker-list.vue_rollup-plugin-vue_script.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(
+    _vm.animation,
+    {
+      tag: "component",
+      staticClass: "x-sort-picker-list",
+      attrs: { tag: "div", "data-test": "sort-picker", role: "list" },
+    },
+    _vm._l(_vm.listItems, function (ref) {
+      var item = ref.item;
+      var cssClasses = ref.cssClasses;
+      var event = ref.event;
+      return _c(
+        "BaseEventButton",
+        {
+          key: item,
+          class: [cssClasses, _vm.buttonClass],
+          attrs: {
+            "data-test": "sort-picker-button",
+            events: event,
+            "aria-pressed": item === _vm.selectedSort,
+            role: "listitem",
+          },
+        },
+        [
+          _vm._t(
+            "default",
+            function () {
+              return [_vm._v(" " + _vm._s(item) + " ")]
+            },
+            null,
+            { item: item, isSelected: item === _vm.selectedSort }
+          ),
+        ],
+        2
+      )
+    }),
+    1
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };
+//# sourceMappingURL=sort-picker-list.vue.js.map

package/js/x-modules/search/components/sort-picker-list.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { BaseEventButton } from '../../../components';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { searchXModule } from '../x-module';\n  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n  import SortMixin from './sort.mixin';\n\n  /**\n   * Sort Picker item options.\n   *\n   * @public\n   */\n  interface SortPickerItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n  /**\n   * The `SortPickerList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   *\n   * @remarks It extends {@link SortMixin}.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['buttonClass'])],\n    components: {\n      BaseEventButton\n    }\n  })\n  export default class SortPickerList extends mixins(SortMixin) {\n    /**\n     * The transition to use for rendering the list.\n     *\n     * @public\n     */\n    @Prop({ default: 'div' })\n    public animation?: string | typeof Vue;\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     *\n     * @internal\n     */\n    protected get listItems(): SortPickerItem[] {\n      return this.items.map(item => ({\n        item,\n        cssClasses: [\n          {\n            'x-selected': item === this.selectedSort\n          }\n        ],\n        event: { UserClickedASort: item }\n      }));\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- SelectedSortProvided: To sync the selected sort with the store state value. This event is emitted\n  as soon as the list of items is received, whenever this list changes if there is no provided\n  value, and when the provided value changes.\n- UserClickedASort: As its name suggest, the event is emitted after the user clicks one of the sort\n  options. This does not mean that the sort has changed, only that the user has clicked it.\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/sort-picker-list.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,195 @@
+import { __decorate } from 'tslib';
+import { mixins } from 'vue-class-component';
+import { Prop, Component } from 'vue-property-decorator';
+import '../../../components/animations/animate-width.vue.js';
+import '../../../components/animations/collapse-height.vue.js';
+import '../../../components/animations/collapse-width.vue.js';
+import '../../../components/animations/cross-fade.vue.js';
+import '../../../components/animations/fade.vue.js';
+import '../../../components/animations/fade-and-slide.vue.js';
+import '../../../components/animations/staggered-fade-and-slide.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_styles.0.vue.js';
+import 'vue-runtime-helpers/dist/normalize-component.mjs';
+import '../../../components/animations/disable-animation.mixin.js';
+import 'vue';
+import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
+import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
+import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
+import '../../../components/column-picker/base-column-picker-dropdown.vue.js';
+import '../../../components/column-picker/base-column-picker-list.vue.js';
+import '../../../components/column-picker/column-picker.mixin.js';
+import '../../../components/currency/base-currency.vue.js';
+import '../../../components/filters/labels/base-price-filter-label.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/filters/labels/base-rating-filter-label.vue.js';
+import '../../../components/icons/arrow-down.vue.js';
+import '../../../components/icons/arrow-left.vue.js';
+import '../../../components/icons/arrow-right.vue.js';
+import '../../../components/icons/arrow-up.vue.js';
+import '../../../components/icons/bag.vue.js';
+import '../../../components/icons/bar-code.vue.js';
+import '../../../components/icons/barcode-tiny.vue.js';
+import '../../../components/icons/cart.vue.js';
+import '../../../components/icons/cart-filled.vue.js';
+import '../../../components/icons/check-tiny.vue.js';
+import '../../../components/icons/check.vue.js';
+import '../../../components/icons/checkbox-selected.vue.js';
+import '../../../components/icons/checkbox-selected-filled.vue.js';
+import '../../../components/icons/checkbox-unselected.vue.js';
+import '../../../components/icons/checkbox-unselected-filled.vue.js';
+import '../../../components/icons/chevron-down.vue.js';
+import '../../../components/icons/chevron-left.vue.js';
+import '../../../components/icons/chevron-right.vue.js';
+import '../../../components/icons/chevron-tiny-down.vue.js';
+import '../../../components/icons/chevron-tiny-left.vue.js';
+import '../../../components/icons/chevron-tiny-right.vue.js';
+import '../../../components/icons/chevron-tiny-up.vue.js';
+import '../../../components/icons/chevron-up.vue.js';
+import '../../../components/icons/corner-arrow-left.vue.js';
+import '../../../components/icons/corner-arrow-right.vue.js';
+import '../../../components/icons/cross-tiny.vue.js';
+import '../../../components/icons/cross.vue.js';
+import '../../../components/icons/curated-check.vue.js';
+import '../../../components/icons/curated-check-filled.vue.js';
+import '../../../components/icons/curated-check-tiny.vue.js';
+import '../../../components/icons/curated-check-tiny-filled.vue.js';
+import '../../../components/icons/diagonal-arrow-left-down.vue.js';
+import '../../../components/icons/diagonal-arrow-left-top.vue.js';
+import '../../../components/icons/diagonal-arrow-right-down.vue.js';
+import '../../../components/icons/diagonal-arrow-right-top.vue.js';
+import '../../../components/icons/filters.vue.js';
+import '../../../components/icons/grid-1-col.vue.js';
+import '../../../components/icons/grid-2-col.vue.js';
+import '../../../components/icons/grid-4-col.vue.js';
+import '../../../components/icons/grid-2-rows.vue.js';
+import '../../../components/icons/heart.vue.js';
+import '../../../components/icons/heart-filled.vue.js';
+import '../../../components/icons/hide.vue.js';
+import '../../../components/icons/history-tiny.vue.js';
+import '../../../components/icons/history.vue.js';
+import '../../../components/icons/light-bulb-off.vue.js';
+import '../../../components/icons/light-bulb-on.vue.js';
+import '../../../components/icons/menu.vue.js';
+import '../../../components/icons/minus-tiny.vue.js';
+import '../../../components/icons/minus.vue.js';
+import '../../../components/icons/plus.vue.js';
+import '../../../components/icons/plus-tiny.vue.js';
+import '../../../components/icons/radiobutton-selected.vue.js';
+import '../../../components/icons/radiobutton-unselected.vue.js';
+import '../../../components/icons/search.vue.js';
+import '../../../components/icons/settings.vue.js';
+import '../../../components/icons/show.vue.js';
+import '../../../components/icons/sort-az.vue.js';
+import '../../../components/icons/sort-price-down.vue.js';
+import '../../../components/icons/sort-price-up.vue.js';
+import '../../../components/icons/sort-relevancy.vue.js';
+import '../../../components/icons/sort-za.vue.js';
+import '../../../components/icons/star.vue.js';
+import '../../../components/icons/star-filled.vue.js';
+import '../../../components/icons/search-tiny.vue.js';
+import '../../../components/icons/tag.vue.js';
+import '../../../components/icons/tag-filled.vue.js';
+import '../../../components/icons/trash-open.vue.js';
+import '../../../components/icons/trash.vue.js';
+import '../../../components/icons/trending-tiny.vue.js';
+import '../../../components/icons/trending.vue.js';
+import '../../../components/icons/user.vue.js';
+import '../../../components/icons/user-filled.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
+import '../../../components/modals/base-events-modal.vue.js';
+import '../../../components/modals/base-events-modal-open.vue.js';
+import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import '../../../components/modals/base-id-modal-close.vue.js';
+import '../../../components/modals/base-id-modal-open.vue.js';
+import '../../../components/modals/close-main-modal.vue.js';
+import '../../../components/modals/main-modal.vue.js';
+import '../../../components/modals/open-main-modal.vue.js';
+import '../../../components/panels/base-header-toggle-panel.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel-button.vue.js';
+import '../../../components/panels/base-tabs-panel.vue.js';
+import '../../../components/result/base-result-add-to-cart.vue.js';
+import '../../../components/result/base-result-current-price.vue.js';
+import '../../../components/result/base-result-image.vue.js';
+import '../../../components/result/base-result-link.vue.js';
+import '../../../components/result/base-result-previous-price.vue.js';
+import '../../../components/result/base-result-fallback-image.vue.js';
+import '../../../components/result/base-result-placeholder-image.vue.js';
+import '../../../components/result/base-result-rating.vue.js';
+import '../../../components/result/result-variants-provider.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/result/result-variant-selector.vue.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/suggestions/base-suggestion.vue.js';
+import '../../../components/suggestions/base-suggestions.vue.js';
+import '../../../components/auto-progress-bar.vue.js';
+import '../../../components/base-dropdown.vue.js';
+import __vue_component__ from '../../../components/base-event-button.vue.js';
+import '../../../components/base-grid.vue.js';
+import '../../../components/base-keyboard-navigation.vue.js';
+import '../../../components/base-rating.vue.js';
+import '../../../components/base-switch.vue.js';
+import '../../../components/base-variable-column-grid.vue.js';
+import '../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/highlight.vue.js';
+import '../../../components/items-list.vue.js';
+import '../../../components/location-provider.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/no-element.js';
+import '../../../components/sliding-panel.vue.js';
+import '../../../components/snippet-callbacks.vue.js';
+import 'rxjs';
+import 'rxjs/operators';
+import '../../../components/items-list-injection.mixin.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { searchXModule } from '../x-module.js';
+import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin.js';
+import SortMixin from './sort.mixin.js';
+
+/**
+ * The `SortPickerList` component allows user to select the search results order. This component
+ * also allows to change the selected sort programmatically.
+ *
+ * @remarks It extends {@link SortMixin}.
+ *
+ * @public
+ */
+let SortPickerList = class SortPickerList extends mixins(SortMixin) {
+    /**
+     * Sort list items.
+     *
+     * @returns A list of items with their css class and the event associate to it.
+     *
+     * @internal
+     */
+    get listItems() {
+        return this.items.map(item => ({
+            item,
+            cssClasses: [
+                {
+                    'x-selected': item === this.selectedSort
+                }
+            ],
+            event: { UserClickedASort: item }
+        }));
+    }
+};
+__decorate([
+    Prop({ default: 'div' })
+], SortPickerList.prototype, "animation", void 0);
+SortPickerList = __decorate([
+    Component({
+        mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['buttonClass'])],
+        components: {
+            BaseEventButton: __vue_component__
+        }
+    })
+], SortPickerList);
+var script = SortPickerList;
+
+export { script as default };
+//# sourceMappingURL=sort-picker-list.vue_rollup-plugin-vue_script.vue.js.map

package/js/x-modules/search/components/sort-picker-list.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-picker-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search/components/sort-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  import { Sort } from '@empathyco/x-types';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { BaseEventButton } from '../../../components';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { searchXModule } from '../x-module';\n  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n  import SortMixin from './sort.mixin';\n\n  /**\n   * Sort Picker item options.\n   *\n   * @public\n   */\n  interface SortPickerItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n  /**\n   * The `SortPickerList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   *\n   * @remarks It extends {@link SortMixin}.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['buttonClass'])],\n    components: {\n      BaseEventButton\n    }\n  })\n  export default class SortPickerList extends mixins(SortMixin) {\n    /**\n     * The transition to use for rendering the list.\n     *\n     * @public\n     */\n    @Prop({ default: 'div' })\n    public animation?: string | typeof Vue;\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     *\n     * @internal\n     */\n    protected get listItems(): SortPickerItem[] {\n      return this.items.map(item => ({\n        item,\n        cssClasses: [\n          {\n            'x-selected': item === this.selectedSort\n          }\n        ],\n        event: { UserClickedASort: item }\n      }));\n    }\n  }\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CE;;;;;;;AAOG;AAOY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,MAAM,CAAC,SAAS,CAAC,CAAA;AAQ3D;;;;;;AAMG;AACH,IAAA,IAAc,SAAS,GAAA;QACrB,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK;YAC7B,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA;AACE,oBAAA,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC,YAAY;AACzC,iBAAA;AACF,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE;AAClC,SAAA,CAAC,CAAC,CAAC;KACL;CACF,CAAA;AAnBC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACc,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPpB,cAAc,GAAA,UAAA,CAAA;AANlC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,EAAE,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;AAC5E,QAAA,UAAU,EAAE;6BACVA,iBAAe;AAChB,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,cAAc,CA0BlC,CAAA;aA1BoB,cAAc;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.358",
+  "version": "3.0.0-alpha.359",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "70912f9cbfb4e0d921e22ed13d4107a2786bfce8"
+  "gitHead": "6ca064a467768220f7cb5df238384848091730e8"
 }

package/report/x-components.api.json

@@ -52223,6 +52223,73 @@
           },
           "implementsTokenRanges": []
         },
+        {
+          "kind": "Class",
+          "canonicalReference": "@empathyco/x-components!SortPickerList:class",
+          "docComment": "/**\n * The `SortPickerList` component allows user to select the search results order. This component also allows to change the selected sort programmatically.\n *\n * @remarks\n *\n * It extends {@link SortMixin}.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export default class SortPickerList extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "SortPickerList_base",
+              "canonicalReference": "@empathyco/x-components!~SortPickerList_base"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "fileUrlPath": "dist/types/x-modules/search/components/sort-picker-list.vue.d.ts",
+          "releaseTag": "Public",
+          "isAbstract": false,
+          "name": "SortPickerList",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!SortPickerList#animation:member",
+              "docComment": "/**\n * The transition to use for rendering the list.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "animation?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string | typeof "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Vue",
+                  "canonicalReference": "vue!Vue:var"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "animation",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            }
+          ],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "implementsTokenRanges": []
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@empathyco/x-components!SortPriceDownIcon:var",

package/report/x-components.api.md

@@ -4842,6 +4842,17 @@ export class SortMixin extends Vue_2 {
     selectedSort: Sort;
 }
 
+// Warning: (ae-forgotten-export) The symbol "SortPickerList_base" needs to be exported by the entry point index.d.ts
+//
+// @public
+export class SortPickerList extends SortPickerList_base {
+    animation?: string | typeof Vue_2;
+    // Warning: (ae-forgotten-export) The symbol "SortPickerItem" needs to be exported by the entry point index.d.ts
+    //
+    // @internal
+    protected get listItems(): SortPickerItem[];
+}
+
 // @public (undocumented)
 export const SortPriceDownIcon: {};
 

package/search/index.js

@@ -9,6 +9,7 @@ export { default as Redirection } from '../js/x-modules/search/components/redire
 export { default as ResultsList } from '../js/x-modules/search/components/results-list.vue.js';
 export { default as SortDropdown } from '../js/x-modules/search/components/sort-dropdown.vue.js';
 export { default as SortList } from '../js/x-modules/search/components/sort-list.vue.js';
+export { default as SortPickerList } from '../js/x-modules/search/components/sort-picker-list.vue.js';
 export { default as SortMixin } from '../js/x-modules/search/components/sort.mixin.js';
 export { default as Spellcheck } from '../js/x-modules/search/components/spellcheck.vue.js';
 export { default as SpellcheckButton } from '../js/x-modules/search/components/spellcheck-button.vue.js';

package/types/x-modules/search/components/index.d.ts

@@ -9,6 +9,7 @@ export { default as Redirection } from './redirection.vue';
 export { default as ResultsList } from './results-list.vue';
 export { default as SortDropdown } from './sort-dropdown.vue';
 export { default as SortList } from './sort-list.vue';
+export { default as SortPickerList } from './sort-picker-list.vue';
 export { default as SortMixin } from './sort.mixin';
 export { default as Spellcheck } from './spellcheck.vue';
 export { default as SpellcheckButton } from './spellcheck-button.vue';

package/types/x-modules/search/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

package/types/x-modules/search/components/sort-picker-list.vue.d.ts

@@ -0,0 +1,42 @@
+import { Sort } from '@empathyco/x-types';
+import Vue from 'vue';
+import { VueCSSClasses } from '../../../utils';
+import { XEventsTypes } from '../../../wiring';
+import SortMixin from './sort.mixin';
+/**
+ * Sort Picker item options.
+ *
+ * @public
+ */
+interface SortPickerItem {
+    item: Sort;
+    cssClasses: VueCSSClasses;
+    event: Partial<XEventsTypes>;
+}
+declare const SortPickerList_base: import("vue-class-component/lib/declarations").VueClass<SortMixin>;
+/**
+ * The `SortPickerList` component allows user to select the search results order. This component
+ * also allows to change the selected sort programmatically.
+ *
+ * @remarks It extends {@link SortMixin}.
+ *
+ * @public
+ */
+export default class SortPickerList extends SortPickerList_base {
+    /**
+     * The transition to use for rendering the list.
+     *
+     * @public
+     */
+    animation?: string | typeof Vue;
+    /**
+     * Sort list items.
+     *
+     * @returns A list of items with their css class and the event associate to it.
+     *
+     * @internal
+     */
+    protected get listItems(): SortPickerItem[];
+}
+export {};
+//# sourceMappingURL=sort-picker-list.vue?rollup-plugin-vue=script.d.ts.map

package/types/x-modules/search/components/sort-picker-list.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-picker-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAyBE,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC;;;;GAIG;AACH,UAAU,cAAc;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC9B;;AACD;;;;;;;GAOG;AAOH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,mBAAiB;IAC3D;;;;OAIG;IAEI,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC;IACvC;;;;;;OAMG;IACH,SAAS,KAAK,SAAS,IAAI,cAAc,EAAE,CAU1C;CACF"}