@empathyco/x-components 6.0.0-alpha.93 → 6.0.0-alpha.95

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.95 (2025-06-06)
+
+* feat(logger): remove x-logger (#1800) ([70d210a](https://github.com/empathyco/x/commit/70d210a)), closes [#1800](https://github.com/empathyco/x/issues/1800)
+
+
+
+
+
+## 6.0.0-alpha.94 (2025-06-04)
+
+* feat!: remove deprecated design system (#1793) ([97a853d](https://github.com/empathyco/x/commit/97a853d)), closes [#1793](https://github.com/empathyco/x/issues/1793)
+
+
+### BREAKING CHANGE
+
+* remove deprecated-full-theme.css
+
+Signed-off-by: davidglezz <davidg@empathy.co>
+
+* refactor: extract dev mode styles
+
+Signed-off-by: davidglezz <davidg@empathy.co>
+
+
+
+
 ## 6.0.0-alpha.93 (2025-06-03)
 
 * chore(deps): pin dependency @cucumber/messages to 27.2.0 ([7f80eb2](https://github.com/empathyco/x/commit/7f80eb2))

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

@@ -520,7 +520,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [resetStateForReloadWire](./x-components.resetstateforreloadwire.md) | Resets the search state to reload the current search. |
 |  [resetStateIfNoRequestWire](./x-components.resetstateifnorequestwire.md) | Resets the search state when the request is changed to null. See the [SearchXStoreModule](./x-components.searchxstoremodule.md) for details. |
 |  [ResultsList](./x-components.resultslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list with the results from [SearchState.results](./x-components.searchstate.results.md) by default.</p><p>The component provides a default slot which wraps the whole component with the <code>results</code> bound.</p><p>It also provides the slot result to customize the item, which is within the default slot, with the result bound.</p> |
-|  [ResultVariantSelector](./x-components.resultvariantselector.md) | Component to show and select the available variants of a product for a given nest level. TODO: Add logger warning on mount when result is not injected. |
+|  [ResultVariantSelector](./x-components.resultvariantselector.md) | Component to show and select the available variants of a product for a given nest level. TODO: Log warning on mount when result is not injected. |
 |  [ResultVariantsProvider](./x-components.resultvariantsprovider.md) | <p>Component that exposes the result merged with its selected variant in the default slot.</p><p>It receives the original result and keeps track of the selected variant.</p><p>It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child.</p> |
 |  [sanitize](./x-components.sanitize.md) | Sanitize characters from a given string. |
 |  [saveIdentifierResultsOrigin](./x-components.saveidentifierresultsorigin.md) | Default implementation for the [IdentifierResultsActions.saveOrigin](./x-components.identifierresultsactions.saveorigin.md)<!-- -->. |

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

@@ -4,7 +4,7 @@
 
 ## ResultVariantSelector variable
 
-Component to show and select the available variants of a product for a given nest level. TODO: Add logger warning on mount when result is not injected.
+Component to show and select the available variants of a product for a given nest level. TODO: Log warning on mount when result is not injected.
 
 **Signature:**
 

package/docs/API-reference/components/common/result/x-components.result-variant-selector.md

@@ -7,7 +7,7 @@ title: ResultVariantSelector
 # ResultVariantSelector
 
 Component to show and select the available variants of a product for a given nest level.
-TODO: Add logger warning on mount when result is not injected.
+TODO: Log warning on mount when result is not injected.
 
 ## Props
 

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

@@ -1 +1 @@
-{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    ref=\"gridEl\"\n    :style=\"style\"\n    class=\"x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ item, cssClass, slotName } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"slots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { MaybeComputedElementRef, UseResizeObserverReturn } from '@vueuse/core'\nimport type { PropType, Ref } from 'vue'\nimport type { ListItem, VueCSSClasses } from '../utils/types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport { toKebabCase } from '../utils/string'\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts'\n\n/**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n */\ninterface GridItem {\n  slotName: string\n  item: ListItem\n  cssClass: VueCSSClasses\n}\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseGrid',\n  props: {\n    /** Animation component that will be used to animate the base grid. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an ID property.\n     */\n    items: {\n      type: Array as PropType<ListItem[]>,\n    },\n  },\n  setup(props, { slots }) {\n    // eslint-disable-next-line ts/consistent-type-definitions\n    type ElementRef = {\n      $el: HTMLElement\n    }\n\n    const xBus = useXBus()\n\n    /** It injects {@link ListItem} provided by an ancestor. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n    const gridEl = ref<ElementRef | HTMLElement>()\n    const renderedColumnsNumber = ref(0)\n\n    /**\n     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}\n     * event whenever the number of columns rendered inside the grid changes.\n     */\n    watch(\n      renderedColumnsNumber,\n      () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),\n      { immediate: false },\n    )\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     */\n    const computedItems = computed<ListItem[] | void>(() => {\n      return (\n        props.items ??\n        injectedListItems?.value ??\n        //TODO: add here logger\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      )\n    })\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     */\n    const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`)\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     */\n    const style = computed<Partial<CSSStyleDeclaration>>(() => ({\n      gridTemplateColumns: props.columns\n        ? `repeat(${props.columns}, minmax(0, 1fr))`\n        : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))',\n    }))\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     */\n    const gridItems = computed<GridItem[]>(() =>\n      (computedItems.value as ListItem[]).map(item => {\n        const slotName = toKebabCase(item.modelName)\n        return {\n          slotName,\n          item,\n          cssClass: `x-base-grid__${slotName}`,\n        }\n      }),\n    )\n\n    /**\n     * Checks if a given value is an `ElementRef` object.\n     *\n     * @param value - The value to check.\n     * @returns `true` if the value is an `ElementRef` object, `false` otherwise.\n     */\n    const isElementRef = (value: any): value is ElementRef => {\n      return value && value.$el instanceof HTMLElement\n    }\n\n    /** Updates the number of columns rendered inside the grid. */\n    function updateRenderedColumnsNumber() {\n      const { gridTemplateColumns } = getComputedStyle(\n        isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element),\n      )\n      renderedColumnsNumber.value = gridTemplateColumns.split(' ').length\n    }\n\n    /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */\n    let resizeObserver: UseResizeObserverReturn\n    onMounted(() => {\n      resizeObserver = useResizeObserver(\n        gridEl as MaybeComputedElementRef,\n        updateRenderedColumnsNumber,\n      )\n    })\n    onBeforeUnmount(() => resizeObserver?.stop())\n\n    return {\n      gridItems,\n      cssClasses,\n      style,\n      gridEl,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-base-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n  align-items: stretch;\n}\n\n.x-base-grid__banner,\n.x-base-grid__next-queries-group,\n.x-base-grid__related-prompts-group {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}\n\n.x-base-grid__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-grid__item > * {\n  flex-grow: 1;\n}\n\n.x-base-grid--cols-auto .x-base-grid__item {\n  min-width: var(--x-size-min-width-grid-item);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" style=\"--x-size-min-width-grid-item: 150px\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeStyle","_normalizeClass","_createElementBlock","_Fragment","_renderList","slots","_renderSlot"],"mappings":";;;;;SAGQ,WAAQ,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACN,EAAA,OAAAA,SAAA,EAAO,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACb,GAAK,EAAA,QAAA;AAAA,IAEL,OAAIC,cAAI,CAAA,IAAA,CAAA,KAAA,CAAA;AAAA,IACR,KAAgB,EAAAC,cAAA,CAAA,CAAA,aAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,IAAA,GAAA,EAAA,IAAA;AARpB,IAAA,WAAA,EAAA,MAAA;AAAA,GAAA,EAAA;;iBAYY,IAAO,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA;iBACPP,SAbZ,EAAA,EAAAK,kBAAA;AAAA,YAcY,IAAA;AAAA,YAAA;AAAA,cAAA,GAAA,EAAA,IAAA,CAAA,EAAA;qBAOMG,cAAc,CAAA,CAAA,QAAA,EAAA,mBAAA,CAAA,CAAA;AAAA,aAAA;;mBArBhC,KAqB+D,CAAA,QAAA,CAAA,GAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAA;AAAA,gBAAA,GAAA,EAAA,CAAA;AAMzD,gBAAA,IAAA;AAAA,eAAA,EA3BN,KA2B8B,CAAA,EAAA,IAAA,CAAA,GAAAA,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,gBAA6D,GAAA,EAAA,CAAA;AAAA,gBA3B3F,IAAA;AAAA,eAAA,EAAA,MAAA;;;;;;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    ref=\"gridEl\"\n    :style=\"style\"\n    class=\"x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ item, cssClass, slotName } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"slots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { MaybeComputedElementRef, UseResizeObserverReturn } from '@vueuse/core'\nimport type { PropType, Ref } from 'vue'\nimport type { ListItem, VueCSSClasses } from '../utils/types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport { toKebabCase } from '../utils/string'\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts'\n\n/**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n */\ninterface GridItem {\n  slotName: string\n  item: ListItem\n  cssClass: VueCSSClasses\n}\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseGrid',\n  props: {\n    /** Animation component that will be used to animate the base grid. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an ID property.\n     */\n    items: {\n      type: Array as PropType<ListItem[]>,\n    },\n  },\n  setup(props, { slots }) {\n    // eslint-disable-next-line ts/consistent-type-definitions\n    type ElementRef = {\n      $el: HTMLElement\n    }\n\n    const xBus = useXBus()\n\n    /** It injects {@link ListItem} provided by an ancestor. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n    const gridEl = ref<ElementRef | HTMLElement>()\n    const renderedColumnsNumber = ref(0)\n\n    /**\n     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}\n     * event whenever the number of columns rendered inside the grid changes.\n     */\n    watch(\n      renderedColumnsNumber,\n      () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),\n      { immediate: false },\n    )\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     */\n    const computedItems = computed<ListItem[] | void>(() => {\n      return (\n        props.items ??\n        injectedListItems?.value ??\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      )\n    })\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     */\n    const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`)\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     */\n    const style = computed<Partial<CSSStyleDeclaration>>(() => ({\n      gridTemplateColumns: props.columns\n        ? `repeat(${props.columns}, minmax(0, 1fr))`\n        : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))',\n    }))\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     */\n    const gridItems = computed<GridItem[]>(() =>\n      (computedItems.value as ListItem[]).map(item => {\n        const slotName = toKebabCase(item.modelName)\n        return {\n          slotName,\n          item,\n          cssClass: `x-base-grid__${slotName}`,\n        }\n      }),\n    )\n\n    /**\n     * Checks if a given value is an `ElementRef` object.\n     *\n     * @param value - The value to check.\n     * @returns `true` if the value is an `ElementRef` object, `false` otherwise.\n     */\n    const isElementRef = (value: any): value is ElementRef => {\n      return value && value.$el instanceof HTMLElement\n    }\n\n    /** Updates the number of columns rendered inside the grid. */\n    function updateRenderedColumnsNumber() {\n      const { gridTemplateColumns } = getComputedStyle(\n        isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element),\n      )\n      renderedColumnsNumber.value = gridTemplateColumns.split(' ').length\n    }\n\n    /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */\n    let resizeObserver: UseResizeObserverReturn\n    onMounted(() => {\n      resizeObserver = useResizeObserver(\n        gridEl as MaybeComputedElementRef,\n        updateRenderedColumnsNumber,\n      )\n    })\n    onBeforeUnmount(() => resizeObserver?.stop())\n\n    return {\n      gridItems,\n      cssClasses,\n      style,\n      gridEl,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-base-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n  align-items: stretch;\n}\n\n.x-base-grid__banner,\n.x-base-grid__next-queries-group,\n.x-base-grid__related-prompts-group {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}\n\n.x-base-grid__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-grid__item > * {\n  flex-grow: 1;\n}\n\n.x-base-grid--cols-auto .x-base-grid__item {\n  min-width: var(--x-size-min-width-grid-item);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" style=\"--x-size-min-width-grid-item: 150px\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeStyle","_normalizeClass","_createElementBlock","_Fragment","_renderList","slots","_renderSlot"],"mappings":";;;;;SAGQ,WAAQ,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACN,EAAA,OAAAA,SAAA,EAAO,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACb,GAAK,EAAA,QAAA;AAAA,IAEL,OAAIC,cAAI,CAAA,IAAA,CAAA,KAAA,CAAA;AAAA,IACR,KAAgB,EAAAC,cAAA,CAAA,CAAA,aAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,IAAA,GAAA,EAAA,IAAA;AARpB,IAAA,WAAA,EAAA,MAAA;AAAA,GAAA,EAAA;;iBAYY,IAAO,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA;iBACPP,SAbZ,EAAA,EAAAK,kBAAA;AAAA,YAcY,IAAA;AAAA,YAAA;AAAA,cAAA,GAAA,EAAA,IAAA,CAAA,EAAA;qBAOMG,cAAc,CAAA,CAAA,QAAA,EAAA,mBAAA,CAAA,CAAA;AAAA,aAAA;;mBArBhC,KAqB+D,CAAA,QAAA,CAAA,GAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAA;AAAA,gBAAA,GAAA,EAAA,CAAA;AAMzD,gBAAA,IAAA;AAAA,eAAA,EA3BN,KA2B8B,CAAA,EAAA,IAAA,CAAA,GAAAA,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,gBAA6D,GAAA,EAAA,CAAA;AAAA,gBA3B3F,IAAA;AAAA,eAAA,EAAA,MAAA;;;;;;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/base-grid.vue2.js

