@empathyco/x-components 3.0.0-alpha.19 → 3.0.0-alpha.23

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

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlMutations](./x-components.urlmutations.md) &gt; [setExtraParams](./x-components.urlmutations.setextraparams.md)
+
+## UrlMutations.setExtraParams() method
+
+Sets new extra params.
+
+<b>Signature:</b>
+
+```typescript
+setExtraParams(extraParam: Dictionary<UrlParamValue>): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  extraParam | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;[UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; | The new query of the search-box. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlMutations](./x-components.urlmutations.md) &gt; [setParams](./x-components.urlmutations.setparams.md)
+
+## UrlMutations.setParams() method
+
+Sets the new params.
+
+<b>Signature:</b>
+
+```typescript
+setParams(params: Record<keyof Params, UrlParamValue>): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  params | Record&lt;keyof [Params](./x-components.params.md)<!-- -->, [UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; | The new query of the search-box. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -4,6 +4,8 @@
 
 ## UrlMutations.setUrlConfig() method
 
+Sets a new url configuration.
+
 <b>Signature:</b>
 
 ```typescript
@@ -14,7 +16,7 @@ setUrlConfig(config: UrlConfig): void;
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  config | [UrlConfig](./x-components.urlconfig.md) |  |
+|  config | [UrlConfig](./x-components.urlconfig.md) | The new query of the search-box. |
 
 <b>Returns:</b>
 

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

@@ -9,5 +9,7 @@ The key of the parameter to store in the URL.
 <b>Signature:</b>
 
 ```typescript
-export declare type UrlParamKey = string;
+export declare type UrlParamKey = Extract<keyof Params, string>;
 ```
+<b>References:</b> [Params](./x-components.params.md)
+

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

@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-extraParams: Record<UrlParamKey, UrlParamValue>;
+extraParams: Dictionary<UrlParamValue>;
 ```

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

@@ -17,10 +17,6 @@ export interface UrlState
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [config](./x-components.urlstate.config.md) | [UrlConfig](./x-components.urlconfig.md) |  |
-|  [extraParams](./x-components.urlstate.extraparams.md) | Record&lt;[UrlParamKey](./x-components.urlparamkey.md)<!-- -->, [UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; |  |
-|  [filters](./x-components.urlstate.filters.md) | string\[\] |  |
-|  [page](./x-components.urlstate.page.md) | number |  |
-|  [query](./x-components.urlstate.query.md) | string |  |
-|  [relatedTags](./x-components.urlstate.relatedtags.md) | string\[\] |  |
-|  [sort](./x-components.urlstate.sort.md) | string |  |
+|  [extraParams](./x-components.urlstate.extraparams.md) | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;[UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; |  |
+|  [params](./x-components.urlstate.params.md) | Record&lt;keyof [Params](./x-components.params.md)<!-- -->, [UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; |  |
 

package/docs/API-reference/api/{x-components.nosuggestions.query.md → x-components.urlstate.params.md}

@@ -1,11 +1,11 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NoSuggestions](./x-components.nosuggestions.md) &gt; [query](./x-components.nosuggestions.query.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlState](./x-components.urlstate.md) &gt; [params](./x-components.urlstate.params.md)
 
-## NoSuggestions.query property
+## UrlState.params property
 
 <b>Signature:</b>
 
 ```typescript
-query: string;
+params: Record<keyof Params, UrlParamValue>;
 ```

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

@@ -16,11 +16,11 @@ export interface XComponentAliasStatusAPI
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [identifierResults](./x-components.xcomponentaliasstatusapi.identifierresults.md) | RequestStatus \| undefined | The [IdentifierResultsXModule](./x-components.identifierresultsxmodule.md) status. |
-|  [nextQueries](./x-components.xcomponentaliasstatusapi.nextqueries.md) | RequestStatus \| undefined | The [NextQueriesXModule](./x-components.nextqueriesxmodule.md) status. |
-|  [popularSearches](./x-components.xcomponentaliasstatusapi.popularsearches.md) | RequestStatus \| undefined | The [PopularSearchesXModule](./x-components.popularsearchesxmodule.md) status. |
-|  [querySuggestions](./x-components.xcomponentaliasstatusapi.querysuggestions.md) | RequestStatus \| undefined | The [QuerySuggestionsXModule](./x-components.querysuggestionsxmodule.md) status. |
-|  [recommendations](./x-components.xcomponentaliasstatusapi.recommendations.md) | RequestStatus \| undefined | The [RecommendationsXModule](./x-components.recommendationsxmodule.md) status. |
-|  [relatedTags](./x-components.xcomponentaliasstatusapi.relatedtags.md) | RequestStatus \| undefined | The [RelatedTagsXModule](./x-components.relatedtagsxmodule.md) status. |
-|  [search](./x-components.xcomponentaliasstatusapi.search.md) | RequestStatus \| undefined | The [SearchXModule](./x-components.searchxmodule.md) status. |
+|  [identifierResults](./x-components.xcomponentaliasstatusapi.identifierresults.md) | [RequestStatus](./x-components.requeststatus.md) \| undefined | The [IdentifierResultsXModule](./x-components.identifierresultsxmodule.md) status. |
+|  [nextQueries](./x-components.xcomponentaliasstatusapi.nextqueries.md) | [RequestStatus](./x-components.requeststatus.md) \| undefined | The [NextQueriesXModule](./x-components.nextqueriesxmodule.md) status. |
+|  [popularSearches](./x-components.xcomponentaliasstatusapi.popularsearches.md) | [RequestStatus](./x-components.requeststatus.md) \| undefined | The [PopularSearchesXModule](./x-components.popularsearchesxmodule.md) status. |
+|  [querySuggestions](./x-components.xcomponentaliasstatusapi.querysuggestions.md) | [RequestStatus](./x-components.requeststatus.md) \| undefined | The [QuerySuggestionsXModule](./x-components.querysuggestionsxmodule.md) status. |
+|  [recommendations](./x-components.xcomponentaliasstatusapi.recommendations.md) | [RequestStatus](./x-components.requeststatus.md) \| undefined | The [RecommendationsXModule](./x-components.recommendationsxmodule.md) status. |
+|  [relatedTags](./x-components.xcomponentaliasstatusapi.relatedtags.md) | [RequestStatus](./x-components.requeststatus.md) \| undefined | The [RelatedTagsXModule](./x-components.relatedtagsxmodule.md) status. |
+|  [search](./x-components.xcomponentaliasstatusapi.search.md) | [RequestStatus](./x-components.requeststatus.md) \| undefined | The [SearchXModule](./x-components.searchxmodule.md) status. |
 

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

@@ -23,7 +23,6 @@ export interface XModulesTree
 |  [historyQueries](./x-components.xmodulestree.historyqueries.md) | [HistoryQueriesXModule](./x-components.historyqueriesxmodule.md) |  |
 |  [identifierResults](./x-components.xmodulestree.identifierresults.md) | [IdentifierResultsXModule](./x-components.identifierresultsxmodule.md) |  |
 |  [nextQueries](./x-components.xmodulestree.nextqueries.md) | [NextQueriesXModule](./x-components.nextqueriesxmodule.md) |  |
-|  [noSuggestions](./x-components.xmodulestree.nosuggestions.md) | [NoSuggestionsXModule](./x-components.nosuggestionsxmodule.md) |  |
 |  [popularSearches](./x-components.xmodulestree.popularsearches.md) | [PopularSearchesXModule](./x-components.popularsearchesxmodule.md) |  |
 |  [querySuggestions](./x-components.xmodulestree.querysuggestions.md) | [QuerySuggestionsXModule](./x-components.querysuggestionsxmodule.md) |  |
 |  [recommendations](./x-components.xmodulestree.recommendations.md) | [RecommendationsXModule](./x-components.recommendationsxmodule.md) |  |

package/docs/API-reference/api/x-types.modelnametype.md

@@ -9,7 +9,7 @@ Type to ease the usage of the ModelNames interface with autocomplete suggestions
 <b>Signature:</b>
 
 ```typescript
-export declare type ModelNameType = 'Result' | 'NextQueries' | 'NextQuery' | 'RelatedTag' | 'PopularSearch' | 'QuerySuggestion' | 'HistoryQuery' | 'Banner' | 'Promoted' | FilterModelName | FacetModelName | string;
+export declare type ModelNameType = 'Result' | 'NextQueries' | 'NextQuery' | 'RelatedTag' | 'PopularSearch' | 'QuerySuggestion' | 'HistoryQuery' | 'Banner' | 'Promoted' | 'Redirection' | FilterModelName | FacetModelName | string;
 ```
 <b>References:</b> [FilterModelName](./x-types.filtermodelname.md)<!-- -->, [FacetModelName](./x-types.facetmodelname.md)
 

package/docs/API-reference/api/x-types.redirection.md

@@ -9,15 +9,14 @@ A redirection (AKA Direct Link) is simply a URL. Normally, the user is just redi
 <b>Signature:</b>
 
 ```typescript
-export interface Redirection extends Identifiable 
+export interface Redirection extends NamedModel<'Redirection'>, Identifiable 
 ```
-<b>Extends:</b> [Identifiable](./x-types.identifiable.md)
+<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'Redirection'&gt;, [Identifiable](./x-types.identifiable.md)
 
 ## Properties
 
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [tagging](./x-types.redirection.tagging.md) | { click: [Tagging](./x-types.tagging.md)<!-- -->; } | Redirect tagging. |
-|  [title](./x-types.redirection.title.md) | string | Redirect title. |
 |  [url](./x-types.redirection.url.md) | string | URL to redirect. |
 

package/docs/API-reference/components/url/x-components.url-handler.md

@@ -0,0 +1,84 @@
+---
+id: x-components.x-components.url-handler
+title: Url Handler
+sidebar_label: Url Handler
+---
+# url-handler
+
+---
+
+## Events
+
+This component emits the following events:
+
+- [`UrlConfigProvided`](./../../api/x-components.urlxevents.urlconfigprovided.md)
+- [`DocumentLoaded`](./../../api/x-components.urlxevents.documentloaded.md)
+- [`DocumentHistoryChanged`](./../../api/x-components.urlxevents.documenthistorychanged.md)
+
+## See it in action
+
+This component doesn't render elements to the DOM, but serves as a way to easily change the default
+url parameter names.
+
+_Try to make some requests and take a look to the url!_
+
+```vue
+<template>
+  <UrlHandler />
+</template>
+
+<script>
+import { UrlHandler } from "@empathyco/x-components/url-handler";
+
+export default {
+  name: "UrlHandlerDemo",
+  components: {
+    UrlHandler
+  }
+};
+</script>
+```
+
+### Play with props
+
+In this example, the `UrlHandler` component changes the following query parameter names:
+
+- `query` to be `ebq`.
+- `page` to be `p`.
+- `filters` to be `f`
+- `sort` to be `s`
+
+_Try to make some requests and take a look to the url!_
+
+```vue
+<template>
+  <UrlHandler :query="query" :page="page" :filters="filters" :sort="sort" />
+</template>
+
+<script>
+import { UrlHandler } from "@empathyco/x-components/url-handler";
+
+export default {
+  name: "UrlHandlerDemo",
+  components: {
+    UrlHandler
+  },
+  data() {
+    return {
+      query: "ebq",
+      page: "p",
+      filters: "f",
+      sort: "s"
+    };
+  }
+};
+</script>
+```
+
+### Play with events
+
+The `UrlHandler` will emit a `UrlConfigProvided` event, with the new url param names if they are
+provided.
+
+It also emits the `DocumentLoaded` when the page is loaded and the `DocumentHistoryChanged` when the
+url changes.

package/docs/sidebar.json

@@ -1 +1 @@
-{"API Reference":[{"Components":[{"Common":[{"Animations":["front/xcomponents/API-reference/components/common/animations/x-components.x-components.animate-width","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-from-top","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-height","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-width","front/xcomponents/API-reference/components/common/animations/x-components.x-components.fade-and-slide","front/xcomponents/API-reference/components/common/animations/x-components.x-components.staggered-fade-and-slide","front/xcomponents/API-reference/components/common/animations/x-components.x-components.translate-from-right"]},{"Column Picker":["front/xcomponents/API-reference/components/common/column-picker/x-components.x-components.base-column-picker-dropdown","front/xcomponents/API-reference/components/common/column-picker/x-components.x-components.base-column-picker-list"]},{"Currency":["front/xcomponents/API-reference/components/common/currency/x-components.x-components.base-currency"]},{"Filters":[{"Labels":["front/xcomponents/API-reference/components/common/filters/labels/x-components.x-components.base-price-filter-label","front/xcomponents/API-reference/components/common/filters/labels/x-components.x-components.base-rating-filter-label"]}]},{"Icons":["front/xcomponents/API-reference/components/common/icons/x-components.x-components.arrow","front/xcomponents/API-reference/components/common/icons/x-components.x-components.bag","front/xcomponents/API-reference/components/common/icons/x-components.x-components.bar-code","front/xcomponents/API-reference/components/common/icons/x-components.x-components.barcode-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cart","front/xcomponents/API-reference/components/common/icons/x-components.x-components.check-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.check","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-card-selected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-card-unselected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-selected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-unselected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-down","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-left","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-right","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-down","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-left","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-right","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-up","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-up","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cross-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cross","front/xcomponents/API-reference/components/common/icons/x-components.x-components.filters","front/xcomponents/API-reference/components/common/icons/x-components.x-components.grid-1-col","front/xcomponents/API-reference/components/common/icons/x-components.x-components.grid-2-col","front/xcomponents/API-reference/components/common/icons/x-components.x-components.hide","front/xcomponents/API-reference/components/common/icons/x-components.x-components.history-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.history","front/xcomponents/API-reference/components/common/icons/x-components.x-components.menu","front/xcomponents/API-reference/components/common/icons/x-components.x-components.minus-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.minus","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-1","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-2","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-3","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-4","front/xcomponents/API-reference/components/common/icons/x-components.x-components.plus","front/xcomponents/API-reference/components/common/icons/x-components.x-components.search-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.search","front/xcomponents/API-reference/components/common/icons/x-components.x-components.show","front/xcomponents/API-reference/components/common/icons/x-components.x-components.star","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trash-open","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trash","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trending-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trending","front/xcomponents/API-reference/components/common/icons/x-components.x-components.user"]},{"Layouts":["front/xcomponents/API-reference/components/common/layouts/x-components.x-components.multi-column-max-width-layout","front/xcomponents/API-reference/components/common/layouts/x-components.x-components.single-column-layout"]},{"Modals":["front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal-close","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal-open","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal-close","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal-open","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-modal"]},{"Panels":["front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-header-toggle-panel","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-id-toggle-panel-button","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-id-toggle-panel","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-toggle-panel"]},{"Result":["front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-add-to-cart","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-current-price","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-fallback-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-link","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-placeholder-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-previous-price"]},{"Scroll":["front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-id-scroll","front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-main-scroll","front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-scroll-to-top","front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-scroll"]},{"Suggestions":["front/xcomponents/API-reference/components/common/suggestions/x-components.x-components.base-suggestion","front/xcomponents/API-reference/components/common/suggestions/x-components.x-components.base-suggestions"]}]},{"Device":["front/xcomponents/API-reference/components/device/x-components.x-components.device-detector"]},{"Empathize":["front/xcomponents/API-reference/components/empathize/x-components.x-components.empathize"]},{"Extra Params":["front/xcomponents/API-reference/components/extra-params/x-components.x-components.extra-params","front/xcomponents/API-reference/components/extra-params/x-components.x-components.renderless-extra-param","front/xcomponents/API-reference/components/extra-params/x-components.x-components.snippet-config-extra-params"]},{"Facets":["front/xcomponents/API-reference/components/facets/x-components.x-components.clear-filters",{"Facets":["front/xcomponents/API-reference/components/facets/x-components.facets/x-components.facets-provider","front/xcomponents/API-reference/components/facets/x-components.facets/x-components.facets"]},{"Filters":["front/xcomponents/API-reference/components/facets/x-components.filters/x-components.all-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.base-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.editable-number-range-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.hierarchical-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.number-range-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.renderless-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.simple-filter"]},{"Lists":["front/xcomponents/API-reference/components/facets/x-components.lists/x-components.exclude-filters-with-no-results","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.filters-list","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.filters-search","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.selected-filters-list","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.selected-filters","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.sliced-filters","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.sorted-filters"]}]},{"History Queries":["front/xcomponents/API-reference/components/history-queries/x-components.x-components.clear-history-queries","front/xcomponents/API-reference/components/history-queries/x-components.x-components.history-queries","front/xcomponents/API-reference/components/history-queries/x-components.x-components.history-query","front/xcomponents/API-reference/components/history-queries/x-components.x-components.remove-history-query"]},{"Identifier Results":["front/xcomponents/API-reference/components/identifier-results/x-components.x-components.identifier-result","front/xcomponents/API-reference/components/identifier-results/x-components.x-components.identifier-results"]},{"Next Queries":["front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-queries-list","front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-queries","front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-query"]},{"No Suggestions":["front/xcomponents/API-reference/components/no-suggestions/x-components.x-components.no-suggestions"]},{"Popular Searches":["front/xcomponents/API-reference/components/popular-searches/x-components.x-components.popular-search","front/xcomponents/API-reference/components/popular-searches/x-components.x-components.popular-searches"]},{"Query Suggestions":["front/xcomponents/API-reference/components/query-suggestions/x-components.x-components.query-suggestion","front/xcomponents/API-reference/components/query-suggestions/x-components.x-components.query-suggestions"]},{"Recommendations":["front/xcomponents/API-reference/components/recommendations/x-components.x-components.recommendations"]},{"Related Tags":["front/xcomponents/API-reference/components/related-tags/x-components.x-components.related-tag","front/xcomponents/API-reference/components/related-tags/x-components.x-components.related-tags"]},{"Search Box":["front/xcomponents/API-reference/components/search-box/x-components.x-components.clear-search-input","front/xcomponents/API-reference/components/search-box/x-components.x-components.search-button","front/xcomponents/API-reference/components/search-box/x-components.x-components.search-input"]},{"Search":["front/xcomponents/API-reference/components/search/x-components.x-components.banner","front/xcomponents/API-reference/components/search/x-components.x-components.banners-list","front/xcomponents/API-reference/components/search/x-components.x-components.partial-query-button","front/xcomponents/API-reference/components/search/x-components.x-components.partial-results-list","front/xcomponents/API-reference/components/search/x-components.x-components.promoted","front/xcomponents/API-reference/components/search/x-components.x-components.promoteds-list","front/xcomponents/API-reference/components/search/x-components.x-components.results-list","front/xcomponents/API-reference/components/search/x-components.x-components.sort-dropdown","front/xcomponents/API-reference/components/search/x-components.x-components.sort-list","front/xcomponents/API-reference/components/search/x-components.x-components.spellcheck-button","front/xcomponents/API-reference/components/search/x-components.x-components.spellcheck"]}]}],"Guide":[{"Getting Started":[{"Components":["front/xcomponents/guide/getting-started/components/x-components.clear-search-input","front/xcomponents/guide/getting-started/components/x-components.live-examples","front/xcomponents/guide/getting-started/components/x-components.query-suggestions","front/xcomponents/guide/getting-started/components/x-components.search-button","front/xcomponents/guide/getting-started/components/x-components.search-input"]},"front/xcomponents/guide/getting-started/x-components.install-xplugin","front/xcomponents/guide/getting-started/x-components.use-components"]},"front/xcomponents/guide/x-components.install"]}
+{"API Reference":[{"Components":[{"Common":[{"Animations":["front/xcomponents/API-reference/components/common/animations/x-components.x-components.animate-width","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-from-top","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-height","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-width","front/xcomponents/API-reference/components/common/animations/x-components.x-components.fade-and-slide","front/xcomponents/API-reference/components/common/animations/x-components.x-components.staggered-fade-and-slide","front/xcomponents/API-reference/components/common/animations/x-components.x-components.translate-from-right"]},{"Column Picker":["front/xcomponents/API-reference/components/common/column-picker/x-components.x-components.base-column-picker-dropdown","front/xcomponents/API-reference/components/common/column-picker/x-components.x-components.base-column-picker-list"]},{"Currency":["front/xcomponents/API-reference/components/common/currency/x-components.x-components.base-currency"]},{"Filters":[{"Labels":["front/xcomponents/API-reference/components/common/filters/labels/x-components.x-components.base-price-filter-label","front/xcomponents/API-reference/components/common/filters/labels/x-components.x-components.base-rating-filter-label"]}]},{"Icons":["front/xcomponents/API-reference/components/common/icons/x-components.x-components.arrow","front/xcomponents/API-reference/components/common/icons/x-components.x-components.bag","front/xcomponents/API-reference/components/common/icons/x-components.x-components.bar-code","front/xcomponents/API-reference/components/common/icons/x-components.x-components.barcode-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cart","front/xcomponents/API-reference/components/common/icons/x-components.x-components.check-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.check","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-card-selected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-card-unselected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-selected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-unselected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-down","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-left","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-right","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-down","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-left","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-right","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-up","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-up","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cross-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cross","front/xcomponents/API-reference/components/common/icons/x-components.x-components.filters","front/xcomponents/API-reference/components/common/icons/x-components.x-components.grid-1-col","front/xcomponents/API-reference/components/common/icons/x-components.x-components.grid-2-col","front/xcomponents/API-reference/components/common/icons/x-components.x-components.hide","front/xcomponents/API-reference/components/common/icons/x-components.x-components.history-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.history","front/xcomponents/API-reference/components/common/icons/x-components.x-components.menu","front/xcomponents/API-reference/components/common/icons/x-components.x-components.minus-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.minus","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-1","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-2","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-3","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-4","front/xcomponents/API-reference/components/common/icons/x-components.x-components.plus","front/xcomponents/API-reference/components/common/icons/x-components.x-components.search-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.search","front/xcomponents/API-reference/components/common/icons/x-components.x-components.show","front/xcomponents/API-reference/components/common/icons/x-components.x-components.star","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trash-open","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trash","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trending-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trending","front/xcomponents/API-reference/components/common/icons/x-components.x-components.user"]},{"Layouts":["front/xcomponents/API-reference/components/common/layouts/x-components.x-components.multi-column-max-width-layout","front/xcomponents/API-reference/components/common/layouts/x-components.x-components.single-column-layout"]},{"Modals":["front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal-close","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal-open","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal-close","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal-open","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-modal"]},{"Panels":["front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-header-toggle-panel","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-id-toggle-panel-button","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-id-toggle-panel","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-toggle-panel"]},{"Result":["front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-add-to-cart","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-current-price","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-fallback-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-link","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-placeholder-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-previous-price"]},{"Scroll":["front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-id-scroll","front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-main-scroll","front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-scroll-to-top","front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-scroll"]},{"Suggestions":["front/xcomponents/API-reference/components/common/suggestions/x-components.x-components.base-suggestion","front/xcomponents/API-reference/components/common/suggestions/x-components.x-components.base-suggestions"]}]},{"Device":["front/xcomponents/API-reference/components/device/x-components.x-components.device-detector"]},{"Empathize":["front/xcomponents/API-reference/components/empathize/x-components.x-components.empathize"]},{"Extra Params":["front/xcomponents/API-reference/components/extra-params/x-components.x-components.extra-params","front/xcomponents/API-reference/components/extra-params/x-components.x-components.renderless-extra-param","front/xcomponents/API-reference/components/extra-params/x-components.x-components.snippet-config-extra-params"]},{"Facets":["front/xcomponents/API-reference/components/facets/x-components.x-components.clear-filters",{"Facets":["front/xcomponents/API-reference/components/facets/x-components.facets/x-components.facets-provider","front/xcomponents/API-reference/components/facets/x-components.facets/x-components.facets"]},{"Filters":["front/xcomponents/API-reference/components/facets/x-components.filters/x-components.all-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.base-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.editable-number-range-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.hierarchical-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.number-range-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.renderless-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.simple-filter"]},{"Lists":["front/xcomponents/API-reference/components/facets/x-components.lists/x-components.exclude-filters-with-no-results","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.filters-list","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.filters-search","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.selected-filters-list","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.selected-filters","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.sliced-filters","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.sorted-filters"]}]},{"History Queries":["front/xcomponents/API-reference/components/history-queries/x-components.x-components.clear-history-queries","front/xcomponents/API-reference/components/history-queries/x-components.x-components.history-queries","front/xcomponents/API-reference/components/history-queries/x-components.x-components.history-query","front/xcomponents/API-reference/components/history-queries/x-components.x-components.remove-history-query"]},{"Identifier Results":["front/xcomponents/API-reference/components/identifier-results/x-components.x-components.identifier-result","front/xcomponents/API-reference/components/identifier-results/x-components.x-components.identifier-results"]},{"Next Queries":["front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-queries-list","front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-queries","front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-query"]},{"Popular Searches":["front/xcomponents/API-reference/components/popular-searches/x-components.x-components.popular-search","front/xcomponents/API-reference/components/popular-searches/x-components.x-components.popular-searches"]},{"Query Suggestions":["front/xcomponents/API-reference/components/query-suggestions/x-components.x-components.query-suggestion","front/xcomponents/API-reference/components/query-suggestions/x-components.x-components.query-suggestions"]},{"Recommendations":["front/xcomponents/API-reference/components/recommendations/x-components.x-components.recommendations"]},{"Related Tags":["front/xcomponents/API-reference/components/related-tags/x-components.x-components.related-tag","front/xcomponents/API-reference/components/related-tags/x-components.x-components.related-tags"]},{"Search Box":["front/xcomponents/API-reference/components/search-box/x-components.x-components.clear-search-input","front/xcomponents/API-reference/components/search-box/x-components.x-components.search-button","front/xcomponents/API-reference/components/search-box/x-components.x-components.search-input"]},{"Search":["front/xcomponents/API-reference/components/search/x-components.x-components.banner","front/xcomponents/API-reference/components/search/x-components.x-components.banners-list","front/xcomponents/API-reference/components/search/x-components.x-components.partial-query-button","front/xcomponents/API-reference/components/search/x-components.x-components.partial-results-list","front/xcomponents/API-reference/components/search/x-components.x-components.promoted","front/xcomponents/API-reference/components/search/x-components.x-components.promoteds-list","front/xcomponents/API-reference/components/search/x-components.x-components.results-list","front/xcomponents/API-reference/components/search/x-components.x-components.sort-dropdown","front/xcomponents/API-reference/components/search/x-components.x-components.sort-list","front/xcomponents/API-reference/components/search/x-components.x-components.spellcheck-button","front/xcomponents/API-reference/components/search/x-components.x-components.spellcheck"]},{"Url":["front/xcomponents/API-reference/components/url/x-components.x-components.url-handler"]}]}],"Guide":[{"Getting Started":[{"Components":["front/xcomponents/guide/getting-started/components/x-components.clear-search-input","front/xcomponents/guide/getting-started/components/x-components.live-examples","front/xcomponents/guide/getting-started/components/x-components.query-suggestions","front/xcomponents/guide/getting-started/components/x-components.search-button","front/xcomponents/guide/getting-started/components/x-components.search-input"]},"front/xcomponents/guide/getting-started/x-components.install-xplugin","front/xcomponents/guide/getting-started/x-components.use-components"]},"front/xcomponents/guide/x-components.install"]}

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

@@ -193,11 +193,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-6fde3ef0_0", { source: ".x-dropdown[data-v-6fde3ef0] {\n  position: relative;\n}\n.x-dropdown__items-list[data-v-6fde3ef0] {\n  z-index: 1;\n  list-style: none;\n  position: absolute;\n  padding: 0;\n  margin: 0;\n  left: 0;\n  top: 100%;\n}", map: undefined, media: undefined });
+    inject("data-v-1046e888_0", { source: ".x-dropdown[data-v-1046e888] {\n  position: relative;\n}\n.x-dropdown__items-list[data-v-1046e888] {\n  z-index: 1;\n  list-style: none;\n  position: absolute;\n  padding: 0;\n  margin: 0;\n  top: calc(100% + var(--x-size-gap-dropdown-default, 0));\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-6fde3ef0";
+  var __vue_scope_id__ = "data-v-1046e888";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"base-dropdown.vue.js","sources":["../../../src/components/base-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    @keydown=\"updateSearchBuffer\"\n    @keydown.down.prevent=\"highlightNextItem\"\n    @keydown.up.prevent=\"highlightPreviousItem\"\n    :class=\"dropdownCSSClasses\"\n    class=\"x-dropdown\"\n  >\n    <button\n      @click=\"toggle\"\n      @keydown.up.down.prevent.stop=\"open\"\n      aria-haspopup=\"listbox\"\n      class=\"x-dropdown__toggle\"\n      data-test=\"dropdown-toggle\"\n    >\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       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 closed.\n     -->\n      <slot v-if=\"$scopedSlots.toggle\" :isOpen=\"isOpen\" :item=\"value\" name=\"toggle\" />\n      <slot v-else :item=\"value\" name=\"item\" />\n    </button>\n\n    <component :is=\"animation\">\n      <ul\n        v-if=\"isOpen\"\n        @keydown.end=\"highlightLastItem\"\n        @keydown.esc=\"close\"\n        @keydown.home=\"highlightFirstItem\"\n        :aria-expanded=\"isOpen.toString()\"\n        class=\"x-dropdown__items-list\"\n        role=\"listbox\"\n      >\n        <li v-for=\"(item, index) in items\" :key=\"item.id || item\" class=\"x-dropdown__list-item\">\n          <button\n            ref=\"itemButtons\"\n            @click=\"emitSelectedItemChanged(item)\"\n            :aria-selected=\"(index === highlightedItemIndex).toString()\"\n            :aria-current=\"(item === value).toString()\"\n            :class=\"itemsCSSClasses[index]\"\n            class=\"x-dropdown__item\"\n            data-test=\"dropdown-item\"\n            role=\"option\"\n            tabindex=\"-1\"\n          >\n            <!--\n               @slot (required) Used to render each one of the items content, and as fallback\n               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\n              :isHighlighted=\"index === highlightedItemIndex\"\n              :isSelected=\"item === value\"\n              :item=\"item\"\n              name=\"item\"\n            />\n          </button>\n        </li>\n      </ul>\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Identifiable } from '@empathyco/x-types';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { normalizeString } from '../utils/normalize';\n  import { isInRange } from '../utils/number';\n  import { debounce } from '../utils/debounce';\n  import { VueCSSClasses } from '../utils/types';\n  import { NoElement } from './no-element';\n\n  type DropdownItem = string | number | Identifiable;\n\n  /**\n   * Dropdown component that mimics a Select element behavior, but with the option\n   * to customize the toggle button and each item contents.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      NoElement\n    },\n    model: {\n      event: 'change'\n    }\n  })\n  export default class BaseDropdown extends Vue {\n    /**\n     * List of items to display.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public items!: DropdownItem[];\n\n    /**\n     * The selected item.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public value!: DropdownItem | null;\n\n    /**\n     * Animation component to use for expanding the dropdown. This is a single element animation,\n     * so only `<transition>` components are allowed.\n     *\n     * @public\n     */\n    @Prop({ default: 'NoElement' })\n    public animation!: typeof Vue | string;\n\n    /**\n     * Time to wait without receiving any keystroke before resetting the items search query.\n     *\n     * @public\n     */\n    @Prop({ default: 1000 })\n    public searchTimeoutMs!: number;\n\n    public $refs!: {\n      /** Array containing the dropdown list buttons HTMLElements. */\n      itemButtons: HTMLButtonElement[];\n    };\n\n    /**\n     * Property to track whether the dropdown is expanded and displaying the full\n     * list of items, or closed.\n     *\n     * @internal\n     */\n    protected isOpen = false;\n\n    /**\n     * Index of the element that has the focus in the list. -1 means no element has focus.\n     *\n     * @internal\n     */\n    protected highlightedItemIndex = -1;\n\n    /**\n     * String to search for the first element that starts with it.\n     *\n     * @internal\n     */\n    protected searchBuffer = '';\n\n    /**\n     * Resets the search buffer after a certain time has passed.\n     *\n     * @internal\n     */\n    protected restartResetSearchTimeout!: () => void;\n\n    /**\n     * Dynamic CSS classes to add to the dropdown root element.\n     *\n     * @returns An object containing the CSS classes to add to the dropdown root element.\n     * @internal\n     */\n    protected get dropdownCSSClasses(): VueCSSClasses {\n      return {\n        'x-dropdown--is-open': this.isOpen\n      };\n    }\n\n    /**\n     * Dynamic CSS classes to add to each one of the items.\n     *\n     * @returns An object containing the CSS classes to add to each item.\n     * @internal\n     */\n    protected get itemsCSSClasses(): VueCSSClasses[] {\n      return this.items.map((item, index) => {\n        return {\n          'x-dropdown__item--is-selected': this.value === item,\n          'x-dropdown__item--is-highlighted': this.highlightedItemIndex === index\n        };\n      });\n    }\n\n    /**\n     * If the dropdown is destroyed before removing the document listeners, it ensures that they\n     * are removed too.\n     *\n     * @internal\n     */\n    protected beforeDestroy(): void {\n      this.removeDocumentCloseListeners();\n    }\n\n    /**\n     * Opens the dropdown.\n     *\n     * @internal\n     */\n    protected open(): void {\n      this.isOpen = true;\n    }\n\n    /**\n     * Closes the dropdown.\n     *\n     * @internal\n     */\n    protected close(): void {\n      this.isOpen = false;\n    }\n\n    /**\n     * If the dropdown is opened it closes it. If it is closed it opens it.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.isOpen = !this.isOpen;\n    }\n\n    /**\n     * Emits the event that the selected item has changed.\n     *\n     * @param item - The new selected item.\n     * @internal\n     */\n    protected emitSelectedItemChanged(item: DropdownItem): void {\n      this.$emit('change', item);\n      this.close();\n    }\n\n    /**\n     * Highlights the item after the one that is currently highlighted.\n     *\n     * @internal\n     */\n    protected highlightNextItem(): void {\n      this.open();\n      this.highlightedItemIndex = (this.highlightedItemIndex + 1) % this.items.length;\n    }\n\n    /**\n     * Highlights the item before the one that is currently highlighted.\n     *\n     * @internal\n     */\n    protected highlightPreviousItem(): void {\n      this.open();\n      this.highlightedItemIndex =\n        this.highlightedItemIndex > 0 ? this.highlightedItemIndex - 1 : this.items.length - 1;\n    }\n\n    /**\n     * Highlights the first of the provided items.\n     *\n     * @internal\n     */\n    protected highlightFirstItem(): void {\n      this.highlightedItemIndex = 0;\n    }\n\n    /**\n     * Highlights the last of the provided items.\n     *\n     * @internal\n     */\n    protected highlightLastItem(): void {\n      this.highlightedItemIndex = this.items.length - 1;\n    }\n\n    /**\n     * Updates the variable that is used to search in the filters.\n     *\n     * @param event - The event coming from the user typing.\n     * @internal\n     */\n    protected updateSearchBuffer(event: KeyboardEvent): void {\n      if (/^\\w$/.test(event.key)) {\n        const key = event.key;\n        this.searchBuffer += key;\n        this.restartResetSearchTimeout();\n      }\n    }\n\n    /**\n     * Highlights the item that matches the search buffer. To do so it checks the list buttons\n     * text content. It highlights items folowing this priority:\n     * - If an element is already highlighted, it starts searching from that element.\n     * - If no element is found starting from the previously highlighted, it returns the first one.\n     * - If no element is found matching the search query it highlights the first element.\n     *\n     * @param search - The search string to find in the HTML.\n     * @internal\n     */\n    @Watch('searchBuffer')\n    protected highlightMatchingItem(search: string): void {\n      if (search) {\n        const normalizedSearch = normalizeString(search);\n        const matchingIndices = this.$refs.itemButtons.reduce<number[]>(\n          (matchingIndices, button, index) => {\n            const safeButtonWordCharacters = button.textContent!.replace(/[^\\w]/g, '');\n            const normalizedButtonText = normalizeString(safeButtonWordCharacters);\n            if (normalizedButtonText.startsWith(normalizedSearch)) {\n              matchingIndices.push(index);\n            }\n            return matchingIndices;\n          },\n          []\n        );\n        this.highlightedItemIndex =\n          // First matching item starting to search from the current highlighted element\n          matchingIndices.find(index => index >= this.highlightedItemIndex) ??\n          // First matching item\n          matchingIndices[0] ??\n          // First item\n          0;\n      }\n    }\n\n    /**\n     * Resets the search buffer.\n     *\n     * @internal\n     */\n    protected resetSearch(): void {\n      this.searchBuffer = '';\n    }\n\n    /** Updates the debounced function to reset the search.\n     *\n     * @param searchTimeoutMs - The new milliseconds that have to pass without typing before\n     * resetting the search.\n     * @internal\n     */\n    @Watch('searchTimeoutMs', { immediate: true })\n    protected updateSearchTimeout(searchTimeoutMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.restartResetSearchTimeout = debounce(this.resetSearch, searchTimeoutMs);\n    }\n\n    /**\n     * Focuses the DOM element which matches the `highlightedItemIndex`.\n     *\n     * @param highlightedItemIndex - The index of the HTML element to focus.\n     * @internal\n     */\n    @Watch('highlightedItemIndex', { immediate: true })\n    protected focusHighlightedItem(highlightedItemIndex: number): void {\n      this.$nextTick(() => {\n        if (this.$refs.itemButtons && isInRange(highlightedItemIndex, [0, this.items.length - 1])) {\n          const newItem = this.$refs.itemButtons[this.highlightedItemIndex];\n          newItem.focus();\n        }\n      });\n    }\n\n    /**\n     * When the dropdown is open it sets the focused element to the one that is selected.\n     *\n     * @param isOpen - True if the dropdown is open, false otherwise.\n     * @internal\n     */\n    @Watch('isOpen')\n    protected updateHighlightedItem(isOpen: boolean): void {\n      if (isOpen) {\n        this.highlightedItemIndex = this.value === null ? 0 : this.items.indexOf(this.value);\n      } else {\n        this.highlightedItemIndex = -1;\n      }\n    }\n\n    /**\n     * Adds and removes listeners to close the dropdown when it loses the focus.\n     *\n     * @param isOpen - True if the dropdown is open, false otherwise.\n     * @internal\n     */\n    @Watch('isOpen')\n    protected syncCloseListeners(isOpen: boolean): void {\n      /*\n       * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target\n       * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be\n       * used to detect whether or not the user has blurred the dropdown. The hack here is to use\n       * document listeners that have the side effect of losing the focus.\n       */\n      if (isOpen) {\n        this.addDocumentCloseListeners();\n      } else {\n        this.removeDocumentCloseListeners();\n      }\n    }\n\n    /**\n     * Adds listeners to the document element to detect if the focus has moved out from the\n     * dropdown.\n     *\n     * @internal\n     */\n    protected addDocumentCloseListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.addEventListener('mousedown', this.closeIfEventIsOutOfDropdown);\n      document.addEventListener('touchstart', this.closeIfEventIsOutOfDropdown);\n      document.addEventListener('focusin', this.closeIfEventIsOutOfDropdown);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Removes the listeners of the document element to detect if the focus has moved out from the\n     * dropdown.\n     *\n     * @internal\n     */\n    protected removeDocumentCloseListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.removeEventListener('mousedown', this.closeIfEventIsOutOfDropdown);\n      document.removeEventListener('touchstart', this.closeIfEventIsOutOfDropdown);\n      document.removeEventListener('focusin', this.closeIfEventIsOutOfDropdown);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Closes the dropdown if the passed event has happened on an element out of the dropdown.\n     *\n     * @param event - The event to check if it has happen out of the dropdown component.\n     */\n    protected closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent): void {\n      if (!this.$el.contains(event.target as HTMLElement)) {\n        this.close();\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-dropdown {\n    position: relative;\n\n    &__items-list {\n      z-index: 1;\n      list-style: none;\n      position: absolute;\n      padding: 0;\n      margin: 0;\n      left: 0;\n      top: 100%;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Example\n\nThe `Dropdown` component is a simple yet customizable select component. The component needs to work\nthe list of items available to select, which are passed using the `items` prop, and the selected\nitem, which is passed in using the `value` prop.\n\nThe supported items must be an array that can contain unique strings, unique numbers, or objects\nwith a unique `id` property.\n\nThe content of each item can be customized using the `item` slot, which apart from the data of the\nitem, it also receives via prop if the element is selected or highlighted.\n\nThere `toggle` slot can be used to customize the button that opens the dropdown. If this is not\nprovided, the `item` slot will be used for that.\n\n```vue\n<template>\n  <BaseDropdown :items=\"items\" v-model=\"value\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n\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  </BaseDropdown>\n</template>\n\n<script>\n  import { BaseDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'DropdownTest',\n    components: {\n      BaseDropdown\n    },\n    data() {\n      return {\n        items: ['a', 2, { id: '3' }],\n        value: ['a']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-dropdown.vue.js","sources":["../../../src/components/base-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    @keydown=\"updateSearchBuffer\"\n    @keydown.down.prevent=\"highlightNextItem\"\n    @keydown.up.prevent=\"highlightPreviousItem\"\n    :class=\"dropdownCSSClasses\"\n    class=\"x-dropdown\"\n  >\n    <button\n      @click=\"toggle\"\n      @keydown.up.down.prevent.stop=\"open\"\n      aria-haspopup=\"listbox\"\n      class=\"x-dropdown__toggle\"\n      data-test=\"dropdown-toggle\"\n    >\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       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 closed.\n     -->\n      <slot v-if=\"$scopedSlots.toggle\" :isOpen=\"isOpen\" :item=\"value\" name=\"toggle\" />\n      <slot v-else :item=\"value\" name=\"item\" />\n    </button>\n\n    <component :is=\"animation\">\n      <ul\n        v-if=\"isOpen\"\n        @keydown.end=\"highlightLastItem\"\n        @keydown.esc=\"close\"\n        @keydown.home=\"highlightFirstItem\"\n        :aria-expanded=\"isOpen.toString()\"\n        class=\"x-dropdown__items-list\"\n        role=\"listbox\"\n      >\n        <li v-for=\"(item, index) in items\" :key=\"item.id || item\" class=\"x-dropdown__list-item\">\n          <button\n            ref=\"itemButtons\"\n            @click=\"emitSelectedItemChanged(item)\"\n            :aria-selected=\"(index === highlightedItemIndex).toString()\"\n            :aria-current=\"(item === value).toString()\"\n            :class=\"itemsCSSClasses[index]\"\n            class=\"x-dropdown__item\"\n            data-test=\"dropdown-item\"\n            role=\"option\"\n            tabindex=\"-1\"\n          >\n            <!--\n               @slot (required) Used to render each one of the items content, and as fallback\n               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\n              :isHighlighted=\"index === highlightedItemIndex\"\n              :isSelected=\"item === value\"\n              :item=\"item\"\n              name=\"item\"\n            />\n          </button>\n        </li>\n      </ul>\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Identifiable } from '@empathyco/x-types';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { normalizeString } from '../utils/normalize';\n  import { isInRange } from '../utils/number';\n  import { debounce } from '../utils/debounce';\n  import { VueCSSClasses } from '../utils/types';\n  import { NoElement } from './no-element';\n\n  type DropdownItem = string | number | Identifiable;\n\n  /**\n   * Dropdown component that mimics a Select element behavior, but with the option\n   * to customize the toggle button and each item contents.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      NoElement\n    },\n    model: {\n      event: 'change'\n    }\n  })\n  export default class BaseDropdown extends Vue {\n    /**\n     * List of items to display.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public items!: DropdownItem[];\n\n    /**\n     * The selected item.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public value!: DropdownItem | null;\n\n    /**\n     * Animation component to use for expanding the dropdown. This is a single element animation,\n     * so only `<transition>` components are allowed.\n     *\n     * @public\n     */\n    @Prop({ default: 'NoElement' })\n    public animation!: typeof Vue | string;\n\n    /**\n     * Time to wait without receiving any keystroke before resetting the items search query.\n     *\n     * @public\n     */\n    @Prop({ default: 1000 })\n    public searchTimeoutMs!: number;\n\n    public $refs!: {\n      /** Array containing the dropdown list buttons HTMLElements. */\n      itemButtons: HTMLButtonElement[];\n    };\n\n    /**\n     * Property to track whether the dropdown is expanded and displaying the full\n     * list of items, or closed.\n     *\n     * @internal\n     */\n    protected isOpen = false;\n\n    /**\n     * Index of the element that has the focus in the list. -1 means no element has focus.\n     *\n     * @internal\n     */\n    protected highlightedItemIndex = -1;\n\n    /**\n     * String to search for the first element that starts with it.\n     *\n     * @internal\n     */\n    protected searchBuffer = '';\n\n    /**\n     * Resets the search buffer after a certain time has passed.\n     *\n     * @internal\n     */\n    protected restartResetSearchTimeout!: () => void;\n\n    /**\n     * Dynamic CSS classes to add to the dropdown root element.\n     *\n     * @returns An object containing the CSS classes to add to the dropdown root element.\n     * @internal\n     */\n    protected get dropdownCSSClasses(): VueCSSClasses {\n      return {\n        'x-dropdown--is-open': this.isOpen\n      };\n    }\n\n    /**\n     * Dynamic CSS classes to add to each one of the items.\n     *\n     * @returns An object containing the CSS classes to add to each item.\n     * @internal\n     */\n    protected get itemsCSSClasses(): VueCSSClasses[] {\n      return this.items.map((item, index) => {\n        return {\n          'x-dropdown__item--is-selected': this.value === item,\n          'x-dropdown__item--is-highlighted': this.highlightedItemIndex === index\n        };\n      });\n    }\n\n    /**\n     * If the dropdown is destroyed before removing the document listeners, it ensures that they\n     * are removed too.\n     *\n     * @internal\n     */\n    protected beforeDestroy(): void {\n      this.removeDocumentCloseListeners();\n    }\n\n    /**\n     * Opens the dropdown.\n     *\n     * @internal\n     */\n    protected open(): void {\n      this.isOpen = true;\n    }\n\n    /**\n     * Closes the dropdown.\n     *\n     * @internal\n     */\n    protected close(): void {\n      this.isOpen = false;\n    }\n\n    /**\n     * If the dropdown is opened it closes it. If it is closed it opens it.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.isOpen = !this.isOpen;\n    }\n\n    /**\n     * Emits the event that the selected item has changed.\n     *\n     * @param item - The new selected item.\n     * @internal\n     */\n    protected emitSelectedItemChanged(item: DropdownItem): void {\n      this.$emit('change', item);\n      this.close();\n    }\n\n    /**\n     * Highlights the item after the one that is currently highlighted.\n     *\n     * @internal\n     */\n    protected highlightNextItem(): void {\n      this.open();\n      this.highlightedItemIndex = (this.highlightedItemIndex + 1) % this.items.length;\n    }\n\n    /**\n     * Highlights the item before the one that is currently highlighted.\n     *\n     * @internal\n     */\n    protected highlightPreviousItem(): void {\n      this.open();\n      this.highlightedItemIndex =\n        this.highlightedItemIndex > 0 ? this.highlightedItemIndex - 1 : this.items.length - 1;\n    }\n\n    /**\n     * Highlights the first of the provided items.\n     *\n     * @internal\n     */\n    protected highlightFirstItem(): void {\n      this.highlightedItemIndex = 0;\n    }\n\n    /**\n     * Highlights the last of the provided items.\n     *\n     * @internal\n     */\n    protected highlightLastItem(): void {\n      this.highlightedItemIndex = this.items.length - 1;\n    }\n\n    /**\n     * Updates the variable that is used to search in the filters.\n     *\n     * @param event - The event coming from the user typing.\n     * @internal\n     */\n    protected updateSearchBuffer(event: KeyboardEvent): void {\n      if (/^\\w$/.test(event.key)) {\n        const key = event.key;\n        this.searchBuffer += key;\n        this.restartResetSearchTimeout();\n      }\n    }\n\n    /**\n     * Highlights the item that matches the search buffer. To do so it checks the list buttons\n     * text content. It highlights items folowing this priority:\n     * - If an element is already highlighted, it starts searching from that element.\n     * - If no element is found starting from the previously highlighted, it returns the first one.\n     * - If no element is found matching the search query it highlights the first element.\n     *\n     * @param search - The search string to find in the HTML.\n     * @internal\n     */\n    @Watch('searchBuffer')\n    protected highlightMatchingItem(search: string): void {\n      if (search) {\n        const normalizedSearch = normalizeString(search);\n        const matchingIndices = this.$refs.itemButtons.reduce<number[]>(\n          (matchingIndices, button, index) => {\n            const safeButtonWordCharacters = button.textContent!.replace(/[^\\w]/g, '');\n            const normalizedButtonText = normalizeString(safeButtonWordCharacters);\n            if (normalizedButtonText.startsWith(normalizedSearch)) {\n              matchingIndices.push(index);\n            }\n            return matchingIndices;\n          },\n          []\n        );\n        this.highlightedItemIndex =\n          // First matching item starting to search from the current highlighted element\n          matchingIndices.find(index => index >= this.highlightedItemIndex) ??\n          // First matching item\n          matchingIndices[0] ??\n          // First item\n          0;\n      }\n    }\n\n    /**\n     * Resets the search buffer.\n     *\n     * @internal\n     */\n    protected resetSearch(): void {\n      this.searchBuffer = '';\n    }\n\n    /** Updates the debounced function to reset the search.\n     *\n     * @param searchTimeoutMs - The new milliseconds that have to pass without typing before\n     * resetting the search.\n     * @internal\n     */\n    @Watch('searchTimeoutMs', { immediate: true })\n    protected updateSearchTimeout(searchTimeoutMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.restartResetSearchTimeout = debounce(this.resetSearch, searchTimeoutMs);\n    }\n\n    /**\n     * Focuses the DOM element which matches the `highlightedItemIndex`.\n     *\n     * @param highlightedItemIndex - The index of the HTML element to focus.\n     * @internal\n     */\n    @Watch('highlightedItemIndex', { immediate: true })\n    protected focusHighlightedItem(highlightedItemIndex: number): void {\n      this.$nextTick(() => {\n        if (this.$refs.itemButtons && isInRange(highlightedItemIndex, [0, this.items.length - 1])) {\n          const newItem = this.$refs.itemButtons[this.highlightedItemIndex];\n          newItem.focus();\n        }\n      });\n    }\n\n    /**\n     * When the dropdown is open it sets the focused element to the one that is selected.\n     *\n     * @param isOpen - True if the dropdown is open, false otherwise.\n     * @internal\n     */\n    @Watch('isOpen')\n    protected updateHighlightedItem(isOpen: boolean): void {\n      if (isOpen) {\n        this.highlightedItemIndex = this.value === null ? 0 : this.items.indexOf(this.value);\n      } else {\n        this.highlightedItemIndex = -1;\n      }\n    }\n\n    /**\n     * Adds and removes listeners to close the dropdown when it loses the focus.\n     *\n     * @param isOpen - True if the dropdown is open, false otherwise.\n     * @internal\n     */\n    @Watch('isOpen')\n    protected syncCloseListeners(isOpen: boolean): void {\n      /*\n       * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target\n       * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be\n       * used to detect whether or not the user has blurred the dropdown. The hack here is to use\n       * document listeners that have the side effect of losing the focus.\n       */\n      if (isOpen) {\n        this.addDocumentCloseListeners();\n      } else {\n        this.removeDocumentCloseListeners();\n      }\n    }\n\n    /**\n     * Adds listeners to the document element to detect if the focus has moved out from the\n     * dropdown.\n     *\n     * @internal\n     */\n    protected addDocumentCloseListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.addEventListener('mousedown', this.closeIfEventIsOutOfDropdown);\n      document.addEventListener('touchstart', this.closeIfEventIsOutOfDropdown);\n      document.addEventListener('focusin', this.closeIfEventIsOutOfDropdown);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Removes the listeners of the document element to detect if the focus has moved out from the\n     * dropdown.\n     *\n     * @internal\n     */\n    protected removeDocumentCloseListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.removeEventListener('mousedown', this.closeIfEventIsOutOfDropdown);\n      document.removeEventListener('touchstart', this.closeIfEventIsOutOfDropdown);\n      document.removeEventListener('focusin', this.closeIfEventIsOutOfDropdown);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Closes the dropdown if the passed event has happened on an element out of the dropdown.\n     *\n     * @param event - The event to check if it has happen out of the dropdown component.\n     */\n    protected closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent): void {\n      if (!this.$el.contains(event.target as HTMLElement)) {\n        this.close();\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-dropdown {\n    position: relative;\n\n    &__items-list {\n      z-index: 1;\n      list-style: none;\n      position: absolute;\n      padding: 0;\n      margin: 0;\n      top: calc(100% + var(--x-size-gap-dropdown-default, 0));\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Example\n\nThe `Dropdown` component is a simple yet customizable select component. The component needs to work\nthe list of items available to select, which are passed using the `items` prop, and the selected\nitem, which is passed in using the `value` prop.\n\nThe supported items must be an array that can contain unique strings, unique numbers, or objects\nwith a unique `id` property.\n\nThe content of each item can be customized using the `item` slot, which apart from the data of the\nitem, it also receives via prop if the element is selected or highlighted.\n\nThere `toggle` slot can be used to customize the button that opens the dropdown. If this is not\nprovided, the `item` slot will be used for that.\n\n```vue\n<template>\n  <BaseDropdown :items=\"items\" v-model=\"value\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n\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  </BaseDropdown>\n</template>\n\n<script>\n  import { BaseDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'DropdownTest',\n    components: {\n      BaseDropdown\n    },\n    data() {\n      return {\n        items: ['a', 2, { id: '3' }],\n        value: ['a']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/layouts/multi-column-max-width-layout.vue.js

@@ -259,11 +259,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-58202672_0", { source: ".dev-mode .slot-helper[data-v-58202672] {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\n.x-layout[data-v-58202672] {\n  --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n  --x-size-margin-layout-columns: max(\n    var(--x-size-min-margin-layout-columns, 20px),\n    var(--x-size-margin-max-width)\n  );\n  --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n  --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n  --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n  display: grid;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  max-height: 100%;\n  grid-template-columns: [page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];\n  background-color: var(--x-color-background-layout-columns, white);\n  border-color: var(--x-color-border-layout-columns);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns, 0);\n}\n.x-layout__header[data-v-58202672] {\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle), 1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];\n  -webkit-padding-before: var(--x-size-padding-top-layout-columns-header, 0);\n          padding-top: var(--x-size-padding-top-layout-columns-header, 0);\n  -webkit-padding-after: var(--x-size-padding-bottom-layout-columns-header, 0);\n          padding-bottom: var(--x-size-padding-bottom-layout-columns-header, 0);\n  -webkit-margin-before: var(--x-size-margin-top-layout-columns-header, 0);\n          margin-top: var(--x-size-margin-top-layout-columns-header, 0);\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-header, 0);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-header, 0);\n  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, trasparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n.x-layout__header-start[data-v-58202672] {\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list[data-v-58202672] {\n  -ms-flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-header-start, flex start);\n      justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n  -ms-flex-align: var(--x-size-align-layout-columns-header-start, flex start);\n      align-items: var(--x-size-align-layout-columns-header-start, flex start);\n}\n.x-layout__header-middle[data-v-58202672] {\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list[data-v-58202672] {\n  -ms-flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-header-middle, center);\n      justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n  -ms-flex-align: var(--x-size-align-layout-columns-header-middle, flex start);\n      align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n}\n.x-layout__header-end[data-v-58202672] {\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list[data-v-58202672] {\n  -ms-flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-header-end, flex-end);\n      justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n  -ms-flex-align: var(--x-size-align-layout-columns-header-end, flex-start);\n      align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n}\n.x-layout__sub-header[data-v-58202672] {\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content), 1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];\n  -webkit-padding-before: var(--x-size-padding-top-layout-columns-sub-header, 0);\n          padding-top: var(--x-size-padding-top-layout-columns-sub-header, 0);\n  -webkit-padding-after: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n          padding-bottom: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n  -webkit-margin-before: var(--x-size-margin-top-layout-columns-sub-header, 0);\n          margin-top: var(--x-size-margin-top-layout-columns-sub-header, 0);\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n  background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n  border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n.x-layout__sub-header-content[data-v-58202672] {\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list[data-v-58202672] {\n  -ms-flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-sub-header, flex-start);\n      justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n  -ms-flex-align: var(--x-size-align-layout-columns-sub-header, flex-start);\n      align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n}\n.x-layout__toolbar[data-v-58202672] {\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body), 1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];\n  -webkit-padding-before: var(--x-size-padding-top-layout-columns-toolbar, 0);\n          padding-top: var(--x-size-padding-top-layout-columns-toolbar, 0);\n  -webkit-padding-after: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n          padding-bottom: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n  -webkit-margin-before: var(--x-size-margin-top-layout-columns-toolbar, 0);\n          margin-top: var(--x-size-margin-top-layout-columns-toolbar, 0);\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n.x-layout__toolbar-aside[data-v-58202672] {\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list[data-v-58202672] {\n  -ms-flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n      justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n  -ms-flex-align: var(--x-size-align-layout-columns-toolbar-aside, center);\n      align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n}\n.x-layout__toolbar-body[data-v-58202672] {\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list[data-v-58202672] {\n  -ms-flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n      justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n  -ms-flex-align: var(--x-size-align-layout-columns-toolbar-body, center);\n      align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n}\n.x-layout__main[data-v-58202672] {\n  grid-column: page;\n  grid-row: main;\n  min-height: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-flow: row nowrap;\n      flex-flow: row nowrap;\n  -ms-flex-pack: stretch;\n      justify-content: stretch;\n  padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n  -webkit-padding-before: var(--x-size-padding-top-layout-columns-main, 0);\n          padding-top: var(--x-size-padding-top-layout-columns-main, 0);\n  -webkit-padding-after: var(--x-size-padding-bottom-layout-columns-main, 0);\n          padding-bottom: var(--x-size-padding-bottom-layout-columns-main, 0);\n  -webkit-margin-before: var(--x-size-margin-top-layout-columns-main, 0);\n          margin-top: var(--x-size-margin-top-layout-columns-main, 0);\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-main, 0);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-main, 0);\n  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n.x-layout__collapse-aside[data-v-58202672] {\n  width: calc( ( 100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns) ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default) );\n}\n.x-layout__aside-scroll[data-v-58202672] {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n.x-layout__main-aside[data-v-58202672] {\n  background-color: var(--x-color-background-layout-columns-main-aside, transparent);\n  border-color: var(--x-color-border-layout-columns-main-aside, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main-aside, 0);\n}\n.x-layout__body-scroll[data-v-58202672] {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  width: 0;\n  padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n}\n.x-layout__body-scroll.x-scroll[data-v-58202672] {\n  --x-string-overflow-scroll: scroll;\n}\n.x-layout__main-body[data-v-58202672] {\n  background-color: var(--x-color-background-layout-columns-main-body, transparent);\n  border-color: var(--x-color-border-layout-columns-main-body, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main-body, 0);\n}\n.x-layout__main-body[data-v-58202672]  .x-grid {\n  --x-size-gap-grid: var(--x-size-gap-default);\n}\n[dir=\"ltr\"] .x-layout__scroll-to-top[data-v-58202672] {\n          margin-left: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n[dir=\"rtl\"] .x-layout__scroll-to-top[data-v-58202672] {\n          margin-right: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top[data-v-58202672] {\n  grid-area: scroll-to-top;\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n  -webkit-margin-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n  z-index: 1;\n}", map: undefined, media: undefined });
+    inject("data-v-242cf01e_0", { source: ".dev-mode .slot-helper[data-v-242cf01e] {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\n.x-layout[data-v-242cf01e] {\n  --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n  --x-size-margin-layout-columns: max(\n    var(--x-size-min-margin-layout-columns, 20px),\n    var(--x-size-margin-max-width)\n  );\n  --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n  --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n  --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n  display: grid;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  max-height: 100%;\n  grid-template-columns: [page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];\n  background-color: var(--x-color-background-layout-columns, white);\n  border-color: var(--x-color-border-layout-columns);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns, 0);\n}\n.x-layout__header[data-v-242cf01e] {\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle), 1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];\n  -webkit-padding-before: var(--x-size-padding-top-layout-columns-header, 0);\n          padding-top: var(--x-size-padding-top-layout-columns-header, 0);\n  -webkit-padding-after: var(--x-size-padding-bottom-layout-columns-header, 0);\n          padding-bottom: var(--x-size-padding-bottom-layout-columns-header, 0);\n  -webkit-margin-before: var(--x-size-margin-top-layout-columns-header, 0);\n          margin-top: var(--x-size-margin-top-layout-columns-header, 0);\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-header, 0);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-header, 0);\n  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n.x-layout__header-start[data-v-242cf01e] {\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list[data-v-242cf01e] {\n  -ms-flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-header-start, flex start);\n      justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n  -ms-flex-align: var(--x-size-align-layout-columns-header-start, flex start);\n      align-items: var(--x-size-align-layout-columns-header-start, flex start);\n}\n.x-layout__header-middle[data-v-242cf01e] {\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list[data-v-242cf01e] {\n  -ms-flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-header-middle, center);\n      justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n  -ms-flex-align: var(--x-size-align-layout-columns-header-middle, flex start);\n      align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n}\n.x-layout__header-end[data-v-242cf01e] {\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list[data-v-242cf01e] {\n  -ms-flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-header-end, flex-end);\n      justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n  -ms-flex-align: var(--x-size-align-layout-columns-header-end, flex-start);\n      align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n}\n.x-layout__sub-header[data-v-242cf01e] {\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content), 1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];\n  -webkit-padding-before: var(--x-size-padding-top-layout-columns-sub-header, 0);\n          padding-top: var(--x-size-padding-top-layout-columns-sub-header, 0);\n  -webkit-padding-after: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n          padding-bottom: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n  -webkit-margin-before: var(--x-size-margin-top-layout-columns-sub-header, 0);\n          margin-top: var(--x-size-margin-top-layout-columns-sub-header, 0);\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n  background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n  border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n.x-layout__sub-header-content[data-v-242cf01e] {\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list[data-v-242cf01e] {\n  -ms-flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-sub-header, flex-start);\n      justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n  -ms-flex-align: var(--x-size-align-layout-columns-sub-header, flex-start);\n      align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n}\n.x-layout__toolbar[data-v-242cf01e] {\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body), 1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];\n  -webkit-padding-before: var(--x-size-padding-top-layout-columns-toolbar, 0);\n          padding-top: var(--x-size-padding-top-layout-columns-toolbar, 0);\n  -webkit-padding-after: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n          padding-bottom: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n  -webkit-margin-before: var(--x-size-margin-top-layout-columns-toolbar, 0);\n          margin-top: var(--x-size-margin-top-layout-columns-toolbar, 0);\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n.x-layout__toolbar-aside[data-v-242cf01e] {\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list[data-v-242cf01e] {\n  -ms-flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n      justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n  -ms-flex-align: var(--x-size-align-layout-columns-toolbar-aside, center);\n      align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n}\n.x-layout__toolbar-body[data-v-242cf01e] {\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list[data-v-242cf01e] {\n  -ms-flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n      flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n  -ms-flex-pack: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n      justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n  -ms-flex-align: var(--x-size-align-layout-columns-toolbar-body, center);\n      align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n}\n.x-layout__main[data-v-242cf01e] {\n  grid-column: page;\n  grid-row: main;\n  min-height: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-flow: row nowrap;\n      flex-flow: row nowrap;\n  -ms-flex-pack: stretch;\n      justify-content: stretch;\n  padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n  -webkit-padding-before: var(--x-size-padding-top-layout-columns-main, 0);\n          padding-top: var(--x-size-padding-top-layout-columns-main, 0);\n  -webkit-padding-after: var(--x-size-padding-bottom-layout-columns-main, 0);\n          padding-bottom: var(--x-size-padding-bottom-layout-columns-main, 0);\n  -webkit-margin-before: var(--x-size-margin-top-layout-columns-main, 0);\n          margin-top: var(--x-size-margin-top-layout-columns-main, 0);\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-main, 0);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-main, 0);\n  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n.x-layout__collapse-aside[data-v-242cf01e] {\n  width: calc( ( 100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns) ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default) );\n}\n.x-layout__aside-scroll[data-v-242cf01e] {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n.x-layout__main-aside[data-v-242cf01e] {\n  background-color: var(--x-color-background-layout-columns-main-aside, transparent);\n  border-color: var(--x-color-border-layout-columns-main-aside, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main-aside, 0);\n}\n.x-layout__body-scroll[data-v-242cf01e] {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  width: 0;\n  padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n}\n.x-layout__body-scroll.x-scroll[data-v-242cf01e] {\n  --x-string-overflow-scroll: scroll;\n}\n.x-layout__main-body[data-v-242cf01e] {\n  background-color: var(--x-color-background-layout-columns-main-body, transparent);\n  border-color: var(--x-color-border-layout-columns-main-body, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main-body, 0);\n}\n.x-layout__main-body[data-v-242cf01e]  .x-grid {\n  --x-size-gap-grid: var(--x-size-gap-default);\n}\n[dir=\"ltr\"] .x-layout__scroll-to-top[data-v-242cf01e] {\n          margin-left: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n[dir=\"rtl\"] .x-layout__scroll-to-top[data-v-242cf01e] {\n          margin-right: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top[data-v-242cf01e] {\n  grid-area: scroll-to-top;\n  -webkit-margin-after: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n          margin-bottom: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n  -webkit-margin-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n  z-index: 1;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-58202672";
+  var __vue_scope_id__ = "data-v-242cf01e";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */