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

package/js/components/layouts/fixed-header-and-asides-layout.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-header-and-asides-layout.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Component } from 'vue-property-decorator';\nimport { mixins } from 'vue-class-component';\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\nimport { TranslateFromLeft, TranslateFromRight } from '../animations';\nimport BaseIdModal from '../modals/base-id-modal.vue';\nimport Scroll from '../../x-modules/scroll/components/scroll.vue';\nimport 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: {\n    BaseIdModal,\n    MainScroll,\n    Scroll\n  }\n})\nexport default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n  protected scrollPosition = 0;\n  protected rightAsideAnimation = TranslateFromRight;\n  protected leftAsideAnimation = TranslateFromLeft;\n\n  protected setPosition(position: number): void {\n    this.scrollPosition = position;\n  }\n\n  protected get isBackdropVisible(): boolean {\n    return this.scrollPosition > 0;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA4FA;;;;;AAYA;IAAwD,8CAAoB;IAA5E;QAAA,qEAYC;QAXW,oBAAc,GAAG,CAAC,CAAC;QACnB,yBAAmB,GAAG,kBAAkB,CAAC;QACzC,wBAAkB,GAAG,iBAAiB,CAAC;;KASlD;IAPW,gDAAW,GAArB,UAAsB,QAAgB;QACpC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;IAED,sBAAc,yDAAiB;aAA/B;YACE,OAAO,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;SAChC;;;OAAA;IAXkB,0BAA0B;QAP9C,SAAS,CAAC;YACT,UAAU,EAAE;gBACV,WAAW,aAAA;gBACX,UAAU,YAAA;gBACV,MAAM,QAAA;aACP;SACF,CAAC;OACmB,0BAA0B,CAY9C;IAAD,iCAAC;CAZD,CAAwD,MAAM,CAAC,YAAY,CAAC;;;;"}

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__ = [];
@@ -268,12 +234,12 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-439d100c_0", { source: ":root {\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  --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  --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  --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  --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  --x-size-border-width-layout-columns-header: 0;\n  --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n}", map: undefined, media: undefined })
-,inject("data-v-439d100c_1", { source: ".dev-mode .slot-helper[data-v-439d100c] {\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.x-layout[data-v-439d100c] {\n  --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n  --x-size-margin-layout-columns: max(\n    var(--x-size-min-margin-layout-columns, 20px),\n    var(--x-size-margin-max-width)\n  );\n  --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n  --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n  --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n  display: grid;\n  align-content: stretch;\n  max-height: 100%;\n  grid-template-columns: [page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];\n}\n.x-layout__header[data-v-439d100c] {\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle), 1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];\n  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  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n.x-layout__header-start[data-v-439d100c] {\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list[data-v-439d100c] {\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.x-layout__header-middle[data-v-439d100c] {\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list[data-v-439d100c] {\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.x-layout__header-end[data-v-439d100c] {\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list[data-v-439d100c] {\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.x-layout__sub-header[data-v-439d100c] {\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content), 1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];\n  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  background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n  border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n.x-layout__sub-header-content[data-v-439d100c] {\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list[data-v-439d100c] {\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.x-layout__toolbar[data-v-439d100c] {\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body), 1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];\n  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  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n.x-layout__toolbar-aside[data-v-439d100c] {\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list[data-v-439d100c] {\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.x-layout__toolbar-body[data-v-439d100c] {\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list[data-v-439d100c] {\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.x-layout__main[data-v-439d100c] {\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  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  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n.x-layout__collapse-aside[data-v-439d100c] {\n  width: calc( ( 100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns) ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default) );\n}\n.x-layout__aside-scroll[data-v-439d100c] {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n.x-layout__body-scroll[data-v-439d100c] {\n  flex: 1 1 auto;\n  width: 0;\n  padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n}\n.x-layout__body-scroll.x-scroll[data-v-439d100c] {\n  --x-string-overflow-scroll: scroll;\n}\n.x-layout__scroll-to-top[data-v-439d100c] {\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[data-v-439d100c] {\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[data-v-439d100c]  > * {\n  pointer-events: all;\n}", map: undefined, media: undefined });
+    inject("data-v-24f2b448_0", { source: ":root {\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  --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  --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  --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  --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  --x-size-border-width-layout-columns-header: 0;\n  --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n}", map: undefined, media: undefined })
+,inject("data-v-24f2b448_1", { source: ".dev-mode .slot-helper[data-v-24f2b448] {\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.x-layout[data-v-24f2b448] {\n  --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n  --x-size-margin-layout-columns: max(\n    var(--x-size-min-margin-layout-columns, 20px),\n    var(--x-size-margin-max-width)\n  );\n  --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n  --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n  --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n  display: grid;\n  align-content: stretch;\n  max-height: 100%;\n  grid-template-columns: [page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];\n}\n.x-layout__header[data-v-24f2b448] {\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle), 1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];\n  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  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n.x-layout__header-start[data-v-24f2b448] {\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list[data-v-24f2b448] {\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.x-layout__header-middle[data-v-24f2b448] {\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list[data-v-24f2b448] {\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.x-layout__header-end[data-v-24f2b448] {\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list[data-v-24f2b448] {\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.x-layout__sub-header[data-v-24f2b448] {\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content), 1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];\n  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  background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n  border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n.x-layout__sub-header-content[data-v-24f2b448] {\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list[data-v-24f2b448] {\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.x-layout__toolbar[data-v-24f2b448] {\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body), 1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];\n  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  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n.x-layout__toolbar-aside[data-v-24f2b448] {\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list[data-v-24f2b448] {\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.x-layout__toolbar-body[data-v-24f2b448] {\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list[data-v-24f2b448] {\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.x-layout__main[data-v-24f2b448] {\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  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  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n.x-layout__collapse-aside[data-v-24f2b448] {\n  width: calc( ( 100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns) ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default) );\n}\n.x-layout__aside-scroll[data-v-24f2b448] {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n.x-layout__body-scroll[data-v-24f2b448] {\n  flex: 1 1 auto;\n  width: 0;\n  padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n}\n.x-layout__body-scroll.x-scroll[data-v-24f2b448] {\n  --x-string-overflow-scroll: scroll;\n}\n.x-layout__scroll-to-top[data-v-24f2b448] {\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[data-v-24f2b448] {\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[data-v-24f2b448]  > * {\n  pointer-events: all;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-439d100c";
+  var __vue_scope_id__ = "data-v-24f2b448";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/layouts/multi-column-max-width-layout.vue_rollup-plugin-vue=script.js

@@ -2,10 +2,10 @@ import { __extends, __decorate } from 'tslib';
 import { Prop } from 'vue-property-decorator';
 import AnimateWidth from '../animations/animate-width.vue.js';
 import Component, { mixins } from 'vue-class-component';
-import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue.js';
 import MainScroll from '../../x-modules/scroll/components/main-scroll.vue.js';
 import Scroll from '../../x-modules/scroll/components/scroll.vue.js';
 import LayoutsMixin from './layouts.mixin.js';
+import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue.js';
 
 /**
  * Component for use as Layout to be filled with the rest of the Components.