@empathyco/x-components 3.0.0-alpha.31 → 3.0.0-alpha.32

package/js/components/icons/trending.vue.js

@@ -5,7 +5,7 @@ import script from './trending.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function(_h, _vm) {
+var __vue_render__ = function (_h, _vm) {
   var _c = _vm._c;
   return _c(
     "svg",
@@ -15,8 +15,8 @@ var __vue_render__ = function(_h, _vm) {
         viewBox: "0 0 16 16",
         version: "1.1",
         xmlns: "http://www.w3.org/2000/svg",
-        "xmlns:xlink": "http://www.w3.org/1999/xlink"
-      }
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
     },
     [
       _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
@@ -24,19 +24,17 @@ var __vue_render__ = function(_h, _vm) {
           attrs: {
             transform:
               "translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) ",
-            points: "14 12 8.81818182 6.45833333 6.09090909 9.375 2 5"
-          }
+            points: "14 12 8.81818182 6.45833333 6.09090909 9.375 2 5",
+          },
         }),
         _vm._v(" "),
         _c("polyline", {
           attrs: {
             transform:
               "translate(12.363636, 6.750000) scale(1, -1) translate(-12.363636, -6.750000) ",
-            points: "10.7272727 8.5 14 8.5 14 5"
-          }
-        })
-      ])
-    ]
+            points: "10.7272727 8.5 14 8.5 14 5",
+          },
+        }) ]) ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/icons/trending.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"trending.vue.js","sources":["../../../../src/components/icons/trending.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline\n        transform=\"translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) \"\n        points=\"14 12 8.81818182 6.45833333 6.09090909 9.375 2 5\"\n      />\n      <polyline\n        transform=\"translate(12.363636, 6.750000) scale(1, -1) translate(-12.363636, -6.750000) \"\n        points=\"10.7272727 8.5 14 8.5 14 5\"\n      />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"trending.vue.js","sources":["../../../../src/components/icons/trending.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline\n        transform=\"translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) \"\n        points=\"14 12 8.81818182 6.45833333 6.09090909 9.375 2 5\"\n      />\n      <polyline\n        transform=\"translate(12.363636, 6.750000) scale(1, -1) translate(-12.363636, -6.750000) \"\n        points=\"10.7272727 8.5 14 8.5 14 5\"\n      />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/user.vue.js

@@ -5,7 +5,7 @@ import script from './user.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function(_h, _vm) {
+var __vue_render__ = function (_h, _vm) {
   var _c = _vm._c;
   return _c(
     "svg",
@@ -15,21 +15,18 @@ var __vue_render__ = function(_h, _vm) {
         viewBox: "0 0 16 16",
         version: "1.1",
         xmlns: "http://www.w3.org/2000/svg",
-        "xmlns:xlink": "http://www.w3.org/1999/xlink"
-      }
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
     },
     [
       _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
         _c("path", {
           attrs: {
-            d:
-              "M14,14 L14,12.6666667 C14,11.1939073 12.6568542,10 11,10 L5,10 C3.34314575,10\n      2,11.1939073 2,12.6666667 L2,14"
-          }
+            d: "M14,14 L14,12.6666667 C14,11.1939073 12.6568542,10 11,10 L5,10 C3.34314575,10\n      2,11.1939073 2,12.6666667 L2,14",
+          },
         }),
         _vm._v(" "),
-        _c("circle", { attrs: { cx: "8", cy: "5", r: "3" } })
-      ])
-    ]
+        _c("circle", { attrs: { cx: "8", cy: "5", r: "3" } }) ]) ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/icons/user.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"user.vue.js","sources":["../../../../src/components/icons/user.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <path\n        d=\"M14,14 L14,12.6666667 C14,11.1939073 12.6568542,10 11,10 L5,10 C3.34314575,10\n        2,11.1939073 2,12.6666667 L2,14\"\n      />\n      <circle cx=\"8\" cy=\"5\" r=\"3\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"user.vue.js","sources":["../../../../src/components/icons/user.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <path\n        d=\"M14,14 L14,12.6666667 C14,11.1939073 12.6568542,10 11,10 L5,10 C3.34314575,10\n        2,11.1939073 2,12.6666667 L2,14\"\n      />\n      <circle cx=\"8\" cy=\"5\" r=\"3\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/items-list.vue.js

@@ -5,7 +5,7 @@ import script from './items-list.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,26 +15,25 @@ var __vue_render__ = function() {
         {
           tag: "component",
           staticClass: "x-items-list",
-          attrs: { tag: "ul", "data-test": "items-list" }
+          attrs: { tag: "ul", "data-test": "items-list" },
         },
-        _vm._l(_vm.computedItems, function(item) {
+        _vm._l(_vm.computedItems, function (item) {
           return _c(
             "li",
             {
               key: item.id,
               staticClass: "x-items-list__item",
               class: item.class,
-              attrs: { "data-test": item.dataTest }
+              attrs: { "data-test": item.dataTest },
             },
             [
               _vm._t(
                 item.slotName,
-                function() {
+                function () {
                   return [_vm._v(_vm._s(item.id))]
                 },
                 { item: item }
-              )
-            ],
+              ) ],
             2
           )
         }),

package/js/components/items-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"items-list.vue.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n\n  /**\n   * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n   * the `modelName`of the item.\n   *\n   * @public\n   */\n  @Component\n  export default class ItemsList extends Vue {\n    /**\n     * Animation component that will be used to animate the list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * List of items.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected items!: ListItem[];\n\n    /**\n     * The list of the items with additional properties.\n     *\n     * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n     *\n     * @internal\n     */\n    protected get computedItems(): {\n      dataTest: string;\n      class: string[];\n    }[] {\n      return this.items.map(item => {\n        const modelName = toKebabCase(item.modelName);\n        return {\n          ...item,\n          dataTest: `${modelName}s-list-item`,\n          class: [`x-${modelName}s-list-item`],\n          slotName: modelName\n        };\n      });\n    }\n  }\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"items-list.vue.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n\n  /**\n   * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n   * the `modelName`of the item.\n   *\n   * @public\n   */\n  @Component\n  export default class ItemsList extends Vue {\n    /**\n     * Animation component that will be used to animate the list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * List of items.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected items!: ListItem[];\n\n    /**\n     * The list of the items with additional properties.\n     *\n     * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n     *\n     * @internal\n     */\n    protected get computedItems(): {\n      dataTest: string;\n      class: string[];\n    }[] {\n      return this.items.map(item => {\n        const modelName = toKebabCase(item.modelName);\n        return {\n          ...item,\n          dataTest: `${modelName}s-list-item`,\n          class: [`x-${modelName}s-list-item`],\n          slotName: modelName\n        };\n      });\n    }\n  }\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -6,7 +6,7 @@ import script from './multi-column-max-width-layout.vue_rollup-plugin-vue=script
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,7 +15,7 @@ var __vue_render__ = function() {
     {
       staticClass: "x-layout x-layout--columns",
       class: { "dev-mode": _vm.devMode },
-      style: { height: _vm.hasContent("main-body") ? "100%" : "auto" }
+      style: { height: _vm.hasContent("main-body") ? "100%" : "auto" },
     },
     [
       _c("header", { staticClass: "x-layout__header" }, [
@@ -24,16 +24,13 @@ var __vue_render__ = function() {
               "div",
               { staticClass: "x-list x-layout__header-start" },
               [
-                _vm._t("header-start", function() {
+                _vm._t("header-start", function () {
                   return [
                     _vm.devMode
                       ? _c("span", { staticClass: "slot-helper" }, [
-                          _vm._v("HEADER START")
-                        ])
-                      : _vm._e()
-                  ]
-                })
-              ],
+                          _vm._v("HEADER START") ])
+                      : _vm._e() ]
+                }) ],
               2
             )
           : _vm._e(),
@@ -43,16 +40,13 @@ var __vue_render__ = function() {
               "div",
               { staticClass: "x-list x-layout__header-middle" },
               [
-                _vm._t("header-middle", function() {
+                _vm._t("header-middle", function () {
                   return [
                     _vm.devMode
                       ? _c("span", { staticClass: "slot-helper" }, [
-                          _vm._v("HEADER MIDDLE")
-                        ])
-                      : _vm._e()
-                  ]
-                })
-              ],
+                          _vm._v("HEADER MIDDLE") ])
+                      : _vm._e() ]
+                }) ],
               2
             )
           : _vm._e(),