@@ -59,7 +59,6 @@ var _sfc_main = defineComponent({
         const computedItems = computed(() => {
             return (props.items ??
                 injectedListItems?.value ??
-                //TODO: add here logger
                 console.warn('It is necessary to pass a prop or inject the list of filters'));
         });
         /**

package/js/components/base-grid.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-grid.vue2.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    ref=\"gridEl\"\n    :style=\"style\"\n    class=\"x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ item, cssClass, slotName } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"slots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { MaybeComputedElementRef, UseResizeObserverReturn } from '@vueuse/core'\nimport type { PropType, Ref } from 'vue'\nimport type { ListItem, VueCSSClasses } from '../utils/types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport { toKebabCase } from '../utils/string'\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts'\n\n/**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n */\ninterface GridItem {\n  slotName: string\n  item: ListItem\n  cssClass: VueCSSClasses\n}\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseGrid',\n  props: {\n    /** Animation component that will be used to animate the base grid. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an ID property.\n     */\n    items: {\n      type: Array as PropType<ListItem[]>,\n    },\n  },\n  setup(props, { slots }) {\n    // eslint-disable-next-line ts/consistent-type-definitions\n    type ElementRef = {\n      $el: HTMLElement\n    }\n\n    const xBus = useXBus()\n\n    /** It injects {@link ListItem} provided by an ancestor. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n    const gridEl = ref<ElementRef | HTMLElement>()\n    const renderedColumnsNumber = ref(0)\n\n    /**\n     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}\n     * event whenever the number of columns rendered inside the grid changes.\n     */\n    watch(\n      renderedColumnsNumber,\n      () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),\n      { immediate: false },\n    )\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     */\n    const computedItems = computed<ListItem[] | void>(() => {\n      return (\n        props.items ??\n        injectedListItems?.value ??\n        //TODO: add here logger\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      )\n    })\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     */\n    const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`)\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     */\n    const style = computed<Partial<CSSStyleDeclaration>>(() => ({\n      gridTemplateColumns: props.columns\n        ? `repeat(${props.columns}, minmax(0, 1fr))`\n        : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))',\n    }))\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     */\n    const gridItems = computed<GridItem[]>(() =>\n      (computedItems.value as ListItem[]).map(item => {\n        const slotName = toKebabCase(item.modelName)\n        return {\n          slotName,\n          item,\n          cssClass: `x-base-grid__${slotName}`,\n        }\n      }),\n    )\n\n    /**\n     * Checks if a given value is an `ElementRef` object.\n     *\n     * @param value - The value to check.\n     * @returns `true` if the value is an `ElementRef` object, `false` otherwise.\n     */\n    const isElementRef = (value: any): value is ElementRef => {\n      return value && value.$el instanceof HTMLElement\n    }\n\n    /** Updates the number of columns rendered inside the grid. */\n    function updateRenderedColumnsNumber() {\n      const { gridTemplateColumns } = getComputedStyle(\n        isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element),\n      )\n      renderedColumnsNumber.value = gridTemplateColumns.split(' ').length\n    }\n\n    /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */\n    let resizeObserver: UseResizeObserverReturn\n    onMounted(() => {\n      resizeObserver = useResizeObserver(\n        gridEl as MaybeComputedElementRef,\n        updateRenderedColumnsNumber,\n      )\n    })\n    onBeforeUnmount(() => resizeObserver?.stop())\n\n    return {\n      gridItems,\n      cssClasses,\n      style,\n      gridEl,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-base-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n  align-items: stretch;\n}\n\n.x-base-grid__banner,\n.x-base-grid__next-queries-group,\n.x-base-grid__related-prompts-group {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}\n\n.x-base-grid__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-grid__item > * {\n  flex-grow: 1;\n}\n\n.x-base-grid--cols-auto .x-base-grid__item {\n  min-width: var(--x-size-min-width-grid-item);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" style=\"--x-size-min-width-grid-item: 150px\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-grid.vue2.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    ref=\"gridEl\"\n    :style=\"style\"\n    class=\"x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ item, cssClass, slotName } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"slots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { MaybeComputedElementRef, UseResizeObserverReturn } from '@vueuse/core'\nimport type { PropType, Ref } from 'vue'\nimport type { ListItem, VueCSSClasses } from '../utils/types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport { toKebabCase } from '../utils/string'\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts'\n\n/**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n */\ninterface GridItem {\n  slotName: string\n  item: ListItem\n  cssClass: VueCSSClasses\n}\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseGrid',\n  props: {\n    /** Animation component that will be used to animate the base grid. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an ID property.\n     */\n    items: {\n      type: Array as PropType<ListItem[]>,\n    },\n  },\n  setup(props, { slots }) {\n    // eslint-disable-next-line ts/consistent-type-definitions\n    type ElementRef = {\n      $el: HTMLElement\n    }\n\n    const xBus = useXBus()\n\n    /** It injects {@link ListItem} provided by an ancestor. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n    const gridEl = ref<ElementRef | HTMLElement>()\n    const renderedColumnsNumber = ref(0)\n\n    /**\n     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}\n     * event whenever the number of columns rendered inside the grid changes.\n     */\n    watch(\n      renderedColumnsNumber,\n      () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),\n      { immediate: false },\n    )\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     */\n    const computedItems = computed<ListItem[] | void>(() => {\n      return (\n        props.items ??\n        injectedListItems?.value ??\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      )\n    })\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     */\n    const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`)\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     */\n    const style = computed<Partial<CSSStyleDeclaration>>(() => ({\n      gridTemplateColumns: props.columns\n        ? `repeat(${props.columns}, minmax(0, 1fr))`\n        : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))',\n    }))\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     */\n    const gridItems = computed<GridItem[]>(() =>\n      (computedItems.value as ListItem[]).map(item => {\n        const slotName = toKebabCase(item.modelName)\n        return {\n          slotName,\n          item,\n          cssClass: `x-base-grid__${slotName}`,\n        }\n      }),\n    )\n\n    /**\n     * Checks if a given value is an `ElementRef` object.\n     *\n     * @param value - The value to check.\n     * @returns `true` if the value is an `ElementRef` object, `false` otherwise.\n     */\n    const isElementRef = (value: any): value is ElementRef => {\n      return value && value.$el instanceof HTMLElement\n    }\n\n    /** Updates the number of columns rendered inside the grid. */\n    function updateRenderedColumnsNumber() {\n      const { gridTemplateColumns } = getComputedStyle(\n        isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element),\n      )\n      renderedColumnsNumber.value = gridTemplateColumns.split(' ').length\n    }\n\n    /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */\n    let resizeObserver: UseResizeObserverReturn\n    onMounted(() => {\n      resizeObserver = useResizeObserver(\n        gridEl as MaybeComputedElementRef,\n        updateRenderedColumnsNumber,\n      )\n    })\n    onBeforeUnmount(() => resizeObserver?.stop())\n\n    return {\n      gridItems,\n      cssClasses,\n      style,\n      gridEl,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-base-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n  align-items: stretch;\n}\n\n.x-base-grid__banner,\n.x-base-grid__next-queries-group,\n.x-base-grid__related-prompts-group {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}\n\n.x-base-grid__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-grid__item > * {\n  flex-grow: 1;\n}\n\n.x-base-grid--cols-auto .x-base-grid__item {\n  min-width: var(--x-size-min-width-grid-item);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" style=\"--x-size-min-width-grid-item: 150px\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n</docs>\n"],"names":[],"mappings":"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"}

