@empathyco/x-components 6.0.0-alpha.23 → 6.0.0-alpha.230

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

@@ -1,5 +1,5 @@
 import _sfc_main from './fixed-header-and-asides-layout.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, renderSlot, createCommentVNode } from 'vue';
 import './fixed-header-and-asides-layout.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -63,9 +63,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_MainScroll, null, {
     default: withCtx(() => [
       createVNode(_component_Scroll, {
-        onScroll: _ctx.setPosition,
         id: "main-scroll",
-        class: normalizeClass(["x-layout x-layout--fixed-header-and-asides", { "dev-mode": _ctx.devMode }])
+        class: normalizeClass(["x-layout x-layout--fixed-header-and-asides", { "dev-mode": _ctx.devMode }]),
+        onScroll: _ctx.setPosition
       }, {
         default: withCtx(() => [
           createElementVNode(
@@ -78,28 +78,24 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             2
             /* CLASS */
           ),
-          _ctx.devMode || _ctx.$slots["header"] ? (openBlock(), createElementBlock("header", _hoisted_1, [
-            createCommentVNode(" @slot Slot that is be used for insert content into the Header. "),
+          _ctx.devMode || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1, [
             renderSlot(_ctx.$slots, "header", {}, () => [
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_2, "HEADER")) : createCommentVNode("v-if", true)
             ], true)
           ])) : createCommentVNode("v-if", true),
           _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
             createElementVNode("div", _hoisted_4, [
-              createCommentVNode(" @slot Slot that can be used to insert content into below the header. "),
               renderSlot(_ctx.$slots, "sub-header", {}, () => [
                 _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_5, "SUB HEADER")) : createCommentVNode("v-if", true)
               ], true)
             ])
           ])) : createCommentVNode("v-if", true),
-          _ctx.devMode || _ctx.$slots["toolbar"] ? (openBlock(), createElementBlock("section", _hoisted_6, [
+          _ctx.devMode || _ctx.$slots.toolbar ? (openBlock(), createElementBlock("section", _hoisted_6, [
             renderSlot(_ctx.$slots, "toolbar", {}, () => [
-              createCommentVNode(" @slot Slot that can be used to insert content above the main. "),
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_7, "TOOLBAR")) : createCommentVNode("v-if", true)
             ], true)
           ])) : createCommentVNode("v-if", true),
-          _ctx.devMode || _ctx.$slots["main"] ? (openBlock(), createElementBlock("main", _hoisted_8, [
-            createCommentVNode(" @slot Slot that is be used for insert content into the Main. "),
+          _ctx.devMode || _ctx.$slots.main ? (openBlock(), createElementBlock("main", _hoisted_8, [
             renderSlot(_ctx.$slots, "main", {}, () => [
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_9, "MAIN")) : createCommentVNode("v-if", true)
             ], true)
@@ -107,11 +103,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.devMode || _ctx.$slots["left-aside"] ? (openBlock(), createBlock(_component_BaseIdModal, {
             key: "left-aside",
             animation: _ctx.leftAsideAnimation,
-            modalId: "left-aside",
+            "modal-id": "left-aside",
             class: "x-layout__aside x-layout__aside--left"
           }, {
             default: withCtx(() => [
-              createCommentVNode(" @slot Slot that is be used for insert content into the left aside. "),
               renderSlot(_ctx.$slots, "left-aside", {}, () => [
                 _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "LEFT ASIDE")) : createCommentVNode("v-if", true)
               ], true)
@@ -122,11 +117,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.devMode || _ctx.$slots["right-aside"] ? (openBlock(), createBlock(_component_BaseIdModal, {
             key: "right-aside",
             animation: _ctx.rightAsideAnimation,
-            modalId: "right-aside",
+            "modal-id": "right-aside",
             class: "x-layout__aside x-layout__aside--right"
           }, {
             default: withCtx(() => [
-              createCommentVNode(" @slot Slot that is be used for insert content into the right aside. "),
               renderSlot(_ctx.$slots, "right-aside", {}, () => [
                 _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_11, "RIGHT ASIDE")) : createCommentVNode("v-if", true)
               ], true)
@@ -145,7 +139,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["onScroll", "class"])
+      }, 8, ["class", "onScroll"])
     ]),
     _: 3
     /* FORWARDED */

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      @scroll=\"setPosition\"\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\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\n        v-if=\"devMode || $slots['main']\"\n        key=\"main\"\n        class=\"x-layout__main x-list x-list--vertical\"\n      >\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        modalId=\"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        modalId=\"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\">\n  import { computed, defineComponent, ref } from 'vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.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   */\n  export 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","setPosition","_normalizeClass","_createElementVNode","devMode","$slots","_createElementBlock","_createCommentVNode","_renderSlot","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, h, 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.vue'\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 = h(AnimateTranslate, { animationOrigin: 'right' })\n    const leftAsideAnimation = h(AnimateTranslate, { animationOrigin: '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.dev-mode .slot-helper {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\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 provides a multi-column 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 exposes the following `Design Tokens` for configuration:\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\n## Example\n\n```vue\n<template>\n  <FixedHeaderAndAsidesLayout>\n    <template #header>Header content</template>\n    <template #sub-header>Sub-header content</template>\n    <template #toolbar>Toolbar content</template>\n    <template #main>Main content</template>\n    <template #left-aside>Left aside content</template>\n    <template #right-aside>Right aside content</template>\n    <template #extra-aside>Extra aside content</template>\n    <template #scroll-to-top>Scroll to top content</template>\n  </FixedHeaderAndAsidesLayout>\n</template>\n\n<script setup>\nimport FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_createVNode","_normalizeClass","_createElementVNode","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode"],"mappings":"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"}

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

@@ -1,38 +1,39 @@
-import { defineComponent, ref, computed } from 'vue';
-import { animateTranslate } from '../animations/animate-translate/animate-translate.factory.js';
+import { defineComponent, ref, h, computed } from 'vue';
+import _sfc_main$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
 import Scroll from '../../x-modules/scroll/components/scroll.vue.js';
+import _sfc_main$2 from '../animations/animate-translate.vue.js';
+import '../animations/animate-translate.vue2.js';
 import BaseIdModal from '../modals/base-id-modal.vue.js';
-import _sfc_main$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
 
-/**
- * Component for use as Layout to be filled with the rest of the components.
- *
- * @deprecated - The layout has been deprecated in favor of using new XDS layout.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'FixedHeaderAndAsidesLayout',
-    components: { BaseIdModal, MainScroll: _sfc_main$1, Scroll },
-    props: {
-        /** Enables the devMode, which shows the available slots to use with its names. */
-        devMode: Boolean
-    },
-    setup() {
-        const scrollPosition = ref(0);
-        const rightAsideAnimation = animateTranslate('right');
-        const leftAsideAnimation = animateTranslate('left');
-        const setPosition = (position) => {
-            scrollPosition.value = position;
-        };
-        const isBackdropVisible = computed(() => scrollPosition.value > 0);
-        return {
-            rightAsideAnimation,
-            leftAsideAnimation,
-            setPosition,
-            isBackdropVisible
-        };
-    }
+/**
+ * Component for use as Layout to be filled with the rest of the components.
+ *
+ * @deprecated - The layout has been deprecated in favor of using new XDS layout.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'FixedHeaderAndAsidesLayout',
+    components: { BaseIdModal, MainScroll: _sfc_main$1, Scroll },
+    props: {
+        /** Enables the devMode, which shows the available slots to use with its names. */
+        devMode: Boolean,
+    },
+    setup() {
+        const scrollPosition = ref(0);
+        const rightAsideAnimation = h(_sfc_main$2, { animationOrigin: 'right' });
+        const leftAsideAnimation = h(_sfc_main$2, { animationOrigin: 'left' });
+        const setPosition = (position) => {
+            scrollPosition.value = position;
+        };
+        const isBackdropVisible = computed(() => scrollPosition.value > 0);
+        return {
+            rightAsideAnimation,
+            leftAsideAnimation,
+            setPosition,
+            isBackdropVisible,
+        };
+    },
 });
 
 export { _sfc_main as default };

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      @scroll=\"setPosition\"\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\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\n        v-if=\"devMode || $slots['main']\"\n        key=\"main\"\n        class=\"x-layout__main x-list x-list--vertical\"\n      >\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        modalId=\"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        modalId=\"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\">\n  import { computed, defineComponent, ref } from 'vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.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   */\n  export 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":";;;;;;AAsGE;;;;;;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,OAAM;AAChB,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,cAAe,GAAE,GAAG,CAAC,CAAC,CAAC,CAAA;AAE7B,QAAA,MAAM,mBAAoB,GAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;AACrD,QAAA,MAAM,kBAAmB,GAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;AAEnD,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAK;AACxC,YAAA,cAAc,CAAC,KAAI,GAAI,QAAQ,CAAA;AACjC,SAAC,CAAA;AACD,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAI,GAAI,CAAC,CAAC,CAAA;QAElE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAgB;SACjB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"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, h, 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.vue'\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 = h(AnimateTranslate, { animationOrigin: 'right' })\n    const leftAsideAnimation = h(AnimateTranslate, { animationOrigin: '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.dev-mode .slot-helper {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\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 provides a multi-column 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 exposes the following `Design Tokens` for configuration:\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\n## Example\n\n```vue\n<template>\n  <FixedHeaderAndAsidesLayout>\n    <template #header>Header content</template>\n    <template #sub-header>Sub-header content</template>\n    <template #toolbar>Toolbar content</template>\n    <template #main>Main content</template>\n    <template #left-aside>Left aside content</template>\n    <template #right-aside>Right aside content</template>\n    <template #extra-aside>Extra aside content</template>\n    <template #scroll-to-top>Scroll to top content</template>\n  </FixedHeaderAndAsidesLayout>\n</template>\n\n<script setup>\nimport FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'\n</script>\n```\n</docs>\n"],"names":["MainScroll","AnimateTranslate"],"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;AAE5B,QAAA,MAAM,mBAAkB,GAAI,CAAC,CAACC,WAAgB,EAAE,EAAE,eAAe,EAAE,SAAS,CAAA;AAC5E,QAAA,MAAM,kBAAiB,GAAI,CAAC,CAACA,WAAgB,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAA;AAE1E,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAG;AACtC,YAAA,cAAc,CAAC,KAAI,GAAI,QAAO;AAChC,QAAA,CAAA;AACA,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAI,GAAI,CAAC,CAAA;QAEjE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAiB;SACnB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import injectCss from '../../../tools/inject-css.js';
 
-var css = ".dev-mode .slot-helper{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-d5a25402]{--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout, 1440px))/2);--x-size-margin-layout:max(var(--x-size-min-margin-layout,20px),var(--x-size-margin-max-width));align-content:stretch;display:grid;grid-template-columns:[page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];max-height:100%;min-height:100%}.x-layout__header[data-v-d5a25402]{background:var(--x-color-background-layout-header,transparent);border-color:var(--x-size-border-color-layout-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-header,0);grid-column:page;grid-row:header;max-height:var(--x-size-max-height-layout-header,auto);padding:0 var(--x-size-margin-layout);position:sticky;top:-.5px;z-index:2}.x-layout__sub-header[data-v-d5a25402]{background:var(--x-color-background-layout-sub-header,transparent);border-color:var(--x-size-border-color-layout-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-sub-header,0);grid-column:page;grid-row:sub-header;padding:0 var(--x-size-margin-layout)}.x-layout__toolbar[data-v-d5a25402]{grid-column:max-width;grid-row:toolbar}.x-layout__main[data-v-d5a25402]{grid-column:max-width;grid-row:main}.x-layout[data-v-d5a25402] .x-layout__aside.x-modal{flex-flow:row nowrap;z-index:3}.x-layout[data-v-d5a25402] .x-layout__aside--right.x-modal{justify-content:flex-end}.x-layout[data-v-d5a25402] .x-layout__aside{pointer-events:none}.x-layout[data-v-d5a25402] .x-layout__aside>:not(.slot-helper){pointer-events:all}.x-layout__scroll-to-top[data-v-d5a25402]{bottom:var(--x-size-margin-bottom-layout-scroll-to-top,16px);position:fixed;right:var(--x-size-margin-right-layout-scroll-to-top,16px);z-index:1}.x-layout__header-backdrop[data-v-d5a25402]{background-color:var(\n      --x-color-background-layout-header-backdrop,var(--x-color-base-neutral-100,#fff)\n    );grid-column:page;grid-row:page;height:var(--x-size-height-layout-backdrop,40vh);mask:linear-gradient(180deg,rgba(0,0,0,.8),transparent);opacity:0;pointer-events:none;position:sticky;top:-.5px;transition:opacity .2s ease-out;width:100%;z-index:1}.x-layout__header-backdrop--is-visible[data-v-d5a25402]{opacity:1}.x-layout[data-v-d5a25402] .x-layout__aside .x-modal__content{background-color:transparent;height:100%;width:var(--x-size-width-layout-aside,300px)}";
+var css = ".dev-mode .slot-helper[data-v-d5a25402]{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-d5a25402]{--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout, 1440px))/2);--x-size-margin-layout:max(var(--x-size-min-margin-layout,20px),var(--x-size-margin-max-width));align-content:stretch;display:grid;grid-template-columns:[page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];max-height:100%;min-height:100%}.x-layout__header[data-v-d5a25402]{background:var(--x-color-background-layout-header,transparent);border-color:var(--x-size-border-color-layout-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-header,0);grid-column:page;grid-row:header;max-height:var(--x-size-max-height-layout-header,auto);padding:0 var(--x-size-margin-layout);position:sticky;top:-.5px;z-index:2}.x-layout__sub-header[data-v-d5a25402]{background:var(--x-color-background-layout-sub-header,transparent);border-color:var(--x-size-border-color-layout-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-sub-header,0);grid-column:page;grid-row:sub-header;padding:0 var(--x-size-margin-layout)}.x-layout__toolbar[data-v-d5a25402]{grid-column:max-width;grid-row:toolbar}.x-layout__main[data-v-d5a25402]{grid-column:max-width;grid-row:main}.x-layout[data-v-d5a25402] .x-layout__aside.x-modal{flex-flow:row nowrap;z-index:3}.x-layout[data-v-d5a25402] .x-layout__aside--right.x-modal{justify-content:flex-end}.x-layout[data-v-d5a25402] .x-layout__aside{pointer-events:none}.x-layout[data-v-d5a25402] .x-layout__aside>:not(.slot-helper){pointer-events:all}.x-layout__scroll-to-top[data-v-d5a25402]{bottom:var(--x-size-margin-bottom-layout-scroll-to-top,16px);position:fixed;right:var(--x-size-margin-right-layout-scroll-to-top,16px);z-index:1}.x-layout__header-backdrop[data-v-d5a25402]{background-color:var(\n    --x-color-background-layout-header-backdrop,var(--x-color-base-neutral-100,#fff)\n  );grid-column:page;grid-row:page;height:var(--x-size-height-layout-backdrop,40vh);mask:linear-gradient(180deg,rgba(0,0,0,.8),transparent);opacity:0;pointer-events:none;position:sticky;top:-.5px;transition:opacity .2s ease-out;width:100%;z-index:1}.x-layout__header-backdrop--is-visible[data-v-d5a25402]{opacity:1}.x-layout[data-v-d5a25402] .x-layout__aside .x-modal__content{background-color:transparent;height:100%;width:var(--x-size-width-layout-aside,300px)}";
 injectCss(css);
 
-export { css, css as default };
+export { css };
 //# sourceMappingURL=fixed-header-and-asides-layout.vue3.js.map

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

@@ -1,5 +1,5 @@
 import _sfc_main from './multi-column-max-width-layout.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createCommentVNode, renderSlot, createBlock, withCtx, createVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, renderSlot, createCommentVNode, createBlock, withCtx, createVNode } from 'vue';
 import './multi-column-max-width-layout.vue3.js';
 import './multi-column-max-width-layout.vue4.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
@@ -88,19 +88,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [
       createElementVNode("header", _hoisted_1, [
         _ctx.devMode || _ctx.$slots["header-start"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createCommentVNode(" @slot Slot that can be used to insert content into the left part of the header. "),
           renderSlot(_ctx.$slots, "header-start", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_3, "HEADER START")) : createCommentVNode("v-if", true)
           ], true)
         ])) : createCommentVNode("v-if", true),
         _ctx.devMode || _ctx.$slots["header-middle"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createCommentVNode(" @slot Slot that can be used to insert content into the center part of the header. "),
           renderSlot(_ctx.$slots, "header-middle", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_5, "HEADER MIDDLE")) : createCommentVNode("v-if", true)
           ], true)
         ])) : createCommentVNode("v-if", true),
         _ctx.devMode || _ctx.$slots["header-end"] ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          createCommentVNode(" @slot Slot that can be used to insert content into the right part of the header. "),
           renderSlot(_ctx.$slots, "header-end", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_7, "HEADER END")) : createCommentVNode("v-if", true)
           ], true)