@@ -62,20 +56,16 @@ var __vue_render__ = function() {
               "div",
               { staticClass: "x-list x-layout__header-end" },
               [
-                _vm._t("header-end", function() {
+                _vm._t("header-end", function () {
                   return [
                     _vm.devMode
                       ? _c("span", { staticClass: "slot-helper" }, [
-                          _vm._v("HEADER END")
-                        ])
-                      : _vm._e()
-                  ]
-                })
-              ],
+                          _vm._v("HEADER END") ])
+                      : _vm._e() ]
+                }) ],
               2
             )
-          : _vm._e()
-      ]),
+          : _vm._e() ]),
       _vm._v(" "),
       _vm.hasContent("sub-header")
         ? _c("div", { staticClass: "x-layout__sub-header" }, [
@@ -83,19 +73,15 @@ var __vue_render__ = function() {
               "div",
               { staticClass: "x-layout__sub-header-content" },
               [
-                _vm._t("sub-header", function() {
+                _vm._t("sub-header", function () {
                   return [
                     _vm.devMode
                       ? _c("span", { staticClass: "slot-helper" }, [
-                          _vm._v("SUB HEADER")
-                        ])
-                      : _vm._e()
-                  ]
-                })
-              ],
+                          _vm._v("SUB HEADER") ])
+                      : _vm._e() ]
+                }) ],
               2
