@empathyco/x-components 3.0.0-alpha.8 → 3.0.0-alpha.82

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

@@ -0,0 +1,41 @@
+import { __decorate } from 'tslib';
+import { Component } from 'vue-property-decorator';
+import { mixins } from 'vue-class-component';
+import __vue_component__$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
+import { animateTranslate } from '../animations/animate-translate/animate-translate.factory.js';
+import __vue_component__ from '../modals/base-id-modal.vue.js';
+import __vue_component__$2 from '../../x-modules/scroll/components/scroll.vue.js';
+import LayoutsMixin from './layouts.mixin.js';
+
+/**
+ * Component for use as Layout to be filled with the rest of the components.
+ *
+ * @public
+ */
+let FixedHeaderAndAsidesLayout = class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {
+    constructor() {
+        super(...arguments);
+        this.scrollPosition = 0;
+        this.rightAsideAnimation = animateTranslate('right');
+        this.leftAsideAnimation = animateTranslate('left');
+    }
+    setPosition(position) {
+        this.scrollPosition = position;
+    }
+    get isBackdropVisible() {
+        return this.scrollPosition > 0;
+    }
+};
+FixedHeaderAndAsidesLayout = __decorate([
+    Component({
+        components: {
+            BaseIdModal: __vue_component__,
+            MainScroll: __vue_component__$1,
+            Scroll: __vue_component__$2
+        }
+    })
+], FixedHeaderAndAsidesLayout);
+var script = FixedHeaderAndAsidesLayout;
+
+export { script as default };
+//# sourceMappingURL=fixed-header-and-asides-layout.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-header-and-asides-layout.vue_rollup-plugin-vue_script.vue.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 { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\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 = animateTranslate('right');\n  protected leftAsideAnimation = animateTranslate('left');\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":["BaseIdModal","MainScroll","Scroll"],"mappings":";;;;;;;;;AA4FA;;;;;AAYA,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,MAAM,CAAC,YAAY,CAAC;IAA5E;;QACY,mBAAc,GAAG,CAAC,CAAC;QACnB,wBAAmB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAChD,uBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;KASzD;IAPW,WAAW,CAAC,QAAgB;QACpC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;IAED,IAAc,iBAAiB;QAC7B,OAAO,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;KAChC;CACF,CAAA;AAZoB,0BAA0B;IAP9C,SAAS,CAAC;QACT,UAAU,EAAE;yBACVA,iBAAW;wBACXC,mBAAU;oBACVC,mBAAM;SACP;KACF,CAAC;GACmB,0BAA0B,CAY9C;aAZoB,0BAA0B;;;;"}

package/js/components/layouts/layouts.mixin.js

@@ -0,0 +1,35 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop } from 'vue-property-decorator';
+import Component from 'vue-class-component';
+
+/**
+ * Mixin to share layouts logic.
+ *
+ * @public
+ */
+let LayoutsMixin = class LayoutsMixin extends Vue {
+    /**
+     * Function to check if an slot has rendered content or not.
+     *
+     * @param slotNames - A VNode Array with of each slot.
+     * @returns True if the slot has rendered content or false otherwise.
+     *
+     * @internal
+     */
+    hasContent(...slotNames) {
+        return ((this.devMode ||
+            slotNames.some(slotName => this.$slots[slotName]?.some(vNode => vNode.tag !== undefined))) ??
+            false);
+    }
+};
+__decorate([
+    Prop({ default: false })
+], LayoutsMixin.prototype, "devMode", void 0);
+LayoutsMixin = __decorate([
+    Component
+], LayoutsMixin);
+var LayoutsMixin$1 = LayoutsMixin;
+
+export { LayoutsMixin$1 as default };
+//# sourceMappingURL=layouts.mixin.js.map

