npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.29 → 3.0.0-alpha.32 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (856) hide show

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

@@ -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,83 +126,81 @@ var __vue_render__ = function() {
                   staticClass: "x-layout__collapse-aside",
                   attrs: {
                     panelId: "aside-panel",
-                    animation: _vm.asideAnimation
-                  }
+                    animation: _vm.asideAnimation,
+                  },
                 },
                 [
                   _c(
-                    "BaseIdScroll",
+                    "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(),
           _vm._v(" "),
-          _vm.hasContent("main-body")
-            ? _c(
-                "BaseIdScroll",
-                {
-                  staticClass: "x-layout__body-scroll",
-                  attrs: { id: "main-scroll" }
-                },
-                [
-                  _c(
-                    "section",
+          _c(
+            "MainScroll",
+            [
+              _vm.hasContent("main-body")
+                ? _c(
+                    "Scroll",
                     {
-                      staticClass: "x-layout__main-body x-list x-list--vertical"
+                      staticClass: "x-layout__body-scroll",
+                      attrs: { id: "main-scroll" },
                     },
                     [
-                      _vm._t("main-body", function() {
-                        return [
-                          _vm.devMode
-                            ? _c(
-                                "span",
-                                {
-                                  staticClass: "slot-helper",
-                                  staticStyle: { height: "110vh" }
-                                },
-                                [_vm._v("MAIN BODY")]
-                              )
-                            : _vm._e()
-                        ]
-                      })
-                    ],
-                    2
+                      _c(
+                        "section",
+                        {
+                          staticClass:
+                            "x-layout__main-body x-list x-list--vertical",
+                        },
+                        [
+                          _vm._t("main-body", function () {
+                            return [
+                              _vm.devMode
+                                ? _c(
+                                    "span",
+                                    {
+                                      staticClass: "slot-helper",
+                                      staticStyle: { height: "110vh" },
+                                    },
+                                    [_vm._v("MAIN BODY")]
+                                  )
+                                : _vm._e() ]
+                          }) ],
+                        2
+                      ) ]
                   )
-                ]
-              )
-            : _vm._e()
-        ],
+                : _vm._e() ],
+            1
+          ) ],
         1
       ),
       _vm._v(" "),
@@ -233,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__ = [];
@@ -261,12 +234,12 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-09724d76_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-09724d76_1", { source: ".dev-mode .slot-helper[data-v-09724d76] {\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-09724d76] {\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-09724d76] {\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-09724d76] {\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list[data-v-09724d76] {\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-09724d76] {\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list[data-v-09724d76] {\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-09724d76] {\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list[data-v-09724d76] {\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-09724d76] {\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-09724d76] {\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list[data-v-09724d76] {\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-09724d76] {\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-09724d76] {\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list[data-v-09724d76] {\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-09724d76] {\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list[data-v-09724d76] {\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-09724d76] {\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-09724d76] {\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-09724d76] {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n.x-layout__body-scroll[data-v-09724d76] {\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-09724d76] {\n  --x-string-overflow-scroll: scroll;\n}\n.x-layout__scroll-to-top[data-v-09724d76] {\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-09724d76] {\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-09724d76]  > * {\n  pointer-events: all;\n}", map: undefined, media: undefined });
+    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 });
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-09724d76";
+  var __vue_scope_id__ = "data-v-439d100c";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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

	@@ -1 +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 <BaseIdScroll 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 </BaseIdScroll>\n </BaseIdTogglePanel>\n\n <BaseIdScroll 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 </BaseIdScroll>\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 Component, { mixins } from 'vue-class-component';\n import { Prop } from 'vue-property-decorator';\n import Vue from 'vue';\n import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n import BaseIdScroll from '../scroll/base-id-scroll.vue';\n import AnimateWidth from '../animations/animate-width.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, BaseIdScroll }\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 ::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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -3,7 +3,8 @@ 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 BaseIdScroll from '../scroll/base-id-scroll.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';
 /**
@@ -21,7 +22,7 @@ var MultiColumnMaxWidthLayout = /** @class */ (function (_super) {
     ], MultiColumnMaxWidthLayout.prototype, "asideAnimation", void 0);
     MultiColumnMaxWidthLayout = __decorate([
         Component({
-            components: { BaseIdTogglePanel: BaseIdTogglePanel, BaseIdScroll: BaseIdScroll }
+            components: { BaseIdTogglePanel: BaseIdTogglePanel, MainScroll: MainScroll, Scroll: Scroll }
         })
     ], MultiColumnMaxWidthLayout);
     return MultiColumnMaxWidthLayout;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"multi-column-max-width-layout.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/layouts/multi-column-max-width-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\n\n\n\n\n\n\n\n\nimport Component, { mixins } from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport ~~Vue~~ from 'vue';\nimport ~~BaseIdTogglePanel~~ from '~~../panels~~/~~base-id-toggle-panel~~.vue';\nimport ~~BaseIdScroll~~ from '../~~scroll~~/~~base~~-~~id-scroll~~.vue';\nimport ~~AnimateWidth~~ from '../~~animations~~/~~animate~~-~~width~~.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: { BaseIdTogglePanel, ~~BaseIdScroll~~ }\n})\nexport 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"],"names":[],"mappings":"~~;;;;;;;;AAoGA~~;;;;;AAQA;IAAuD,6CAAoB;IAA3E;;KAQC;IADC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,YAAY,GAAA,EAAE,CAAC;qEACP;IAPZ,yBAAyB;QAH7C,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,iBAAiB,mBAAA,EAAE,~~YAAY~~,~~cAAA~~,EAAE;~~SAChD~~,CAAC;OACmB,yBAAyB,CAQ7C;IAAD,gCAAC;CARD,CAAuD,MAAM,CAAC,YAAY,CAAC;;;;"}
1	+ {"version":3,"file":"multi-column-max-width-layout.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/layouts/multi-column-max-width-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\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport Component, { mixins } from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\nimport Scroll from '../../x-modules/scroll/components/scroll.vue';\nimport AnimateWidth from '../animations/animate-width.vue';\nimport BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\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: { BaseIdTogglePanel, MainScroll, Scroll }\n})\nexport 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"],"names":[],"mappings":";;;;;;;;;AAuGA;;;;;AAQA;IAAuD,6CAAoB;IAA3E;;KAQC;IADC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,YAAY,GAAA,EAAE,CAAC;qEACP;IAPZ,yBAAyB;QAH7C,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,iBAAiB,mBAAA,EAAE,UAAU,YAAA,EAAE,MAAM,QAAA,EAAE;SACtD,CAAC;OACmB,yBAAyB,CAQ7C;IAAD,gCAAC;CARD,CAAuD,MAAM,CAAC,YAAY,CAAC;;;;"}