package/js/components/layouts/fixed-header-and-asides-layout.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots.header\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"devMode || $slots['sub-header']\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"devMode || $slots.toolbar\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"devMode || $slots.main\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\n\n/**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n@import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n.x-layout {\n  /* custom properties */\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n\n  /* layout */\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\n\n  grid-template-rows:\n    [page-start header-start]\n    auto\n    [header-end sub-header-start]\n    auto\n    [sub-header-end toolbar-start]\n    auto\n    [toolbar-end main-start]\n    1fr\n    [main-end page-end];\n\n  grid-template-columns:\n    [page-start]\n    var(--x-size-margin-layout)\n    [max-width-start]\n    1fr\n    [max-width-end]\n    var(--x-size-margin-layout)\n    [page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__scroll-to-top {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n\n.x-layout__header-backdrop {\n  /* layout */\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n\n  /* color */\n  background-color: var(\n    --x-color-background-layout-header-backdrop,\n    var(--x-color-base-neutral-100, white)\n  );\n  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n  /* transition */\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createVNode","_normalizeClass","_createElementVNode","devMode","$slots","_createElementBlock","_renderSlot","_createCommentVNode","leftAsideAnimation","rightAsideAnimation"],"mappings":"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"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots.header\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"devMode || $slots['sub-header']\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"devMode || $slots.toolbar\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"devMode || $slots.main\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\n\n/**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n@import url('../../styles/dev-mode.css');\n\n.x-layout {\n  /* custom properties */\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n\n  /* layout */\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\n\n  grid-template-rows:\n    [page-start header-start]\n    auto\n    [header-end sub-header-start]\n    auto\n    [sub-header-end toolbar-start]\n    auto\n    [toolbar-end main-start]\n    1fr\n    [main-end page-end];\n\n  grid-template-columns:\n    [page-start]\n    var(--x-size-margin-layout)\n    [max-width-start]\n    1fr\n    [max-width-end]\n    var(--x-size-margin-layout)\n    [page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__scroll-to-top {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n\n.x-layout__header-backdrop {\n  /* layout */\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n\n  /* color */\n  background-color: var(\n    --x-color-background-layout-header-backdrop,\n    var(--x-color-base-neutral-100, white)\n  );\n  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n  /* transition */\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createVNode","_normalizeClass","_createElementVNode","devMode","$slots","_createElementBlock","_renderSlot","_createCommentVNode","leftAsideAnimation","rightAsideAnimation"],"mappings":"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"}

