@empathyco/x-components 5.0.0-alpha.8 → 5.0.0-alpha.9

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.9](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.8...@empathyco/x-components@5.0.0-alpha.9) (2024-05-09)
+
+
+### Features
+
+* migrate `ItemsListInjection` mixin (#1460) ([a89fb51](https://github.com/empathyco/x/commit/a89fb5179de040695f13d56f43de50917e1c7f97))
+
+
+
 ## [5.0.0-alpha.8](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.7...@empathyco/x-components@5.0.0-alpha.8) (2024-05-08)
 
 

package/core/index.js

@@ -144,7 +144,6 @@ export { Debounce } from '../js/components/decorators/debounce.decorators.js';
 export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from '../js/components/decorators/injection.consts.js';
 export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
 export { Getter, State } from '../js/components/decorators/store.decorators.js';
-export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';
 export { xComponentMixin } from '../js/components/x-component.mixin.js';
 export { getRootXComponent, getXComponentXModuleName, isXComponent } from '../js/components/x-component.utils.js';
 export { createUseDevice } from '../js/composables/create-use-device.composable.js';

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/design-system/deprecated-full-theme.css

@@ -1,4 +1,5 @@
 
+
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -14,25 +15,6 @@
 .x-normal-case {
   text-transform: none;
 }
-.x-underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-}
-
-.x-overline {
-  -webkit-text-decoration-line: overline;
-          text-decoration-line: overline;
-}
-
-.x-line-through {
-  -webkit-text-decoration-line: line-through;
-          text-decoration-line: line-through;
-}
-
-.x-no-underline {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-}
 .x-static {
   position: static !important;
 }
@@ -52,7 +34,6 @@
 .x-sticky {
   position: sticky !important;
 }
-
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -979,6 +960,25 @@
 .x-line-height--loose {
   line-height: 2 !important;
 }