-            )
-          ])
+            ) ])
         : _vm._e(),
       _vm._v(" "),
       _vm.hasContent("toolbar-aside", "toolbar-body")
@@ -104,16 +90,13 @@ var __vue_render__ = function() {
               "aside",
               { staticClass: "x-list x-layout__toolbar-aside" },
               [
-                _vm._t("toolbar-aside", function() {
+                _vm._t("toolbar-aside", function () {
                   return [
                     _vm.devMode
                       ? _c("span", { staticClass: "slot-helper" }, [
-                          _vm._v("TOOLBAR ASIDE")
-                        ])
-                      : _vm._e()
-                  ]
-                })
-              ],
+                          _vm._v("TOOLBAR ASIDE") ])
+                      : _vm._e() ]
+                }) ],
               2
             ),
             _vm._v(" "),
@@ -121,19 +104,15 @@ var __vue_render__ = function() {
               "div",
               { staticClass: "x-list x-layout__toolbar-body" },
               [
-                _vm._t("toolbar-body", function() {
+                _vm._t("toolbar-body", function () {
                   return [
                     _vm.devMode
                       ? _c("span", { staticClass: "slot-helper" }, [
-                          _vm._v("TOOLBAR BODY")
-                        ])
-                      : _vm._e()
-                  ]
-                })
-              ],
+                          _vm._v("TOOLBAR BODY") ])
+                      : _vm._e() ]
+                }) ],
               2
-            )
-          ])
+            ) ])
         : _vm._e(),
       _vm._v(" "),
       _c(
@@ -147,44 +126,40 @@ var __vue_render__ = function() {
                   staticClass: "x-layout__collapse-aside",
                   attrs: {
                     panelId: "aside-panel",
-                    animation: _vm.asideAnimation
-                  }
+                    animation: _vm.asideAnimation,
+                  },
                 },
                 [
                   _c(
                     "Scroll",
                     {
                       staticClass: "x-layout__aside-scroll",
-                      attrs: { id: "aside-scroll" }
+                      attrs: { id: "aside-scroll" },
                     },
                     [
                       _c(
                         "div",
                         {
                           staticClass:
-                            "x-layout__main-aside x-list x-list--vertical"
+                            "x-layout__main-aside x-list x-list--vertical",
                         },
                         [
-                          _vm._t("main-aside", function() {
+                          _vm._t("main-aside", function () {
                             return [
                               _vm.devMode
                                 ? _c(
                                     "span",
                                     {
                                       staticClass: "slot-helper",
-                                      staticStyle: { height: "110vh" }
+                                      staticStyle: { height: "110vh" },
                                     },
                                     [_vm._v("MAIN ASIDE")]
                                   )
-                                : _vm._e()
-                            ]
-                          })
-                        ],
+                                : _vm._e() ]
+                          }) ],
                         2
-                      )
-                    ]
-                  )
-                ],
+                      ) ]
+                  ) ],
                 1
               )
             : _vm._e(),
@@ -197,40 +172,35 @@ var __vue_render__ = function() {
                     "Scroll",
                     {
                       staticClass: "x-layout__body-scroll",
-                      attrs: { id: "main-scroll" }
+                      attrs: { id: "main-scroll" },
                     },
                     [
                       _c(
                         "section",
                         {
                           staticClass:
-                            "x-layout__main-body x-list x-list--vertical"
+                            "x-layout__main-body x-list x-list--vertical",
                         },
                         [
-                          _vm._t("main-body", function() {
+                          _vm._t("main-body", function () {
                             return [
                               _vm.devMode
                                 ? _c(
                                     "span",
                                     {
                                       staticClass: "slot-helper",
-                                      staticStyle: { height: "110vh" }
+                                      staticStyle: { height: "110vh" },
                                     },
                                     [_vm._v("MAIN BODY")]
                                   )
-                                : _vm._e()
-                            ]
-                          })
-                        ],
+                                : _vm._e() ]
+                          }) ],
                         2
-                      )
-                    ]
+                      ) ]
                   )
-                : _vm._e()
-            ],
+                : _vm._e() ],
             1
-          )
-        ],
+          ) ],
         1
       ),
       _vm._v(" "),