package/js/components/layouts/fixed-header-and-asides-layout.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue2.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots.header\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"devMode || $slots['sub-header']\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"devMode || $slots.toolbar\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"devMode || $slots.main\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\n\n/**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n@import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n.x-layout {\n  /* custom properties */\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n\n  /* layout */\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\n\n  grid-template-rows:\n    [page-start header-start]\n    auto\n    [header-end sub-header-start]\n    auto\n    [sub-header-end toolbar-start]\n    auto\n    [toolbar-end main-start]\n    1fr\n    [main-end page-end];\n\n  grid-template-columns:\n    [page-start]\n    var(--x-size-margin-layout)\n    [max-width-start]\n    1fr\n    [max-width-end]\n    var(--x-size-margin-layout)\n    [page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__scroll-to-top {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n\n.x-layout__header-backdrop {\n  /* layout */\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n\n  /* color */\n  background-color: var(\n    --x-color-background-layout-header-backdrop,\n    var(--x-color-base-neutral-100, white)\n  );\n  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n  /* transition */\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":["MainScroll"],"mappings":";;;;;;AAkGA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,UAAU,EAAE,EAAE,WAAW,cAAEA,WAAU,EAAE,QAAQ;AAC/C,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,cAAa,GAAI,GAAG,CAAC,CAAC,CAAA,CAAA;AAE5B,QAAA,MAAM,mBAAkB,GAAI,gBAAgB,CAAC,OAAO,CAAA,CAAA;AACpD,QAAA,MAAM,kBAAiB,GAAI,gBAAgB,CAAC,MAAM,CAAA,CAAA;AAElD,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAK;AACxC,YAAA,cAAc,CAAC,KAAM,GAAE,QAAO,CAAA;AAChC,SAAA,CAAA;AACA,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAM,GAAE,CAAC,CAAA,CAAA;QAEjE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAiB;SACnB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue2.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots.header\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"devMode || $slots['sub-header']\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"devMode || $slots.toolbar\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"devMode || $slots.main\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\n\n/**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n@import url('../../styles/dev-mode.css');\n\n.x-layout {\n  /* custom properties */\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n\n  /* layout */\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\n\n  grid-template-rows:\n    [page-start header-start]\n    auto\n    [header-end sub-header-start]\n    auto\n    [sub-header-end toolbar-start]\n    auto\n    [toolbar-end main-start]\n    1fr\n    [main-end page-end];\n\n  grid-template-columns:\n    [page-start]\n    var(--x-size-margin-layout)\n    [max-width-start]\n    1fr\n    [max-width-end]\n    var(--x-size-margin-layout)\n    [page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__scroll-to-top {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n\n.x-layout__header-backdrop {\n  /* layout */\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n\n  /* color */\n  background-color: var(\n    --x-color-background-layout-header-backdrop,\n    var(--x-color-base-neutral-100, white)\n  );\n  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n  /* transition */\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":["MainScroll"],"mappings":";;;;;;AAkGA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,UAAU,EAAE,EAAE,WAAW,cAAEA,WAAU,EAAE,QAAQ;AAC/C,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,cAAa,GAAI,GAAG,CAAC,CAAC,CAAA,CAAA;AAE5B,QAAA,MAAM,mBAAkB,GAAI,gBAAgB,CAAC,OAAO,CAAA,CAAA;AACpD,QAAA,MAAM,kBAAiB,GAAI,gBAAgB,CAAC,MAAM,CAAA,CAAA;AAElD,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAK;AACxC,YAAA,cAAc,CAAC,KAAM,GAAE,QAAO,CAAA;AAChC,SAAA,CAAA;AACA,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAM,GAAE,CAAC,CAAA,CAAA;QAEjE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAiB;SACnB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"multi-column-max-width-layout.vue.js","sources":["../../../../src/components/layouts/multi-column-max-width-layout.vue"],"sourcesContent":["<template>\n  <div\n    class=\"x-layout x-layout--columns\"\n    :class=\"{ 'dev-mode': devMode }\"\n    :style=\"{ height: devMode || $slots['main-body'] ? '100%' : 'auto' }\"\n  >\n    <header class=\"x-layout__header\">\n      <div v-if=\"devMode || $slots['header-start']\" class=\"x-list x-layout__header-start\">\n        <!-- @slot Slot that can be used to insert content into the left part of the header. -->\n        <slot name=\"header-start\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER START</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-middle']\" class=\"x-list x-layout__header-middle\">\n        <!-- @slot Slot that can be used to insert content into the center part of the header. -->\n        <slot name=\"header-middle\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER MIDDLE</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-end']\" class=\"x-list x-layout__header-end\">\n        <!-- @slot Slot that can be used to insert content into the right part of the header. -->\n        <slot name=\"header-end\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER END</span>\n        </slot>\n      </div>\n    </header>\n\n    <div v-if=\"devMode || $slots['sub-header']\" class=\"x-layout__sub-header\">\n      <div class=\"x-layout__sub-header-content\">\n        <!-- @slot Slot that can be used to insert content into below the header. -->\n        <slot name=\"sub-header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n        </slot>\n      </div>\n    </div>\n\n    <section\n      v-if=\"devMode || $slots['toolbar-aside'] || $slots['toolbar-body']\"\n      class=\"x-layout__toolbar\"\n    >\n      <aside class=\"x-list x-layout__toolbar-aside\">\n        <slot name=\"toolbar-aside\">\n          <!-- @slot Slot that can be used to insert content above the left aside. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR ASIDE</span>\n        </slot>\n      </aside>\n\n      <div class=\"x-list x-layout__toolbar-body\">\n        <!-- @slot Slot that can be used to insert content above the body. -->\n        <slot name=\"toolbar-body\">\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR BODY</span>\n        </slot>\n      </div>\n    </section>\n\n    <main class=\"x-layout__main\">\n      <BaseIdTogglePanel\n        v-if=\"devMode || $slots['main-aside']\"\n        panel-id=\"aside-panel\"\n        :animation=\"asideAnimation\"\n        class=\"x-layout__collapse-aside\"\n      >\n        <Scroll id=\"aside-scroll\" class=\"x-layout__aside-scroll\">\n          <div class=\"x-layout__main-aside x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert content into the left side bar. -->\n            <slot name=\"main-aside\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN ASIDE</span>\n            </slot>\n          </div>\n        </Scroll>\n      </BaseIdTogglePanel>\n\n      <MainScroll class=\"x-flex x-flex-auto\">\n        <Scroll\n          v-if=\"devMode || $slots['main-body']\"\n          id=\"main-scroll\"\n          class=\"x-layout__body-scroll\"\n        >\n          <section class=\"x-layout__main-body x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert the body content. -->\n            <slot name=\"main-body\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN BODY</span>\n            </slot>\n          </section>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"devMode || $slots['scroll-to-top']\" class=\"x-layout__scroll-to-top\">\n      <div class=\"x-layout__scroll-to-top-content\">\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 50px\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport AnimateWidth from '../animations/animate-width.vue'\nimport BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue'\n\n/**\n * Component for use as Layout to be filled with the rest of the Components.\n *\n * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'MultiColumnMaxWidthLayout',\n  components: { BaseIdTogglePanel, MainScroll, Scroll },\n  props: {\n    /** The animation used for the Main Aside. */\n    asideAnimation: {\n      type: AnimationProp,\n      default: () => AnimateWidth,\n    },\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n})\n</script>\n\n<style lang=\"css\">\n:root {\n  /* layout */\n  --x-size-min-margin-layout-columns: var(--x-size-base-06);\n  --x-size-column-gap-layout-columns: var(--x-size-base-06);\n\n  /* spacing */\n\n  /* size - header */\n  --x-size-padding-top-layout-columns-header: var(--x-size-base-07);\n  --x-size-padding-bottom-layout-columns-header: var(--x-size-base-05);\n\n  /* size - toolbar */\n  --x-size-padding-top-layout-columns-toolbar: var(--x-size-base-05);\n  --x-size-padding-bottom-layout-columns-toolbar: var(--x-size-base-03);\n\n  /* size- scroll-to-top */\n  --x-size-margin-bottom-layout-columns-scroll-to-top: var(--x-size-base-03);\n  --x-size-margin-left-layout-columns-scroll-to-top: var(--x-size-base-03);\n\n  /* color */\n  --x-color-background-layout-columns: var(--x-color-base-neutral-100);\n  --x-color-border-layout-columns: var(--x-color-base-neutral-70);\n  --x-color-border-layout-columns-header: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-sub-header: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-toolbar: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main-aside: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main-body: var(--x-color-border-layout-columns);\n\n  /* border */\n  --x-size-border-width-layout-columns-header: 0;\n  --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n}\n</style>\n\n<style lang=\"css\" scoped>\n@import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n.x-layout {\n  /* custom properties */\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\n  /* layout */\n  display: grid;\n  align-content: stretch;\n  max-height: 100%;\n\n  grid-template-columns:\n    [page-start]\n    1fr\n    [scroll-to-top-start]\n    calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default))\n    [scroll-to-top-end page-end];\n\n  grid-template-rows:\n    [page-start header-start]\n    auto\n    [header-end sub-header-start]\n    auto\n    [sub-header-end toolbar-start]\n    auto\n    [toolbar-end main-start]\n    1fr\n    [scroll-to-top-start]\n    auto\n    [main-end scroll-to-top-end page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n\n  grid-template-columns:\n    [header-start]\n    var(--x-size-margin-layout-columns)\n    [start-content-start]\n    1fr\n    [start-content-end middle-content-start]\n    repeat(var(--x-number-columns-header-middle), 1fr)\n    [middle-content-end end-content-start]\n    1fr\n    [end-content-end]\n    var(--x-size-margin-layout-columns)\n    [header-end];\n\n  /* size */\n  padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);\n  padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);\n  margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);\n  margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);\n\n  /* color */\n  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, transparent);\n\n  /* border */\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n\n.x-layout__header-start {\n  /* layout */\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list {\n  /* space */\n  flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n  align-items: var(--x-size-align-layout-columns-header-start, flex start);\n}\n\n.x-layout__header-middle {\n  /* layout */\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list {\n  /* space */\n  flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n  align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n}\n\n.x-layout__header-end {\n  /* layout */\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list {\n  flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n  align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n\n  grid-template-columns:\n    [sub-header-start]\n    var(--x-size-margin-layout-columns)\n    1fr\n    [sub-header-content-start]\n    repeat(var(--x-number-columns-sub-header-content), 1fr)\n    [sub-header-content-end]\n    1fr\n    var(--x-size-margin-layout-columns)\n    [sub-header-end];\n\n  /* size */\n  padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);\n  padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n  margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);\n  margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n\n  /* color */\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\n  /* border */\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n\n.x-layout__sub-header-content {\n  /* layout */\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list {\n  flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n  align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n\n  grid-template-columns:\n    [toolbar-start]\n    var(--x-size-margin-layout-columns)\n    [toolbar-aside-start]\n    1fr\n    [toolbar-aside-end toolbar-body-start]\n    repeat(var(--x-number-columns-toolbar-body), 1fr)\n    [toolbar-body-end]\n    var(--x-size-margin-layout-columns)\n    [toolbar-end];\n\n  /* size */\n  padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);\n  padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n  margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);\n  margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n\n  /* color */\n  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n\n  /* border */\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n\n.x-layout__toolbar-aside {\n  /* layout */\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list {\n  flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n  align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n}\n\n.x-layout__toolbar-body {\n  /* layout */\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list {\n  flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n  align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n}\n\n.x-layout__main {\n  /* layout */\n  grid-column: page;\n  grid-row: main;\n  min-height: 0;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: stretch;\n  padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n\n  /* size */\n  padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);\n  padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);\n  margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);\n  margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);\n\n  /* color */\n  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n\n  /* border */\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n\n.x-layout__collapse-aside {\n  width: calc(\n    (\n        100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -\n          var(--x-size-margin-layout-columns)\n      ) /\n      var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)\n  );\n}\n\n.x-layout__aside-scroll {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n\n.x-layout__body-scroll {\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 {\n  overflow-y: scroll;\n}\n\n.x-layout__scroll-to-top {\n  /* layout */\n  grid-area: scroll-to-top;\n  justify-content: flex-end;\n  width: 100%;\n  display: flex;\n  z-index: 1;\n  pointer-events: none;\n}\n.x-layout__scroll-to-top-content {\n  flex: 1 0 auto;\n  padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n  padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content > * {\n  pointer-events: all;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n| header-start  | header-middle |  header-end   |\n| :-----------: | :-----------: | :-----------: |\n|  sub-header   |               |               |\n| toolbar-aside |    toolbar    |               |\n|  main-aside   |     main      |               |\n|               |               | scroll-to-top |\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                        token                        | default value |\n| :-------------------------------------------------: | :-----------: |\n|         --x-size-column-gap-layout-columns          |     20px      |\n|     --x-size-padding-top-layout-columns-header      |      0px      |\n|    --x-size-padding-bottom-layout-columns-header    |      0px      |\n|      --x-size-margin-top-layout-columns-header      |      0px      |\n|    --x-size-margin-bottom-layout-columns-header     |      0px      |\n|     --x-color-background-layout-columns-header      |  transparent  |\n|       --x-color-border-layout-columns-header        |  transparent  |\n|     --x-size-border-width-layout-columns-header     |      0px      |\n|        --x-flow-layout-columns-header-start         |  row nowrap   |\n|    --x-size-justify-layout-columns-header-start     |  flex-start   |\n|     --x-size-align-layout-columns-header-start      |  flex-start   |\n|        --x-flow-layout-columns-header-middle        |  row nowrap   |\n|    --x-size-justify-layout-columns-header-middle    |    center     |\n|     --x-size-align-layout-columns-header-middle     |  flex-start   |\n|         --x-flow-layout-columns-header-end          |  row nowrap   |\n|     --x-size-justify-layout-columns-header-end      |   flex-end    |\n|      --x-size-align-layout-columns-header-end       |   flex-end    |\n|   --x-size-padding-top-layout-columns-sub-header    |      0px      |\n|  --x-size-padding-bottom-layout-columns-sub-header  |      0px      |\n|    --x-size-margin-top-layout-columns-sub-header    |      0px      |\n|  --x-size-margin-bottom-layout-columns-sub-header   |      0px      |\n|   --x-color-background-layout-columns-sub-header    |  transparent  |\n|     --x-color-border-layout-columns-sub-header      |  transparent  |\n|   --x-size-border-width-layout-columns-sub-header   |      0px      |\n|         --x-flow-layout-columns-sub-header          |  row nowrap   |\n|     --x-size-justify-layout-columns-sub-header      |  flex-start   |\n|      --x-size-align-layout-columns-sub-header       |  flex-start   |\n|     --x-size-padding-top-layout-columns-toolbar     |      0px      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |      0px      |\n|     --x-size-margin-top-layout-columns-toolbar      |      0px      |\n|    --x-size-margin-bottom-layout-columns-toolbar    |      0px      |\n|     --x-color-background-layout-columns-toolbar     |  transparent  |\n|     --x-color-border-layout-columns-sub-toolbar     |  transparent  |\n|    --x-size-border-width-layout-columns-toolbar     |      0px      |\n|        --x-flow-layout-columns-toolbar-aside        |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-aside    |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-aside     |    center     |\n|        --x-flow-layout-columns-toolbar-body         |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-body     |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-body      |    center     |\n|      --x-size-padding-top-layout-columns-main       |      0px      |\n|     --x-size-padding-bottom-layout-columns-main     |      0px      |\n|       --x-size-margin-top-layout-columns-main       |      0px      |\n|     --x-size-margin-bottom-layout-columns-main      |      0px      |\n|      --x-color-background-layout-columns-main       |  transparent  |\n|      --x-color-border-layout-columns-sub-main       |  transparent  |\n|      --x-size-border-width-layout-columns-main      |      0px      |\n|   --x-color-background-layout-columns-main-aside    |  transparent  |\n|   --x-color-border-layout-columns-sub-main-aside    |  transparent  |\n|   --x-size-border-width-layout-columns-main-aside   |      0px      |\n|    --x-color-background-layout-columns-main-body    |  transparent  |\n|    --x-color-border-layout-columns-sub-main-body    |  transparent  |\n|   --x-size-border-width-layout-columns-main-body    |      0px      |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |     10px      |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |     10px      |\n\n|                        token                        |                   use                    |\n| :-------------------------------------------------: | :--------------------------------------: |\n|         --x-size-column-gap-layout-columns          |         The gap between columns          |\n|     --x-size-padding-top-layout-columns-header      |      The padding top of the header       |\n|    --x-size-padding-bottom-layout-columns-header    |     The padding bottom of the header     |\n|      --x-size-margin-top-layout-columns-header      |       The margin top of the header       |\n|    --x-size-margin-bottom-layout-columns-header     |     The margin bottom of the header      |\n|     --x-color-background-layout-columns-header      |    The background color of the header    |\n|       --x-color-border-layout-columns-header        |      The border color of the header      |\n|     --x-size-border-width-layout-columns-header     |      The border width of the header      |\n|        --x-flow-layout-columns-header-start         |    The flex flow of the start header     |\n|    --x-size-justify-layout-columns-header-start     | The justify content of the start header  |\n|     --x-size-align-layout-columns-header-start      |   The align items of the start header    |\n|        --x-flow-layout-columns-header-middle        |    The flex flow of the middle header    |\n|    --x-size-justify-layout-columns-header-middle    | The justify content of the middle header |\n|     --x-size-align-layout-columns-header-middle     |   The align items of the middle header   |\n|         --x-flow-layout-columns-header-end          |     The flex flow of the end header      |\n|     --x-size-justify-layout-columns-header-end      |  The justify content of the end header   |\n|      --x-size-align-layout-columns-header-end       |    The align items of the end header     |\n|   --x-size-padding-top-layout-columns-sub-header    |   The padding bottom of the sub header   |\n|  --x-size-padding-bottom-layout-columns-sub-header  |    The padding top of the sub header     |\n|    --x-size-margin-top-layout-columns-sub-header    |   The margin bottom of the sub header    |\n|  --x-size-margin-bottom-layout-columns-sub-header   |     The margin top of the sub header     |\n|   --x-color-background-layout-columns-sub-header    |  The background color of the sub header  |\n|     --x-color-border-layout-columns-sub-header      |    The border color of the sub header    |\n|   --x-size-border-width-layout-columns-sub-header   |    The border width of the sub header    |\n|         --x-flow-layout-columns-sub-header          |     The flex flow of the sub header      |\n|     --x-size-justify-layout-columns-sub-header      |  The justify content of the sub header   |\n|      --x-size-align-layout-columns-sub-header       |    The align items of the sub header     |\n|     --x-size-padding-top-layout-columns-toolbar     |      The padding top of the toolbar      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |    The padding bottom of the toolbar     |\n|     --x-size-margin-top-layout-columns-toolbar      |      The margin top of the toolbar       |\n|    --x-size-margin-bottom-layout-columns-toolbar    |     The margin bottom of the toolbar     |\n|     --x-color-background-layout-columns-toolbar     |   The background color of the toolbar    |\n|     --x-color-border-layout-columns-sub-toolbar     |     The border color of the toolbar      |\n|    --x-size-border-width-layout-columns-toolbar     |     The border width of the toolbar      |\n|        --x-flow-layout-columns-toolbar-aside        |    The flex flow of the toolbar aside    |\n|    --x-size-justify-layout-columns-toolbar-aside    | The justify content of the toolbar aside |\n|     --x-size-align-layout-columns-toolbar-aside     |   The align items of the toolbar aside   |\n|        --x-flow-layout-columns-toolbar-body         |  The flex flow of the end toolbar body   |\n|    --x-size-justify-layout-columns-toolbar-body     | Justify content of the end toolbar body  |\n|     --x-size-align-layout-columns-toolbar-body      |   The align items of the toolbar body    |\n|      --x-size-padding-top-layout-columns-main       |       The padding top of the main        |\n|     --x-size-padding-bottom-layout-columns-main     |      The padding bottom of the main      |\n|       --x-size-margin-top-layout-columns-main       |        The margin top of the main        |\n|     --x-size-margin-bottom-layout-columns-main      |      The margin bottom of the main       |\n|      --x-color-background-layout-columns-main       |     The background color of the main     |\n|        --x-color-border-layout-columns-main         |       The border color of the main       |\n|      --x-size-border-width-layout-columns-main      |       The border width of the main       |\n|   --x-color-background-layout-columns-main-aside    |  The background color of the main aside  |\n|     --x-color-border-layout-columns-main-aside      |    The border color of the main aside    |\n|   --x-size-border-width-layout-columns-main-aside   |  The border width of the sub main aside  |\n|    --x-color-background-layout-columns-main-body    |  The background color of the main body   |\n|      --x-color-border-layout-columns-main-body      |    The border color of the main body     |\n|   --x-size-border-width-layout-columns-main-body    |  The border width of the sub main body   |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |  The margin bottom of the scroll to top  |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |   The margin left of the scroll to top   |\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","devMode","_normalizeClass","_normalizeStyle","_renderSlot","_createCommentVNode","$slots","_createElementVNode","_createBlock","_withCtx","_createVNode"],"mappings":"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"}
+{"version":3,"file":"multi-column-max-width-layout.vue.js","sources":["../../../../src/components/layouts/multi-column-max-width-layout.vue"],"sourcesContent":["<template>\n  <div\n    class=\"x-layout x-layout--columns\"\n    :class=\"{ 'dev-mode': devMode }\"\n    :style=\"{ height: devMode || $slots['main-body'] ? '100%' : 'auto' }\"\n  >\n    <header class=\"x-layout__header\">\n      <div v-if=\"devMode || $slots['header-start']\" class=\"x-list x-layout__header-start\">\n        <!-- @slot Slot that can be used to insert content into the left part of the header. -->\n        <slot name=\"header-start\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER START</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-middle']\" class=\"x-list x-layout__header-middle\">\n        <!-- @slot Slot that can be used to insert content into the center part of the header. -->\n        <slot name=\"header-middle\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER MIDDLE</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-end']\" class=\"x-list x-layout__header-end\">\n        <!-- @slot Slot that can be used to insert content into the right part of the header. -->\n        <slot name=\"header-end\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER END</span>\n        </slot>\n      </div>\n    </header>\n\n    <div v-if=\"devMode || $slots['sub-header']\" class=\"x-layout__sub-header\">\n      <div class=\"x-layout__sub-header-content\">\n        <!-- @slot Slot that can be used to insert content into below the header. -->\n        <slot name=\"sub-header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n        </slot>\n      </div>\n    </div>\n\n    <section\n      v-if=\"devMode || $slots['toolbar-aside'] || $slots['toolbar-body']\"\n      class=\"x-layout__toolbar\"\n    >\n      <aside class=\"x-list x-layout__toolbar-aside\">\n        <slot name=\"toolbar-aside\">\n          <!-- @slot Slot that can be used to insert content above the left aside. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR ASIDE</span>\n        </slot>\n      </aside>\n\n      <div class=\"x-list x-layout__toolbar-body\">\n        <!-- @slot Slot that can be used to insert content above the body. -->\n        <slot name=\"toolbar-body\">\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR BODY</span>\n        </slot>\n      </div>\n    </section>\n\n    <main class=\"x-layout__main\">\n      <BaseIdTogglePanel\n        v-if=\"devMode || $slots['main-aside']\"\n        panel-id=\"aside-panel\"\n        :animation=\"asideAnimation\"\n        class=\"x-layout__collapse-aside\"\n      >\n        <Scroll id=\"aside-scroll\" class=\"x-layout__aside-scroll\">\n          <div class=\"x-layout__main-aside x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert content into the left side bar. -->\n            <slot name=\"main-aside\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN ASIDE</span>\n            </slot>\n          </div>\n        </Scroll>\n      </BaseIdTogglePanel>\n\n      <MainScroll class=\"x-flex x-flex-auto\">\n        <Scroll\n          v-if=\"devMode || $slots['main-body']\"\n          id=\"main-scroll\"\n          class=\"x-layout__body-scroll\"\n        >\n          <section class=\"x-layout__main-body x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert the body content. -->\n            <slot name=\"main-body\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN BODY</span>\n            </slot>\n          </section>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"devMode || $slots['scroll-to-top']\" class=\"x-layout__scroll-to-top\">\n      <div class=\"x-layout__scroll-to-top-content\">\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 50px\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport AnimateWidth from '../animations/animate-width.vue'\nimport BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue'\n\n/**\n * Component for use as Layout to be filled with the rest of the Components.\n *\n * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'MultiColumnMaxWidthLayout',\n  components: { BaseIdTogglePanel, MainScroll, Scroll },\n  props: {\n    /** The animation used for the Main Aside. */\n    asideAnimation: {\n      type: AnimationProp,\n      default: () => AnimateWidth,\n    },\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n})\n</script>\n\n<style lang=\"css\">\n:root {\n  /* layout */\n  --x-size-min-margin-layout-columns: var(--x-size-base-06);\n  --x-size-column-gap-layout-columns: var(--x-size-base-06);\n\n  /* spacing */\n\n  /* size - header */\n  --x-size-padding-top-layout-columns-header: var(--x-size-base-07);\n  --x-size-padding-bottom-layout-columns-header: var(--x-size-base-05);\n\n  /* size - toolbar */\n  --x-size-padding-top-layout-columns-toolbar: var(--x-size-base-05);\n  --x-size-padding-bottom-layout-columns-toolbar: var(--x-size-base-03);\n\n  /* size- scroll-to-top */\n  --x-size-margin-bottom-layout-columns-scroll-to-top: var(--x-size-base-03);\n  --x-size-margin-left-layout-columns-scroll-to-top: var(--x-size-base-03);\n\n  /* color */\n  --x-color-background-layout-columns: var(--x-color-base-neutral-100);\n  --x-color-border-layout-columns: var(--x-color-base-neutral-70);\n  --x-color-border-layout-columns-header: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-sub-header: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-toolbar: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main-aside: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main-body: var(--x-color-border-layout-columns);\n\n  /* border */\n  --x-size-border-width-layout-columns-header: 0;\n  --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n}\n</style>\n\n<style lang=\"css\" scoped>\n@import url('../../styles/dev-mode.css');\n\n.x-layout {\n  /* custom properties */\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\n  /* layout */\n  display: grid;\n  align-content: stretch;\n  max-height: 100%;\n\n  grid-template-columns:\n    [page-start]\n    1fr\n    [scroll-to-top-start]\n    calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default))\n    [scroll-to-top-end page-end];\n\n  grid-template-rows:\n    [page-start header-start]\n    auto\n    [header-end sub-header-start]\n    auto\n    [sub-header-end toolbar-start]\n    auto\n    [toolbar-end main-start]\n    1fr\n    [scroll-to-top-start]\n    auto\n    [main-end scroll-to-top-end page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n\n  grid-template-columns:\n    [header-start]\n    var(--x-size-margin-layout-columns)\n    [start-content-start]\n    1fr\n    [start-content-end middle-content-start]\n    repeat(var(--x-number-columns-header-middle), 1fr)\n    [middle-content-end end-content-start]\n    1fr\n    [end-content-end]\n    var(--x-size-margin-layout-columns)\n    [header-end];\n\n  /* size */\n  padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);\n  padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);\n  margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);\n  margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);\n\n  /* color */\n  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, transparent);\n\n  /* border */\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n\n.x-layout__header-start {\n  /* layout */\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list {\n  /* space */\n  flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n  align-items: var(--x-size-align-layout-columns-header-start, flex start);\n}\n\n.x-layout__header-middle {\n  /* layout */\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list {\n  /* space */\n  flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n  align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n}\n\n.x-layout__header-end {\n  /* layout */\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list {\n  flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n  align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n\n  grid-template-columns:\n    [sub-header-start]\n    var(--x-size-margin-layout-columns)\n    1fr\n    [sub-header-content-start]\n    repeat(var(--x-number-columns-sub-header-content), 1fr)\n    [sub-header-content-end]\n    1fr\n    var(--x-size-margin-layout-columns)\n    [sub-header-end];\n\n  /* size */\n  padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);\n  padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n  margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);\n  margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n\n  /* color */\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\n  /* border */\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n\n.x-layout__sub-header-content {\n  /* layout */\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list {\n  flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n  align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n\n  grid-template-columns:\n    [toolbar-start]\n    var(--x-size-margin-layout-columns)\n    [toolbar-aside-start]\n    1fr\n    [toolbar-aside-end toolbar-body-start]\n    repeat(var(--x-number-columns-toolbar-body), 1fr)\n    [toolbar-body-end]\n    var(--x-size-margin-layout-columns)\n    [toolbar-end];\n\n  /* size */\n  padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);\n  padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n  margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);\n  margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n\n  /* color */\n  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n\n  /* border */\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n\n.x-layout__toolbar-aside {\n  /* layout */\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list {\n  flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n  align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n}\n\n.x-layout__toolbar-body {\n  /* layout */\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list {\n  flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n  align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n}\n\n.x-layout__main {\n  /* layout */\n  grid-column: page;\n  grid-row: main;\n  min-height: 0;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: stretch;\n  padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n\n  /* size */\n  padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);\n  padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);\n  margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);\n  margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);\n\n  /* color */\n  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n\n  /* border */\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n\n.x-layout__collapse-aside {\n  width: calc(\n    (\n        100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -\n          var(--x-size-margin-layout-columns)\n      ) /\n      var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)\n  );\n}\n\n.x-layout__aside-scroll {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n\n.x-layout__body-scroll {\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 {\n  overflow-y: scroll;\n}\n\n.x-layout__scroll-to-top {\n  /* layout */\n  grid-area: scroll-to-top;\n  justify-content: flex-end;\n  width: 100%;\n  display: flex;\n  z-index: 1;\n  pointer-events: none;\n}\n.x-layout__scroll-to-top-content {\n  flex: 1 0 auto;\n  padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n  padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content > * {\n  pointer-events: all;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n| header-start  | header-middle |  header-end   |\n| :-----------: | :-----------: | :-----------: |\n|  sub-header   |               |               |\n| toolbar-aside |    toolbar    |               |\n|  main-aside   |     main      |               |\n|               |               | scroll-to-top |\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                        token                        | default value |\n| :-------------------------------------------------: | :-----------: |\n|         --x-size-column-gap-layout-columns          |     20px      |\n|     --x-size-padding-top-layout-columns-header      |      0px      |\n|    --x-size-padding-bottom-layout-columns-header    |      0px      |\n|      --x-size-margin-top-layout-columns-header      |      0px      |\n|    --x-size-margin-bottom-layout-columns-header     |      0px      |\n|     --x-color-background-layout-columns-header      |  transparent  |\n|       --x-color-border-layout-columns-header        |  transparent  |\n|     --x-size-border-width-layout-columns-header     |      0px      |\n|        --x-flow-layout-columns-header-start         |  row nowrap   |\n|    --x-size-justify-layout-columns-header-start     |  flex-start   |\n|     --x-size-align-layout-columns-header-start      |  flex-start   |\n|        --x-flow-layout-columns-header-middle        |  row nowrap   |\n|    --x-size-justify-layout-columns-header-middle    |    center     |\n|     --x-size-align-layout-columns-header-middle     |  flex-start   |\n|         --x-flow-layout-columns-header-end          |  row nowrap   |\n|     --x-size-justify-layout-columns-header-end      |   flex-end    |\n|      --x-size-align-layout-columns-header-end       |   flex-end    |\n|   --x-size-padding-top-layout-columns-sub-header    |      0px      |\n|  --x-size-padding-bottom-layout-columns-sub-header  |      0px      |\n|    --x-size-margin-top-layout-columns-sub-header    |      0px      |\n|  --x-size-margin-bottom-layout-columns-sub-header   |      0px      |\n|   --x-color-background-layout-columns-sub-header    |  transparent  |\n|     --x-color-border-layout-columns-sub-header      |  transparent  |\n|   --x-size-border-width-layout-columns-sub-header   |      0px      |\n|         --x-flow-layout-columns-sub-header          |  row nowrap   |\n|     --x-size-justify-layout-columns-sub-header      |  flex-start   |\n|      --x-size-align-layout-columns-sub-header       |  flex-start   |\n|     --x-size-padding-top-layout-columns-toolbar     |      0px      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |      0px      |\n|     --x-size-margin-top-layout-columns-toolbar      |      0px      |\n|    --x-size-margin-bottom-layout-columns-toolbar    |      0px      |\n|     --x-color-background-layout-columns-toolbar     |  transparent  |\n|     --x-color-border-layout-columns-sub-toolbar     |  transparent  |\n|    --x-size-border-width-layout-columns-toolbar     |      0px      |\n|        --x-flow-layout-columns-toolbar-aside        |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-aside    |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-aside     |    center     |\n|        --x-flow-layout-columns-toolbar-body         |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-body     |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-body      |    center     |\n|      --x-size-padding-top-layout-columns-main       |      0px      |\n|     --x-size-padding-bottom-layout-columns-main     |      0px      |\n|       --x-size-margin-top-layout-columns-main       |      0px      |\n|     --x-size-margin-bottom-layout-columns-main      |      0px      |\n|      --x-color-background-layout-columns-main       |  transparent  |\n|      --x-color-border-layout-columns-sub-main       |  transparent  |\n|      --x-size-border-width-layout-columns-main      |      0px      |\n|   --x-color-background-layout-columns-main-aside    |  transparent  |\n|   --x-color-border-layout-columns-sub-main-aside    |  transparent  |\n|   --x-size-border-width-layout-columns-main-aside   |      0px      |\n|    --x-color-background-layout-columns-main-body    |  transparent  |\n|    --x-color-border-layout-columns-sub-main-body    |  transparent  |\n|   --x-size-border-width-layout-columns-main-body    |      0px      |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |     10px      |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |     10px      |\n\n|                        token                        |                   use                    |\n| :-------------------------------------------------: | :--------------------------------------: |\n|         --x-size-column-gap-layout-columns          |         The gap between columns          |\n|     --x-size-padding-top-layout-columns-header      |      The padding top of the header       |\n|    --x-size-padding-bottom-layout-columns-header    |     The padding bottom of the header     |\n|      --x-size-margin-top-layout-columns-header      |       The margin top of the header       |\n|    --x-size-margin-bottom-layout-columns-header     |     The margin bottom of the header      |\n|     --x-color-background-layout-columns-header      |    The background color of the header    |\n|       --x-color-border-layout-columns-header        |      The border color of the header      |\n|     --x-size-border-width-layout-columns-header     |      The border width of the header      |\n|        --x-flow-layout-columns-header-start         |    The flex flow of the start header     |\n|    --x-size-justify-layout-columns-header-start     | The justify content of the start header  |\n|     --x-size-align-layout-columns-header-start      |   The align items of the start header    |\n|        --x-flow-layout-columns-header-middle        |    The flex flow of the middle header    |\n|    --x-size-justify-layout-columns-header-middle    | The justify content of the middle header |\n|     --x-size-align-layout-columns-header-middle     |   The align items of the middle header   |\n|         --x-flow-layout-columns-header-end          |     The flex flow of the end header      |\n|     --x-size-justify-layout-columns-header-end      |  The justify content of the end header   |\n|      --x-size-align-layout-columns-header-end       |    The align items of the end header     |\n|   --x-size-padding-top-layout-columns-sub-header    |   The padding bottom of the sub header   |\n|  --x-size-padding-bottom-layout-columns-sub-header  |    The padding top of the sub header     |\n|    --x-size-margin-top-layout-columns-sub-header    |   The margin bottom of the sub header    |\n|  --x-size-margin-bottom-layout-columns-sub-header   |     The margin top of the sub header     |\n|   --x-color-background-layout-columns-sub-header    |  The background color of the sub header  |\n|     --x-color-border-layout-columns-sub-header      |    The border color of the sub header    |\n|   --x-size-border-width-layout-columns-sub-header   |    The border width of the sub header    |\n|         --x-flow-layout-columns-sub-header          |     The flex flow of the sub header      |\n|     --x-size-justify-layout-columns-sub-header      |  The justify content of the sub header   |\n|      --x-size-align-layout-columns-sub-header       |    The align items of the sub header     |\n|     --x-size-padding-top-layout-columns-toolbar     |      The padding top of the toolbar      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |    The padding bottom of the toolbar     |\n|     --x-size-margin-top-layout-columns-toolbar      |      The margin top of the toolbar       |\n|    --x-size-margin-bottom-layout-columns-toolbar    |     The margin bottom of the toolbar     |\n|     --x-color-background-layout-columns-toolbar     |   The background color of the toolbar    |\n|     --x-color-border-layout-columns-sub-toolbar     |     The border color of the toolbar      |\n|    --x-size-border-width-layout-columns-toolbar     |     The border width of the toolbar      |\n|        --x-flow-layout-columns-toolbar-aside        |    The flex flow of the toolbar aside    |\n|    --x-size-justify-layout-columns-toolbar-aside    | The justify content of the toolbar aside |\n|     --x-size-align-layout-columns-toolbar-aside     |   The align items of the toolbar aside   |\n|        --x-flow-layout-columns-toolbar-body         |  The flex flow of the end toolbar body   |\n|    --x-size-justify-layout-columns-toolbar-body     | Justify content of the end toolbar body  |\n|     --x-size-align-layout-columns-toolbar-body      |   The align items of the toolbar body    |\n|      --x-size-padding-top-layout-columns-main       |       The padding top of the main        |\n|     --x-size-padding-bottom-layout-columns-main     |      The padding bottom of the main      |\n|       --x-size-margin-top-layout-columns-main       |        The margin top of the main        |\n|     --x-size-margin-bottom-layout-columns-main      |      The margin bottom of the main       |\n|      --x-color-background-layout-columns-main       |     The background color of the main     |\n|        --x-color-border-layout-columns-main         |       The border color of the main       |\n|      --x-size-border-width-layout-columns-main      |       The border width of the main       |\n|   --x-color-background-layout-columns-main-aside    |  The background color of the main aside  |\n|     --x-color-border-layout-columns-main-aside      |    The border color of the main aside    |\n|   --x-size-border-width-layout-columns-main-aside   |  The border width of the sub main aside  |\n|    --x-color-background-layout-columns-main-body    |  The background color of the main body   |\n|      --x-color-border-layout-columns-main-body      |    The border color of the main body     |\n|   --x-size-border-width-layout-columns-main-body    |  The border width of the sub main body   |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |  The margin bottom of the scroll to top  |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |   The margin left of the scroll to top   |\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","devMode","_normalizeClass","_normalizeStyle","_renderSlot","_createCommentVNode","$slots","_createElementVNode","_createBlock","_withCtx","_createVNode"],"mappings":"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"}