package/js/components/layouts/layouts.mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layouts.mixin.js","sources":["../../../../src/components/layouts/layouts.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Prop } from 'vue-property-decorator';\nimport Component from 'vue-class-component';\n\n/**\n * Mixin to share layouts logic.\n *\n * @public\n */\n@Component\nexport default class LayoutsMixin extends Vue {\n  /**\n   * Enables the devMode, which shows the available slots to use with its names.\n   *\n   * @public\n   */\n  @Prop({ default: false })\n  protected devMode!: boolean;\n\n  /**\n   * Function to check if an slot has rendered content or not.\n   *\n   * @param slotNames - A VNode Array with of each slot.\n   * @returns True if the slot has rendered content or false otherwise.\n   *\n   * @internal\n   */\n  protected hasContent(...slotNames: string[]): boolean {\n    return (\n      (this.devMode ||\n        slotNames.some(slotName =>\n          this.$slots[slotName]?.some(vNode => vNode.tag !== undefined)\n        )) ??\n      false\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;AAIA;;;;;AAMA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;;;;;;;;;IAiBjC,UAAU,CAAC,GAAG,SAAmB;QACzC,QACE,CAAC,IAAI,CAAC,OAAO;YACX,SAAS,CAAC,IAAI,CAAC,QAAQ,IACrB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,CAC9D;YACH,KAAK,EACL;KACH;CACF,CAAA;AAnBC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;6CACG;AAPT,YAAY;IADhC,SAAS;GACW,YAAY,CA0BhC;qBA1BoB,YAAY;;;;"}

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

@@ -0,0 +1,301 @@
+import script from './multi-column-max-width-layout.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "div",
+    {
+      staticClass: "x-layout x-layout--columns",
+      class: { "dev-mode": _vm.devMode },
+      style: { height: _vm.hasContent("main-body") ? "100%" : "auto" },
+    },
+    [
+      _c("header", { staticClass: "x-layout__header" }, [
+        _vm.hasContent("header-start")
+          ? _c(
+              "div",
+              { staticClass: "x-list x-layout__header-start" },
+              [
+                _vm._t("header-start", function () {
+                  return [
+                    _vm.devMode
+                      ? _c("span", { staticClass: "slot-helper" }, [
+                          _vm._v("HEADER START"),
+                        ])
+                      : _vm._e(),
+                  ]
+                }),
+              ],
+              2
+            )
+          : _vm._e(),
+        _vm._v(" "),
+        _vm.hasContent("header-middle")
+          ? _c(
+              "div",
+              { staticClass: "x-list x-layout__header-middle" },
+              [
+                _vm._t("header-middle", function () {
+                  return [
+                    _vm.devMode
+                      ? _c("span", { staticClass: "slot-helper" }, [
+                          _vm._v("HEADER MIDDLE"),
+                        ])
+                      : _vm._e(),
+                  ]
+                }),
+              ],
+              2
+            )
+          : _vm._e(),
+        _vm._v(" "),
+        _vm.hasContent("header-end")
+          ? _c(
+              "div",
+              { staticClass: "x-list x-layout__header-end" },
+              [
+                _vm._t("header-end", function () {
+                  return [
+                    _vm.devMode
+                      ? _c("span", { staticClass: "slot-helper" }, [
+                          _vm._v("HEADER END"),
+                        ])
+                      : _vm._e(),
+                  ]
+                }),
+              ],
+              2
+            )
+          : _vm._e(),
+      ]),
+      _vm._v(" "),
+      _vm.hasContent("sub-header")
+        ? _c("div", { staticClass: "x-layout__sub-header" }, [
+            _c(
+              "div",
+              { staticClass: "x-layout__sub-header-content" },
+              [
+                _vm._t("sub-header", function () {
+                  return [
+                    _vm.devMode
+                      ? _c("span", { staticClass: "slot-helper" }, [
+                          _vm._v("SUB HEADER"),
+                        ])
+                      : _vm._e(),
+                  ]
+                }),
+              ],
+              2
+            ),
+          ])
+        : _vm._e(),
+      _vm._v(" "),
+      _vm.hasContent("toolbar-aside", "toolbar-body")
+        ? _c("section", { staticClass: "x-layout__toolbar" }, [
+            _c(
+              "aside",
+              { staticClass: "x-list x-layout__toolbar-aside" },
+              [
+                _vm._t("toolbar-aside", function () {
+                  return [
+                    _vm.devMode
+                      ? _c("span", { staticClass: "slot-helper" }, [
+                          _vm._v("TOOLBAR ASIDE"),
+                        ])
+                      : _vm._e(),
+                  ]
+                }),
+              ],
+              2
+            ),
+            _vm._v(" "),
+            _c(
+              "div",
+              { staticClass: "x-list x-layout__toolbar-body" },
+              [
+                _vm._t("toolbar-body", function () {
+                  return [
+                    _vm.devMode
+                      ? _c("span", { staticClass: "slot-helper" }, [
+                          _vm._v("TOOLBAR BODY"),
+                        ])
+                      : _vm._e(),
+                  ]
+                }),
+              ],
+              2
+            ),
+          ])
+        : _vm._e(),
+      _vm._v(" "),
+      _c(
+        "main",
+        { staticClass: "x-layout__main" },
+        [
+          _vm.hasContent("main-aside")
+            ? _c(
+                "BaseIdTogglePanel",
+                {
+                  staticClass: "x-layout__collapse-aside",
+                  attrs: {
+                    panelId: "aside-panel",
+                    animation: _vm.asideAnimation,
+                  },
+                },
+                [
+                  _c(
+                    "Scroll",
+                    {
+                      staticClass: "x-layout__aside-scroll",
+                      attrs: { id: "aside-scroll" },
+                    },
+                    [
+                      _c(
+                        "div",
+                        {
+                          staticClass:
+                            "x-layout__main-aside x-list x-list--vertical",
+                        },
+                        [
+                          _vm._t("main-aside", function () {
+                            return [
+                              _vm.devMode
+                                ? _c(
+                                    "span",
+                                    {
+                                      staticClass: "slot-helper",
+                                      staticStyle: { height: "110vh" },
+                                    },
+                                    [_vm._v("MAIN ASIDE")]
+                                  )
+                                : _vm._e(),
+                            ]
+                          }),
+                        ],
+                        2
+                      ),
+                    ]
+                  ),
+                ],
+                1
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _c(
+            "MainScroll",
+            [
+              _vm.hasContent("main-body")
+                ? _c(
+                    "Scroll",
+                    {
+                      staticClass: "x-layout__body-scroll",
+                      attrs: { id: "main-scroll" },
+                    },
+                    [
+                      _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(),
+            ],
+            1
+          ),
+        ],
+        1
+      ),
+      _vm._v(" "),
+      _vm.hasContent("scroll-to-top")
+        ? _c("div", { staticClass: "x-layout__scroll-to-top" }, [
+            _c(
+              "div",
+              { staticClass: "x-layout__scroll-to-top-content" },
+              [
+                _vm._t("scroll-to-top", function () {
+                  return [
+                    _vm.devMode
+                      ? _c(
+                          "span",
+                          {
+                            staticClass: "slot-helper",
+                            staticStyle: { height: "50px" },
+                          },
+                          [_vm._v("SCROLL TO TOP")]
+                        )
+                      : _vm._e(),
+                  ]
+                }),
+              ],
+              2
+            ),
+          ])
+        : _vm._e(),
+    ]
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
+    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-top: var(--x-size-padding-top-layout-columns-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-header, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-header, 0);\n  margin-bottom: 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-top: var(--x-size-padding-top-layout-columns-sub-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n  margin-top: var(--x-size-margin-top-layout-columns-sub-header, 0);\n  margin-bottom: 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-top: var(--x-size-padding-top-layout-columns-toolbar, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-toolbar, 0);\n  margin-bottom: 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-top: var(--x-size-padding-top-layout-columns-main, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-main, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-main, 0);\n  margin-bottom: 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[dir=\"ltr\"] .x-layout__scroll-to-top-content[data-v-24f2b448] {\n  padding-left: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n[dir=\"rtl\"] .x-layout__scroll-to-top-content[data-v-24f2b448] {\n  padding-right: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content[data-v-24f2b448] {\n  flex: 1 0 auto;\n  padding-bottom: var(--x-size-margin-bottom-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 */
+  const __vue_scope_id__ = "data-v-24f2b448";
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    __vue_create_injector__,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };
+//# sourceMappingURL=multi-column-max-width-layout.vue.js.map

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

@@ -0,0 +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":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,28 @@
+import { __decorate } from 'tslib';
+import Component, { mixins } from 'vue-class-component';
+import { Prop } from 'vue-property-decorator';
+import __vue_component__$2 from '../../x-modules/scroll/components/main-scroll.vue.js';
+import __vue_component__$3 from '../../x-modules/scroll/components/scroll.vue.js';
+import __vue_component__ from '../animations/animate-width.vue.js';
+import __vue_component__$1 from '../panels/base-id-toggle-panel.vue.js';
+import LayoutsMixin from './layouts.mixin.js';
+
+/**
+ * Component for use as Layout to be filled with the rest of the Components.
+ *
+ * @public
+ */
+let MultiColumnMaxWidthLayout = class MultiColumnMaxWidthLayout extends mixins(LayoutsMixin) {
+};
+__decorate([
+    Prop({ default: () => __vue_component__ })
+], MultiColumnMaxWidthLayout.prototype, "asideAnimation", void 0);
+MultiColumnMaxWidthLayout = __decorate([
+    Component({
+        components: { BaseIdTogglePanel: __vue_component__$1, MainScroll: __vue_component__$2, Scroll: __vue_component__$3 }
+    })
+], MultiColumnMaxWidthLayout);
+var script = MultiColumnMaxWidthLayout;
+
+export { script as default };
+//# sourceMappingURL=multi-column-max-width-layout.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-max-width-layout.vue_rollup-plugin-vue_script.vue.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":["AnimateWidth","BaseIdTogglePanel","MainScroll","Scroll"],"mappings":";;;;;;;;;AAuGA;;;;;AAQA,IAAqB,yBAAyB,GAA9C,MAAqB,yBAA0B,SAAQ,MAAM,CAAC,YAAY,CAAC;CAQ1E,CAAA;AADC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAMA,iBAAY,EAAE,CAAC;iEACP;AAPZ,yBAAyB;IAH7C,SAAS,CAAC;QACT,UAAU,EAAE,qBAAEC,mBAAiB,cAAEC,mBAAU,UAAEC,mBAAM,EAAE;KACtD,CAAC;GACmB,yBAAyB,CAQ7C;aARoB,yBAAyB;;;;"}