@@ -240,26 +210,22 @@ var __vue_render__ = function() {
               "div",
               { staticClass: "x-layout__scroll-to-top-content" },
               [
-                _vm._t("scroll-to-top", function() {
+                _vm._t("scroll-to-top", function () {
                   return [
                     _vm.devMode
                       ? _c(
                           "span",
                           {
                             staticClass: "slot-helper",
-                            staticStyle: { height: "50px" }
+                            staticStyle: { height: "50px" },
                           },
                           [_vm._v("SCROLL TO TOP")]
                         )
-                      : _vm._e()
-                  ]
-                })
-              ],
+                      : _vm._e() ]
+                }) ],
               2
-            )
-          ])
-        : _vm._e()
-    ]
+            ) ])
+        : _vm._e() ]
   )
 };
 var __vue_staticRenderFns__ = [];

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: hasContent('main-body') ? '100%' : 'auto' }\"\n  >\n    <header class=\"x-layout__header\">\n      <div v-if=\"hasContent('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=\"hasContent('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=\"hasContent('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=\"hasContent('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=\"hasContent('toolbar-aside', 'toolbar-body')\" class=\"x-layout__toolbar\">\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=\"hasContent('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>\n        <Scroll v-if=\"hasContent('main-body')\" id=\"main-scroll\" class=\"x-layout__body-scroll\">\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=\"hasContent('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 Vue from 'vue';\n  import Component, { mixins } from 'vue-class-component';\n  import { Prop } from 'vue-property-decorator';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import AnimateWidth from '../animations/animate-width.vue';\n  import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n  import LayoutsMixin from './layouts.mixin';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the Components.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseIdTogglePanel, MainScroll, Scroll }\n  })\n  export default class MultiColumnMaxWidthLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => AnimateWidth })\n    protected asideAnimation!: Vue;\n  }\n</script>\n\n<style lang=\"scss\">\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=\"scss\" scoped>\n  @import '../../design-system/utilities/dev-mode';\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    &__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    &__header-start {\n      // layout\n      grid-column: start-content;\n\n      &.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\n    &__header-middle {\n      // layout\n      grid-column: middle-content;\n\n      &.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\n    &__header-end {\n      // layout\n      grid-column: end-content;\n\n      &.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\n    &__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    &__sub-header-content {\n      // layout\n      grid-column: sub-header-content;\n\n      &.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\n    &__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    &__toolbar-aside {\n      // layout\n      grid-column: toolbar-aside;\n\n      &.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\n    &__toolbar-body {\n      // layout\n      grid-column: toolbar-body;\n\n      &.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\n    &__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    &__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    &__aside-scroll {\n      height: 100%;\n      margin-right: var(--x-size-gap-default);\n    }\n\n    &__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-scroll {\n        --x-string-overflow-scroll: scroll;\n      }\n    }\n\n    &__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\n    &__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      ::v-deep > * {\n        pointer-events: all;\n      }\n    }\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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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: hasContent('main-body') ? '100%' : 'auto' }\"\n  >\n    <header class=\"x-layout__header\">\n      <div v-if=\"hasContent('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=\"hasContent('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=\"hasContent('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=\"hasContent('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=\"hasContent('toolbar-aside', 'toolbar-body')\" class=\"x-layout__toolbar\">\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=\"hasContent('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>\n        <Scroll v-if=\"hasContent('main-body')\" id=\"main-scroll\" class=\"x-layout__body-scroll\">\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=\"hasContent('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 Vue from 'vue';\n  import Component, { mixins } from 'vue-class-component';\n  import { Prop } from 'vue-property-decorator';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import AnimateWidth from '../animations/animate-width.vue';\n  import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n  import LayoutsMixin from './layouts.mixin';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the Components.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseIdTogglePanel, MainScroll, Scroll }\n  })\n  export default class MultiColumnMaxWidthLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => AnimateWidth })\n    protected asideAnimation!: Vue;\n  }\n</script>\n\n<style lang=\"scss\">\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=\"scss\" scoped>\n  @import '../../design-system/utilities/dev-mode';\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    &__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    &__header-start {\n      // layout\n      grid-column: start-content;\n\n      &.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\n    &__header-middle {\n      // layout\n      grid-column: middle-content;\n\n      &.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\n    &__header-end {\n      // layout\n      grid-column: end-content;\n\n      &.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\n    &__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    &__sub-header-content {\n      // layout\n      grid-column: sub-header-content;\n\n      &.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\n    &__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    &__toolbar-aside {\n      // layout\n      grid-column: toolbar-aside;\n\n      &.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\n    &__toolbar-body {\n      // layout\n      grid-column: toolbar-body;\n\n      &.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\n    &__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    &__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    &__aside-scroll {\n      height: 100%;\n      margin-right: var(--x-size-gap-default);\n    }\n\n    &__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-scroll {\n        --x-string-overflow-scroll: scroll;\n      }\n    }\n\n    &__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\n    &__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      ::v-deep > * {\n        pointer-events: all;\n      }\n    }\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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}