@@ -108,7 +105,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_8, [
         createElementVNode("div", _hoisted_9, [
-          createCommentVNode(" @slot Slot that can be used to insert content into below the header. "),
           renderSlot(_ctx.$slots, "sub-header", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "SUB HEADER")) : createCommentVNode("v-if", true)
           ], true)
@@ -117,12 +113,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.devMode || _ctx.$slots["toolbar-aside"] || _ctx.$slots["toolbar-body"] ? (openBlock(), createElementBlock("section", _hoisted_11, [
         createElementVNode("aside", _hoisted_12, [
           renderSlot(_ctx.$slots, "toolbar-aside", {}, () => [
-            createCommentVNode(" @slot Slot that can be used to insert content above the left aside. "),
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_13, "TOOLBAR ASIDE")) : createCommentVNode("v-if", true)
           ], true)
         ]),
         createElementVNode("div", _hoisted_14, [
-          createCommentVNode(" @slot Slot that can be used to insert content above the body. "),
           renderSlot(_ctx.$slots, "toolbar-body", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_15, "TOOLBAR BODY")) : createCommentVNode("v-if", true)
           ], true)
@@ -131,7 +125,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("main", _hoisted_16, [
         _ctx.devMode || _ctx.$slots["main-aside"] ? (openBlock(), createBlock(_component_BaseIdTogglePanel, {
           key: 0,
-          panelId: "aside-panel",
+          "panel-id": "aside-panel",
           animation: _ctx.asideAnimation,
           class: "x-layout__collapse-aside"
         }, {
@@ -142,7 +136,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(() => [
                 createElementVNode("div", _hoisted_17, [
-                  createCommentVNode(" @slot Slot that can be used to insert content into the left side bar. "),
                   renderSlot(_ctx.$slots, "main-aside", {}, () => [
                     _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_18, "MAIN ASIDE")) : createCommentVNode("v-if", true)
                   ], true)
@@ -164,7 +157,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(() => [
                 createElementVNode("section", _hoisted_19, [
-                  createCommentVNode(" @slot Slot that can be used to insert the body content. "),
                   renderSlot(_ctx.$slots, "main-body", {}, () => [
                     _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_20, "MAIN BODY")) : createCommentVNode("v-if", true)
                   ], true)

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        panelId=\"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\">\n  import { defineComponent } from 'vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import AnimateWidth from '../animations/animate-width.vue';\n  import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n  import { AnimationProp } from '../../types';\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   */\n  export 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        ) / 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","_createCommentVNode","_renderSlot","$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.dev-mode .slot-helper {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\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__main-body {\n  overflow-x: hidden;\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 provides a multi-column 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 exposes the following `Design Tokens` for configuration:\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\n## Example\n\n```vue\n<template>\n  <MultiColumnMaxWidthLayout>\n    <template #header>Header content</template>\n    <template #sub-header>Sub-header content</template>\n    <template #toolbar>Toolbar content</template>\n    <template #main>Main content</template>\n    <template #left-aside>Left aside content</template>\n    <template #right-aside>Right aside content</template>\n    <template #extra-aside>Extra aside content</template>\n  </MultiColumnMaxWidthLayout>\n</template>\n\n<script setup>\nimport MultiColumnMaxWidthLayout from '@empathyco/x-components/js/components/layouts/multi-column-max-width-layout.vue'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_renderSlot","_createCommentVNode","_createBlock","_createVNode","_withCtx"],"mappings":"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"}

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

@@ -1,29 +1,29 @@
 import { defineComponent } from 'vue';
-import Scroll from '../../x-modules/scroll/components/scroll.vue.js';
+import { AnimationProp } from '../../types/animation-prop.js';
 import _sfc_main$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
+import Scroll from '../../x-modules/scroll/components/scroll.vue.js';
 import AnimateWidth from '../animations/animate-width.vue.js';
 import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue.js';
-import { AnimationProp } from '../../types/animation-prop.js';
 
-/**
- * Component for use as Layout to be filled with the rest of the Components.
- *
- * @deprecated - The layout has been deprecated in favor of using new XDS layout.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'MultiColumnMaxWidthLayout',
-    components: { BaseIdTogglePanel, MainScroll: _sfc_main$1, Scroll },
-    props: {
-        /** The animation used for the Main Aside. */
-        asideAnimation: {
-            type: AnimationProp,
-            default: () => AnimateWidth
-        },
-        /** Enables the devMode, which shows the available slots to use with its names. */
-        devMode: Boolean
-    }
+/**
+ * Component for use as Layout to be filled with the rest of the Components.
+ *
+ * @deprecated - The layout has been deprecated in favor of using new XDS layout.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'MultiColumnMaxWidthLayout',
+    components: { BaseIdTogglePanel, MainScroll: _sfc_main$1, Scroll },
+    props: {
+        /** The animation used for the Main Aside. */
+        asideAnimation: {
+            type: AnimationProp,
+            default: () => AnimateWidth,
+        },
+        /** Enables the devMode, which shows the available slots to use with its names. */
+        devMode: Boolean,
+    },
 });
 
 export { _sfc_main as default };