+.x-underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.x-overline {
+  -webkit-text-decoration-line: overline;
+          text-decoration-line: overline;
+}
+
+.x-line-through {
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through;
+}
+
+.x-no-underline {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -3286,49 +3286,6 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
-.x-border-color--lead {
-  border-color: var(--x-color-base-lead) !important;
-}
-
-.x-border-color--auxiliary {
-  border-color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-border-color--neutral-10 {
-  border-color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-border-color--neutral-35 {
-  border-color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-border-color--neutral-70 {
-  border-color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-border-color--neutral-95 {
-  border-color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-border-color--neutral-100 {
-  border-color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-border-color--accent {
-  border-color: var(--x-color-base-accent) !important;
-}
-
-.x-border-color--enable {
-  border-color: var(--x-color-base-enable) !important;
-}
-
-.x-border-color--disable {
-  border-color: var(--x-color-base-disable) !important;
-}
-
-.x-border-color--transparent {
-  border-color: var(--x-color-base-transparent) !important;
-}
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -3372,6 +3329,49 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
+.x-border-color--lead {
+  border-color: var(--x-color-base-lead) !important;
+}
+
+.x-border-color--auxiliary {
+  border-color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-border-color--neutral-10 {
+  border-color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-border-color--neutral-35 {
+  border-color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-border-color--neutral-70 {
+  border-color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-border-color--neutral-95 {
+  border-color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-border-color--neutral-100 {
+  border-color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important;
+}
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important;
+}
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important;
+}
+
+.x-border-color--transparent {
+  border-color: var(--x-color-base-transparent) !important;
+}
 .x-text--stroke.x-text {
   --x-string-text-decoration: line-through;
 }
@@ -3565,6 +3565,9 @@
 .x-text--bold.x-small {
   --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
 }
+:root {
+  --x-color-text-accent: var(--x-color-base-accent);
+}
 .x-text--accent {
   --x-color-text-default: var(--x-color-text-accent);
 }
@@ -3681,52 +3684,6 @@
     --x-number-font-weight-tag-default-selected
   );
 }
-:root {
-  --x-color-background-tag-default: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default: var(--x-color-text-tag-default);
-  --x-color-text-tag-default: var(--x-color-text-default);
-  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
-  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
-  --x-size-border-width-tag-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-height-tag-default: var(--x-size-base-07);
-  --x-size-padding-right-tag-default: var(--x-size-base-04);
-  --x-size-padding-left-tag-default: var(--x-size-base-04);
-  --x-size-gap-tag-default: var(--x-size-base-02);
-  --x-font-family-tag-default: var(--x-font-family-text);
-  --x-size-font-tag-default: var(--x-size-font-text);
-  --x-size-line-height-tag-default: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
-  --x-number-font-weight-tag-default-curated-selected: var(
-    --x-number-font-weight-tag-default-selected
-  );
-}
 
 [dir="ltr"] .x-tag {
   border-left-width: var(--x-size-border-width-left-tag-default);
@@ -8840,5 +8797,48 @@
   --x-size-border-width-base: 1px;
 }
 :root {
-  --x-color-text-accent: var(--x-color-base-accent);
+  --x-color-background-tag-default: var(--x-color-base-neutral-100);
+  --x-color-border-tag-default: var(--x-color-text-tag-default);
+  --x-color-text-tag-default: var(--x-color-text-default);
+  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
+  --x-size-border-width-tag-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-height-tag-default: var(--x-size-base-07);
+  --x-size-padding-right-tag-default: var(--x-size-base-04);
+  --x-size-padding-left-tag-default: var(--x-size-base-04);
+  --x-size-gap-tag-default: var(--x-size-base-02);
+  --x-font-family-tag-default: var(--x-font-family-text);
+  --x-size-font-tag-default: var(--x-size-font-text);
+  --x-size-line-height-tag-default: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
 }

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

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BannersList](./x-components.bannerslist.md)
 
-## BannersList class
+## BannersList variable
 
 It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the `ItemsInjectionMixin`<!-- -->.
 
@@ -13,14 +13,26 @@ It also provides the parent slots to customize the items.
 **Signature:**
 
 ```typescript
-export default class BannersList extends ItemsListInjectionMixin 
+_default: import("vue").DefineComponent<{
+    animation: {
+        type: import("vue").PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+}, {
+    items: ComputedRef<ListItem[]>;
+    slots: import("vue/types/v3-setup-context").Slots;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    animation: {
+        type: import("vue").PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+}>>, {
+    animation: string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}> | (import("vue/types/v3-component-public-instance").ComponentPublicInstanceConstructor<import("vue/types/v3-component-public-instance").Vue3Instance<{}, Readonly<import("vue").ExtractPropTypes<{}>>, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, true, import("vue/types/v3-component-options").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import("vue").ExtractPropTypes<{}>>> & import("vue").ShallowUnwrapRef<{}> & import("vue/types/v3-component-options").ExtractComputedReturns<import("vue").ComponentComputedOptions> & import("vue").ComponentMethodOptions & import("vue").ComponentCustomProperties & Readonly<import("vue").ExtractPropTypes<{}>>, any, any, any, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions> & import("vue/types/v3-component-options").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, {}> & {
+        props: {}; /**
+         * Animation component that will be used to animate the banners.
+         *
+         * @public
+         */
+    });
+}>
 ```
-**Extends:** [ItemsListInjectionMixin](./x-components.itemslistinjectionmixin.md)
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.bannerslist.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the banners. |
-|  [stateItems](./x-components.bannerslist.stateitems.md) |  | Banner\[\] | The banners to render from the state. |
-

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

@@ -25,7 +25,10 @@ _default: import("vue").DefineComponent<{
     gridItems: import("vue").ComputedRef<GridItem[]>;
     cssClasses: import("vue").ComputedRef<VueCSSClasses>;
     style: import("vue").ComputedRef<Partial<CSSStyleDeclaration>>;
-    gridEl: Ref<HTMLElement | null>;
+    gridEl: Ref<HTMLElement | {
+        $el: HTMLElement;
+    } | null>;
+    slots: import("vue/types/v3-setup-context").Slots;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     animation: {
         type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;

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

@@ -2,21 +2,45 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ItemsList](./x-components.itemslist.md)
 
-## ItemsList class
+## ItemsList variable
 
 It renders a list of [ListItem](./x-components.listitem.md) providing a slot for each `slotName` which depends on the `modelName`<!-- -->of the item.
 
 **Signature:**
 
 ```typescript
-export default class ItemsList extends ItemsList_base 
+_default: import("vue").DefineComponent<{
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    items: {
+        type: PropType<ListItem[]>;
+        required: true;
+    };
+    itemClass: {
+        type: StringConstructor;
+    };
+}, {
+    computedItems: import("vue").ComputedRef<{
+        dataTest: string;
+        class: Array<string | undefined>;
+    }[]>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    items: {
+        type: PropType<ListItem[]>;
+        required: true;
+    };
+    itemClass: {
+        type: StringConstructor;
+    };
+}>>, {
+    animation: string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}> | (import("vue/types/v3-component-public-instance").ComponentPublicInstanceConstructor<import("vue/types/v3-component-public-instance").Vue3Instance<{}, Readonly<import("vue").ExtractPropTypes<{}>>, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, true, import("vue/types/v3-component-options").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import("vue").ExtractPropTypes<{}>>> & import("vue").ShallowUnwrapRef<{}> & import("vue/types/v3-component-options").ExtractComputedReturns<import("vue").ComponentComputedOptions> & import("vue").ComponentMethodOptions & import("vue").ComponentCustomProperties & Readonly<import("vue").ExtractPropTypes<{}>>, any, any, any, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions> & import("vue/types/v3-component-options").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, {}> & {
+        props: {};
+    });
+}>
 ```
-**Extends:** ItemsList\_base
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.itemslist.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the list. |
-|  [items](./x-components.itemslist.items.md) | <code>protected</code> | [ListItem](./x-components.listitem.md)<!-- -->\[\] | List of items. |
-

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

@@ -13,7 +13,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [AddQueryToHistoryAction](./x-components.addquerytohistoryaction.md) | Class implementation for the [HistoryQueriesActions.addQueryToHistory()](./x-components.historyqueriesactions.addquerytohistory.md) action. |
 |  [AllFilter](./x-components.allfilter.md) | This component receives a required <code>facet</code> with [BooleanFilter](./x-types.booleanfilter.md) as prop and renders a button, which on clicked emits the [FacetsXEvents.UserClickedAllFilter](./x-components.facetsxevents.userclickedallfilter.md) event. By default the rendered button displays a message with the facet label but this content is customizable through the default slot. |
 |  [Banner](./x-components.banner.md) | <p>. A banner result is just an item that has been inserted into the search results to advertise something. Usually it is the first item in the grid or it can be placed in the middle of them and fill the whole row where appears. The banner may be clickable or non-clickable depending on whether it has an associated URL or not. It contains an image and, optionally, a title. In case the image does not load due to an error the banner will not be rendered.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>titleClass</code>.</p> |
-|  [BannersList](./x-components.bannerslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the <code>ItemsInjectionMixin</code>.</p><p>The component provides a default slot which wraps the whole component with the <code>banners</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.</p><p>It also provides the parent slots to customize the items.</p> |
 |  [BaseEventsModal](./x-components.baseeventsmodal.md) | Component containing a modal that emits a [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicking outside the content rendered in the default slot and can receive, through the eventsToCloseModal prop, a list of [XEvent](./x-components.xevent.md) to listen to in order to close also the modal, eventsToOpenModal prop, another list of [XEvent](./x-components.xevent.md) to customize the events to listen to open the modal and a prop, displayOverlay, to display an overlay over the rest of the html. The default slot offers the possibility to customize the modal content. |
 |  [BaseHeaderTogglePanel](./x-components.baseheadertogglepanel.md) | Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of the panel. |
 |  [BaseIdModal](./x-components.baseidmodal.md) | Component containing a modal expecting a required prop, named <code>modalId</code>. It reacts to <code>UserClickedOpenModal</code>, <code>UserClickedCloseModal</code> and <code>UserClickedOutOfModal</code> events, when their payload matches the component's 'modalId' prop, to handle its open/close state. The default slot offers the possibility to customise the modal content. |
@@ -58,12 +57,9 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [HistoryQuery](./x-components.historyquery.md) | This component renders a history query suggestion combining two buttons: one for selecting this suggestion as the search query, and another one to remove this query suggestion from the history queries. |
 |  [IdentifierResult](./x-components.identifierresult.md) | This component renders an identifier result value and highlights its matching part with the query from the state. Receives as prop the [Result](./x-types.result.md) data. |
 |  [IdentifierResults](./x-components.identifierresults.md) | Paints the list of identifier results stored in the state. Each identifier result should be represented by a [IdentifierResult](./x-components.identifierresult.md) component besides any other component. |
-|  [ItemsList](./x-components.itemslist.md) | It renders a list of [ListItem](./x-components.listitem.md) providing a slot for each <code>slotName</code> which depends on the <code>modelName</code>of the item. |
-|  [ItemsListInjectionMixin](./x-components.itemslistinjectionmixin.md) | Mixin to facilitate providing and injecting a list of list items. Injected list is available at <code>injectedListItems</code>, and the provided list should be stored in <code>items</code>. |
 |  [MultiColumnMaxWidthLayout](./x-components.multicolumnmaxwidthlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
 |  [MyHistory](./x-components.myhistory.md) | The component renders the full history of user searched queries grouped by the day they were performed. |
 |  [NextQueries](./x-components.nextqueries.md) | Simple next-queries component that renders a list of \[<code>BaseSuggestions</code>\](./x-components.base-suggestions.md), allowing the user to select one of them, and emitting the needed events. A next query is a suggestion for a new search, related to your previous query. I.e. If people normally search for <code>shirts</code>, and then <code>trousers</code>, <code>trousers</code> would be a next query of <code>shirts</code>. |
-|  [NextQueriesList](./x-components.nextquerieslist.md) | Component that inserts groups of next queries in different positions of the injected search items list, based on the provided configuration. |
 |  [NextQuery](./x-components.nextquery.md) | Renders a next query item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the next query content. If the slot is not overridden, it will render the suggestion query by default. |
 |  [NextQueryPreview](./x-components.nextquerypreview.md) | Retrieves a preview of the results of a next query and exposes them in the default slot, along with the next query and the totalResults of the search request. By default, it renders the names of the results. |
 |  [NumberRangeFilter](./x-components.numberrangefilter.md) | Renders a number range filter, emitting the needed events when clicked. |
@@ -72,7 +68,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [PopularSearch](./x-components.popularsearch.md) | Renders a popular search item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the popular search content. If the slot is not overridden, it will render the suggestion query by default. |
 |  [PopularSearches](./x-components.popularsearches.md) | Simple popular-searches component that renders a list of suggestions, allowing the user to select one of them, and emitting the needed events. A popular search is just a query that has been searched a lot in a certain period and may optionally have associated a set of filters. |
 |  [Promoted](./x-components.promoted.md) | <p>A promoted result is just an item that has been inserted into the search results to advertise something. Usually it is one of the first items in the grid, and has the same shape as a result. It just contains a link to the promoted content, an image, and a title.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>titleClass</code>.</p> |
-|  [PromotedsList](./x-components.promotedslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) of promoteds from [SearchState.promoteds](./x-components.searchstate.promoteds.md) by default using the <code>ItemsInjectionMixin</code>.</p><p>The component provides a default slot which wraps the whole component with the <code>promoteds</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.</p><p>It also provides the parent slots to customize the items.</p> |
 |  [QueryPreviewButton](./x-components.querypreviewbutton.md) | <p>Component containing an event button that emits [QueriesPreviewXEvents.UserAcceptedAQueryPreview](./x-components.queriespreviewxevents.useracceptedaquerypreview.md) when clicked with the full query preview info as payload.</p><p>It has a default slot to customize its contents.</p> |
 |  [QuerySuggestion](./x-components.querysuggestion.md) | This component renders a suggestion for a query. A query suggestion is a recommended query based on previous search queries. It contains the query itself and a set of filters associated. For example, if you're searching for \_shirt\_, a query suggestion could be \_long sleeve shirt\_. |
 |  [QuerySuggestions](./x-components.querysuggestions.md) | This component renders a list of possible search queries to select from as a query is entered in the input field. By default, this is a list of \[<code>QuerySuggestion</code>\](./x-components.query-suggestion.md) components. |
@@ -84,7 +79,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [RemoveHistoryQuery](./x-components.removehistoryquery.md) | Button that when it is pressed emits the [HistoryQueriesXEvents.UserPressedRemoveHistoryQuery](./x-components.historyqueriesxevents.userpressedremovehistoryquery.md) event, expressing the user intention to remove a query in the history. |
 |  [RenderlessExtraParams](./x-components.renderlessextraparams.md) | It emits a [ExtraParamsXEvents.UserChangedExtraParams](./x-components.extraparamsxevents.userchangedextraparams.md) when the <code>updateValue</code> is called. |
 |  [RenderlessFilter](./x-components.renderlessfilter.md) | Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md)<!-- -->, the [XEvent](./x-components.xevent.md) that will be emitted when clicking the content, the css classes and if the content should be deactivated. |
-|  [ResultsList](./x-components.resultslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list with the results from [SearchState.results](./x-components.searchstate.results.md) by default.</p><p>The component provides a default slot which wraps the whole component with the <code>results</code> bound.</p><p>It also provides the slot result to customize the item, which is within the default slot, with the result bound.</p> |
 |  [Scroll](./x-components.scroll.md) | Scrollable container that emits scroll related X Events. It exposes all the listeners and props from the [BaseScroll](./x-components.basescroll.md) component. |
 |  [ScrollMixin](./x-components.scrollmixin.md) | Mixin to share Scroll logic. |
 |  [ScrollToTop](./x-components.scrolltotop.md) | The <code>ScrollToTop</code> component is a button that the user can click to make a container scroll up to its initial position. |
@@ -382,6 +376,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [ArrowUpIcon](./x-components.arrowupicon.md) |  |
 |  [AutoProgressBar](./x-components.autoprogressbar.md) | The auto progress bar component is useful for displaying a visual indicator of numerical data in a bar shape. |
 |  [BagIcon](./x-components.bagicon.md) |  |
+|  [BannersList](./x-components.bannerslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the <code>ItemsInjectionMixin</code>.</p><p>The component provides a default slot which wraps the whole component with the <code>banners</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.</p><p>It also provides the parent slots to customize the items.</p> |
 |  [BarCodeIcon](./x-components.barcodeicon.md) |  |
 |  [BarcodeTinyIcon](./x-components.barcodetinyicon.md) |  |
 |  [BaseAddToCart](./x-components.baseaddtocart.md) | Renders a button with a default slot. It receives the result with the data and emits [XEventsTypes.UserClickedResultAddToCart](./x-components.xeventstypes.userclickedresultaddtocart.md) to the bus on click mouse event. |
@@ -523,6 +518,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [increasePageAppendingResults](./x-components.increasepageappendingresults.md) | Default implementation for the [SearchActions.increasePageAppendingResults()](./x-components.searchactions.increasepageappendingresults.md)<!-- -->. |
 |  [increasePageAppendingResultsWire](./x-components.increasepageappendingresultswire.md) | Increases the current search state <code>page</code> by one. |
 |  [infiniteScroll](./x-components.infinitescroll.md) | <p>Custom Vue directive for infinite scroll.</p><p>This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end, the IntersectionObserver triggers that both elements are intersecting.</p><p>How it works.</p><p>As a summary, if the scroll reaches the end, the <code>vNode.context.onInfiniteScrollEnd</code> function implemented by the component which imports the directive, is executed. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.</p><p>Usage.</p><p>The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: <code>html</code>: will set the <html> as the scrollable container. <code>body</code>: will set the <body> as the scrollable container. ID: will set the DOM element with the provided id as the scrollable container.</p><p>If no argument is provided the scrollable container fallbacks to the viewport.</p> |
+|  [ItemsList](./x-components.itemslist.md) | It renders a list of [ListItem](./x-components.listitem.md) providing a slot for each <code>slotName</code> which depends on the <code>modelName</code>of the item. |
 |  [LightBulbOff](./x-components.lightbulboff.md) |  |
 |  [LightBulbOn](./x-components.lightbulbon.md) |  |
 |  [loadHistoryQueriesFromBrowserStorage](./x-components.loadhistoryqueriesfrombrowserstorage.md) | Default implementation for the [HistoryQueriesActions.loadHistoryQueriesFromBrowserStorage()](./x-components.historyqueriesactions.loadhistoryqueriesfrombrowserstorage.md) action. |
@@ -535,6 +531,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [MinusIcon](./x-components.minusicon.md) |  |
 |  [MinusTinyIcon](./x-components.minustinyicon.md) |  |
 |  [nextQueries](./x-components.nextqueries.md) | Default implementation for the [NextQueriesGetters.nextQueries](./x-components.nextqueriesgetters.nextqueries.md) getter. |
+|  [NextQueriesList](./x-components.nextquerieslist.md) | Component that inserts groups of next queries in different positions of the injected search items list, based on the provided configuration. |
 |  [nextQueriesRequest](./x-components.nextqueriesrequest.md) | Default implementation for the [NextQueriesGetters.request](./x-components.nextqueriesgetters.request.md) getter. |
 |  [nextQueriesXModule](./x-components.nextqueriesxmodule.md) | Next queries [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>next-queries</code> entry point. |
 |  [normalizedQuery](./x-components.normalizedquery.md) | Default implementation for the [QuerySuggestionsGetters.normalizedQuery](./x-components.querysuggestionsgetters.normalizedquery.md) getter. |
@@ -546,6 +543,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [popularSearchesRequest](./x-components.popularsearchesrequest.md) | Default implementation for the [PopularSearchesGetters.request](./x-components.popularsearchesgetters.request.md) getter. |
 |  [popularSearchesXModule](./x-components.popularsearchesxmodule.md) | Popular searches [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>popular-searches</code> entry point. |
 |  [PreselectedFilters](./x-components.preselectedfilters.md) | This component emits [FacetsXEvents.PreselectedFiltersProvided](./x-components.facetsxevents.preselectedfiltersprovided.md) when a preselected filter is set in the snippet config or by using the prop of the component. |
+|  [PromotedsList](./x-components.promotedslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) of promoteds from [SearchState.promoteds](./x-components.searchstate.promoteds.md) by default using the <code>ItemsInjectionMixin</code>.</p><p>The component provides a default slot which wraps the whole component with the <code>promoteds</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.</p><p>It also provides the parent slots to customize the items.</p> |
 |  [queriesPreviewXModule](./x-components.queriespreviewxmodule.md) | QueriesPreview [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>queries-preview</code> entry point. |
 |  [query](./x-components.query.md) | Default implementation for the next-queries query getter. |
 |  [QueryPreview](./x-components.querypreview.md) | Retrieves a preview of the results of a query and exposes them in the default slot, along with the query preview and the totalResults of the search request. By default, it renders the names of the results. |
@@ -575,6 +573,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [resetResultsPreviewWire](./x-components.resetresultspreviewwire.md) | Resets the next query preview results. |
 |  [resetSpellcheckQuery](./x-components.resetspellcheckquery.md) | Resets the search state <code>spellcheckedQuery</code> to its initial value, an empty string. |
 |  [resetStateIfNoRequestWire](./x-components.resetstateifnorequestwire.md) | Resets the search state when the request is changed to null. See the  for details. |
+|  [ResultsList](./x-components.resultslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list with the results from [SearchState.results](./x-components.searchstate.results.md) by default.</p><p>The component provides a default slot which wraps the whole component with the <code>results</code> bound.</p><p>It also provides the slot result to customize the item, which is within the default slot, with the result bound.</p> |
 |  [ResultVariantSelector](./x-components.resultvariantselector.md) | Component to show and select the available variants of a product for a given nest level. TODO: Add logger warning on mount when result is not injected. |
 |  [ResultVariantsProvider](./x-components.resultvariantsprovider.md) | <p>Component that exposes the result merged with its selected variant in the default slot.</p><p>It receives the original result and keeps track of the selected variant.</p><p>It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child.</p> |
 |  [sanitize](./x-components.sanitize.md) | Sanitize characters from a given string. |

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

@@ -2,27 +2,67 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [NextQueriesList](./x-components.nextquerieslist.md)
 
-## NextQueriesList class
+## NextQueriesList variable
 
 Component that inserts groups of next queries in different positions of the injected search items list, based on the provided configuration.
 
 **Signature:**
 
 ```typescript
-export default class NextQueriesList extends NextQueriesList_base 
+_default: import("vue").DefineComponent<{
+    animation: {
+        type: import("vue").PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    frequency: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxNextQueriesPerGroup: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxGroups: NumberConstructor;
+    showOnlyAfterOffset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    items: ComputedRef<ListItem[]>;
+    slots: import("vue/types/v3-setup-context").Slots;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    animation: {
+        type: import("vue").PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    frequency: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxNextQueriesPerGroup: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxGroups: NumberConstructor;
+    showOnlyAfterOffset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    animation: string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}> | (import("vue/types/v3-component-public-instance").ComponentPublicInstanceConstructor<import("vue/types/v3-component-public-instance").Vue3Instance<{}, Readonly<import("vue").ExtractPropTypes<{}>>, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, true, import("vue/types/v3-component-options").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import("vue").ExtractPropTypes<{}>>> & import("vue").ShallowUnwrapRef<{}> & import("vue/types/v3-component-options").ExtractComputedReturns<import("vue").ComponentComputedOptions> & import("vue").ComponentMethodOptions & import("vue").ComponentCustomProperties & Readonly<import("vue").ExtractPropTypes<{}>>, any, any, any, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions> & import("vue/types/v3-component-options").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, {}> & {
+        props: {};
+    });
+    offset: number;
+    frequency: number;
+    maxNextQueriesPerGroup: number;
+    showOnlyAfterOffset: boolean;
+}>
 ```
-**Extends:** NextQueriesList\_base
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation?](./x-components.nextquerieslist.animation.md) | <code>protected</code> | Vue \| string | _(Optional)_ Animation component that will be used to animate the next queries groups. |
-|  [frequency](./x-components.nextquerieslist.frequency.md) |  | number | The items cycle size to keep inserting next queries groups at. |
-|  [hasMoreItems](./x-components.nextquerieslist.hasmoreitems.md) |  | boolean | Indicates if there are more available results than the injected. |
-|  [injectedQuery](./x-components.nextquerieslist.injectedquery.md) |  | string \| undefined | Injected query, updated when the related request(s) have succeeded. |
-|  [maxGroups](./x-components.nextquerieslist.maxgroups.md) |  | number | The maximum number of groups to insert into the injected list items list. |
-|  [maxNextQueriesPerGroup](./x-components.nextquerieslist.maxnextqueriespergroup.md) |  | number | The maximum amount of next queries to add in a single group. |
-|  [offset](./x-components.nextquerieslist.offset.md) |  | number | The first index to insert a group of next queries at. |
-|  [showOnlyAfterOffset](./x-components.nextquerieslist.showonlyafteroffset.md) |  | boolean | Determines if a group is added to the injected items list in case the number of items is smaller than the offset. |
-