@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1,235 +1,157 @@
-import script from './fixed-header-and-asides-layout.vue2.js';
+import _sfc_main from './fixed-header-and-asides-layout.vue2.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, createCommentVNode, renderSlot } from 'vue';
 import './fixed-header-and-asides-layout.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* 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(
-    "MainScroll",
-    [
-      _c(
-        "Scroll",
-        {
-          staticClass: "x-layout x-layout--fixed-header-and-asides",
-          class: { "dev-mode": _vm.devMode },
-          attrs: { id: "main-scroll" },
-          on: { scroll: _vm.setPosition },
-        },
-        [
-          _c("div", {
-            key: "header-backdrop",
-            staticClass: "x-layout__header-backdrop",
-            class: {
-              "x-layout__header-backdrop--is-visible": _vm.isBackdropVisible,
-            },
-          }),
-          _vm.hasContent("header")
-            ? _c(
-                "header",
-                {
-                  key: "header",
-                  staticClass: "x-layout__header x-list x-list--horizontal",
-                },
-                [
-                  _vm._t("header", function () {
-                    return [
-                      _vm.devMode
-                        ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("HEADER"),
-                          ])
-                        : _vm._e(),
-                    ]
-                  }),
-                ],
-                2
-              )
-            : _vm._e(),
-          _vm.hasContent("sub-header")
-            ? _c(
-                "div",
-                { key: "sub-header", 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.hasContent("toolbar")
-            ? _c(
-                "section",
-                { key: "toolbar", staticClass: "x-layout__toolbar" },
-                [
-                  _vm._t("toolbar", function () {
-                    return [
-                      _vm.devMode
-                        ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("TOOLBAR"),
-                          ])
-                        : _vm._e(),
-                    ]
-                  }),
-                ],
-                2
-              )
-            : _vm._e(),
-          _vm.hasContent("main")
-            ? _c(
-                "main",
-                {
-                  key: "main",
-                  staticClass: "x-layout__main x-list x-list--vertical",
-                },
-                [
-                  _vm._t("main", function () {
-                    return [
-                      _vm.devMode
-                        ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("MAIN"),
-                          ])
-                        : _vm._e(),
-                    ]
-                  }),
-                ],
-                2
-              )
-            : _vm._e(),
-          _vm.hasContent("left-aside")
-            ? _c(
-                "BaseIdModal",
-                {
-                  key: "left-aside",
-                  staticClass: "x-layout__aside x-layout__aside--left",
-                  attrs: {
-                    animation: _vm.leftAsideAnimation,
-                    modalId: "left-aside",
-                  },
-                },
-                [
-                  _vm._t("left-aside", function () {
-                    return [
-                      _vm.devMode
-                        ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("LEFT ASIDE"),
-                          ])
-                        : _vm._e(),
-                    ]
-                  }),
-                ],
-                2
-              )
-            : _vm._e(),
-          _vm.hasContent("right-aside")
-            ? _c(
-                "BaseIdModal",
-                {
-                  key: "right-aside",
-                  staticClass: "x-layout__aside x-layout__aside--right",
-                  attrs: {
-                    animation: _vm.rightAsideAnimation,
-                    modalId: "right-aside",
-                  },
-                },
-                [
-                  _vm._t("right-aside", function () {
-                    return [
-                      _vm.devMode
-                        ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("RIGHT ASIDE"),
-                          ])
-                        : _vm._e(),
-                    ]
-                  }),
-                ],
-                2
-              )
-            : _vm._e(),
-          _vm._t("extra-aside", function () {
-            return [
-              _vm.devMode
-                ? _c("span", { staticClass: "slot-helper" }, [
-                    _vm._v("EXTRA ASIDE"),
-                  ])
-                : _vm._e(),
-            ]
-          }),
-          _vm.hasContent("scroll-to-top")
-            ? _c(
-                "div",
-                {
-                  key: "scroll-to-top",
-                  staticClass: "x-layout__scroll-to-top",
-                },
-                [
-                  _vm._t("scroll-to-top", function () {
-                    return [
-                      _vm.devMode
-                        ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("SCROLL TO TOP"),
-                          ])
-                        : _vm._e(),
-                    ]
-                  }),
-                ],
-                2
-              )
-            : _vm._e(),
-        ],
-        2
-      ),
-    ],
-    1
-  )
+const _hoisted_1 = {
+  key: "header",
+  class: "x-layout__header x-list x-list--horizontal"
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-5a184d92";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* 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,
-    undefined,
-    undefined,
-    undefined
-  );
+const _hoisted_2 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_3 = {
+  key: "sub-header",
+  class: "x-layout__sub-header"
+};
+const _hoisted_4 = { class: "x-layout__sub-header-content" };
+const _hoisted_5 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_6 = {
+  key: "toolbar",
+  class: "x-layout__toolbar"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_8 = {
+  key: "main",
+  class: "x-layout__main x-list x-list--vertical"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_10 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_11 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_12 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_13 = {
+  key: "scroll-to-top",
+  class: "x-layout__scroll-to-top"
+};
+const _hoisted_14 = {
+  key: 0,
+  class: "slot-helper"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseIdModal = resolveComponent("BaseIdModal");
+  const _component_Scroll = resolveComponent("Scroll");
+  const _component_MainScroll = resolveComponent("MainScroll");
+  return openBlock(), createBlock(_component_MainScroll, null, {
+    default: withCtx(() => [
+      createVNode(_component_Scroll, {
+        onScroll: _ctx.setPosition,
+        id: "main-scroll",
+        class: normalizeClass(["x-layout x-layout--fixed-header-and-asides", { "dev-mode": _ctx.devMode }])
+      }, {
+        default: withCtx(() => [
+          createElementVNode(
+            "div",
+            {
+              key: "header-backdrop",
+              class: normalizeClass(["x-layout__header-backdrop", { "x-layout__header-backdrop--is-visible": _ctx.isBackdropVisible }])
+            },
+            null,
+            2
+            /* CLASS */
+          ),
+          _ctx.devMode || _ctx.$slots["header"] ? (openBlock(), createElementBlock("header", _hoisted_1, [
+            createCommentVNode(" @slot Slot that is be used for insert content into the Header. "),
+            renderSlot(_ctx.$slots, "header", {}, () => [
+              _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_2, "HEADER")) : createCommentVNode("v-if", true)
+            ], true)
+          ])) : createCommentVNode("v-if", true),
+          _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, [
+              createCommentVNode(" @slot Slot that can be used to insert content into below the header. "),
+              renderSlot(_ctx.$slots, "sub-header", {}, () => [
+                _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_5, "SUB HEADER")) : createCommentVNode("v-if", true)
+              ], true)
+            ])
+          ])) : createCommentVNode("v-if", true),
+          _ctx.devMode || _ctx.$slots["toolbar"] ? (openBlock(), createElementBlock("section", _hoisted_6, [
+            renderSlot(_ctx.$slots, "toolbar", {}, () => [
+              createCommentVNode(" @slot Slot that can be used to insert content above the main. "),
+              _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_7, "TOOLBAR")) : createCommentVNode("v-if", true)
+            ], true)
+          ])) : createCommentVNode("v-if", true),
+          _ctx.devMode || _ctx.$slots["main"] ? (openBlock(), createElementBlock("main", _hoisted_8, [
+            createCommentVNode(" @slot Slot that is be used for insert content into the Main. "),
+            renderSlot(_ctx.$slots, "main", {}, () => [
+              _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_9, "MAIN")) : createCommentVNode("v-if", true)
+            ], true)
+          ])) : createCommentVNode("v-if", true),
+          _ctx.devMode || _ctx.$slots["left-aside"] ? (openBlock(), createBlock(_component_BaseIdModal, {
+            key: "left-aside",
+            animation: _ctx.leftAsideAnimation,
+            modalId: "left-aside",
+            class: "x-layout__aside x-layout__aside--left"
+          }, {
+            default: withCtx(() => [
+              createCommentVNode(" @slot Slot that is be used for insert content into the left aside. "),
+              renderSlot(_ctx.$slots, "left-aside", {}, () => [
+                _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "LEFT ASIDE")) : createCommentVNode("v-if", true)
+              ], true)
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["animation"])) : createCommentVNode("v-if", true),
+          _ctx.devMode || _ctx.$slots["right-aside"] ? (openBlock(), createBlock(_component_BaseIdModal, {
+            key: "right-aside",
+            animation: _ctx.rightAsideAnimation,
+            modalId: "right-aside",
+            class: "x-layout__aside x-layout__aside--right"
+          }, {
+            default: withCtx(() => [
+              createCommentVNode(" @slot Slot that is be used for insert content into the right aside. "),
+              renderSlot(_ctx.$slots, "right-aside", {}, () => [
+                _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_11, "RIGHT ASIDE")) : createCommentVNode("v-if", true)
+              ], true)
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["animation"])) : createCommentVNode("v-if", true),
+          renderSlot(_ctx.$slots, "extra-aside", {}, () => [
+            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_12, "EXTRA ASIDE")) : createCommentVNode("v-if", true)
+          ], true),
+          _ctx.devMode || _ctx.$slots["scroll-to-top"] ? (openBlock(), createElementBlock("div", _hoisted_13, [
+            renderSlot(_ctx.$slots, "scroll-to-top", {}, () => [
+              _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_14, "SCROLL TO TOP")) : createCommentVNode("v-if", true)
+            ], true)
+          ])) : createCommentVNode("v-if", true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["onScroll", "class"])
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var fixedHeaderAndAsidesLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d5a25402"]]);
 
-export { __vue_component__ as default };
+export { fixedHeaderAndAsidesLayout as default };
 //# sourceMappingURL=fixed-header-and-asides-layout.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      @scroll=\"setPosition\"\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"hasContent('header')\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"hasContent('sub-header')\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"hasContent('toolbar')\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"hasContent('main')\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"hasContent('left-aside')\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modalId=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"hasContent('right-aside')\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modalId=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div v-if=\"hasContent('scroll-to-top')\" key=\"scroll-to-top\" class=\"x-layout__scroll-to-top\">\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\n  import { Component } from 'vue-property-decorator';\n  import { mixins } from 'vue-class-component';\n  import { VueConstructor } from 'vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.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   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseIdModal,\n      MainScroll,\n      Scroll\n    }\n  })\n  export default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n    protected scrollPosition = 0;\n    protected rightAsideAnimation: VueConstructor = animateTranslate('right');\n    protected leftAsideAnimation: VueConstructor = 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</script>\n\n<style scoped lang=\"scss\">\n  @import '../../design-system-deprecated/utilities/dev-mode';\n\n  .x-layout {\n    // custom properties\n    display: grid;\n    align-content: stretch;\n    min-height: 100%;\n\n    // layout\n    max-height: 100%;\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n    --x-size-margin-layout: max(\n      var(--x-size-min-margin-layout, 20px),\n      var(--x-size-margin-max-width)\n    );\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [main-end page-end];\n\n    grid-template-columns:\n      [page-start]\n      var(--x-size-margin-layout)\n      [max-width-start]\n      1fr\n      [max-width-end]\n      var(--x-size-margin-layout)\n      [page-end];\n\n    &__header {\n      // layout\n      position: sticky;\n      top: -0.5px;\n      z-index: 2;\n      grid-row: header;\n      grid-column: page;\n      max-height: var(--x-size-max-height-layout-header, auto);\n      padding: 0 var(--x-size-margin-layout);\n\n      //color\n      background: var(--x-color-background-layout-header, transparent);\n      border-color: var(--x-size-border-color-layout-header, transparent);\n\n      // border\n      border-width: var(--x-size-border-width-layout-header, 0);\n      border-style: solid;\n    }\n\n    &__sub-header {\n      // layout\n      grid-row: sub-header;\n      grid-column: page;\n      padding: 0 var(--x-size-margin-layout);\n\n      //color\n      background: var(--x-color-background-layout-sub-header, transparent);\n      border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n      // border\n      border-width: var(--x-size-border-width-layout-sub-header, 0);\n      border-style: solid;\n    }\n\n    &__toolbar {\n      // layout\n      grid-row: toolbar;\n      grid-column: max-width;\n    }\n\n    &__main {\n      // layout\n      grid-row: main;\n      grid-column: max-width;\n    }\n\n    ::v-deep .x-layout__aside {\n      &.x-modal {\n        // layout\n        z-index: 3;\n        flex-flow: row nowrap;\n      }\n\n      // others\n      pointer-events: none;\n      > *:not(.slot-helper) {\n        pointer-events: all;\n      }\n\n      &--right.x-modal {\n        justify-content: flex-end;\n      }\n    }\n\n    &__scroll-to-top {\n      position: fixed;\n      z-index: 1;\n      bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n      right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n    }\n\n    &__header-backdrop {\n      // layout\n      grid-row: page;\n      grid-column: page;\n      position: sticky;\n      top: -0.5px;\n      z-index: 1;\n      height: var(--x-size-height-layout-backdrop, 40vh);\n      width: 100%;\n      pointer-events: none;\n\n      // color\n      background-color: var(\n        --x-color-background-layout-header-backdrop,\n        var(--x-color-base-neutral-100, white)\n      );\n      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n      // transition\n      opacity: 0;\n      transition: opacity 0.2s ease-out;\n\n      &--is-visible {\n        opacity: 1;\n      }\n    }\n  }\n\n  ::v-deep .x-layout__aside {\n    .x-modal__content {\n      background-color: transparent;\n      height: 100%;\n      width: var(--x-size-width-layout-aside, 300px);\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   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      @scroll=\"setPosition\"\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots['header']\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"devMode || $slots['sub-header']\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"devMode || $slots['toolbar']\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main\n        v-if=\"devMode || $slots['main']\"\n        key=\"main\"\n        class=\"x-layout__main x-list x-list--vertical\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modalId=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modalId=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, ref } from 'vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FixedHeaderAndAsidesLayout',\n    components: { BaseIdModal, MainScroll, Scroll },\n    props: {\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    },\n    setup() {\n      const scrollPosition = ref(0);\n\n      const rightAsideAnimation = animateTranslate('right');\n      const leftAsideAnimation = animateTranslate('left');\n\n      const setPosition = (position: number) => {\n        scrollPosition.value = position;\n      };\n      const isBackdropVisible = computed(() => scrollPosition.value > 0);\n\n      return {\n        rightAsideAnimation,\n        leftAsideAnimation,\n        setPosition,\n        isBackdropVisible\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n  .x-layout {\n    /* custom properties */\n    display: grid;\n    align-content: stretch;\n    min-height: 100%;\n\n    /* layout */\n    max-height: 100%;\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n    --x-size-margin-layout: max(\n      var(--x-size-min-margin-layout, 20px),\n      var(--x-size-margin-max-width)\n    );\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [main-end page-end];\n\n    grid-template-columns:\n      [page-start]\n      var(--x-size-margin-layout)\n      [max-width-start]\n      1fr\n      [max-width-end]\n      var(--x-size-margin-layout)\n      [page-end];\n  }\n\n  .x-layout__header {\n    /* layout */\n    position: sticky;\n    top: -0.5px;\n    z-index: 2;\n    grid-row: header;\n    grid-column: page;\n    max-height: var(--x-size-max-height-layout-header, auto);\n    padding: 0 var(--x-size-margin-layout);\n\n    /* color */\n    background: var(--x-color-background-layout-header, transparent);\n    border-color: var(--x-size-border-color-layout-header, transparent);\n\n    /* border */\n    border-width: var(--x-size-border-width-layout-header, 0);\n    border-style: solid;\n  }\n\n  .x-layout__sub-header {\n    /* layout */\n    grid-row: sub-header;\n    grid-column: page;\n    padding: 0 var(--x-size-margin-layout);\n\n    /* color */\n    background: var(--x-color-background-layout-sub-header, transparent);\n    border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n    /* border */\n    border-width: var(--x-size-border-width-layout-sub-header, 0);\n    border-style: solid;\n  }\n\n  .x-layout__toolbar {\n    /* layout */\n    grid-row: toolbar;\n    grid-column: max-width;\n  }\n\n  .x-layout__main {\n    /* layout */\n    grid-row: main;\n    grid-column: max-width;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside.x-modal) {\n    z-index: 3;\n    flex-flow: row nowrap;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside--right.x-modal) {\n    justify-content: flex-end;\n  }\n\n  /* others */\n  .x-layout :deep(.x-layout__aside) {\n    pointer-events: none;\n  }\n  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n    pointer-events: all;\n  }\n\n  .x-layout__scroll-to-top {\n    position: fixed;\n    z-index: 1;\n    bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n    right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n  }\n\n  .x-layout__header-backdrop {\n    /* layout */\n    grid-row: page;\n    grid-column: page;\n    position: sticky;\n    top: -0.5px;\n    z-index: 1;\n    height: var(--x-size-height-layout-backdrop, 40vh);\n    width: 100%;\n    pointer-events: none;\n\n    /* color */\n    background-color: var(\n      --x-color-background-layout-header-backdrop,\n      var(--x-color-base-neutral-100, white)\n    );\n    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n    /* transition */\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n  }\n  .x-layout__header-backdrop--is-visible {\n    opacity: 1;\n  }\n\n  .x-layout :deep(.x-layout__aside .x-modal__content) {\n    background-color: transparent;\n    height: 100%;\n    width: var(--x-size-width-layout-aside, 300px);\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","setPosition","_normalizeClass","_createElementVNode","devMode","$slots","_createElementBlock","_createCommentVNode","_renderSlot","leftAsideAnimation","rightAsideAnimation"],"mappings":";;;;;MAiBQ,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,QAAA;;;MAIiB,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;MAI8B,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,YAAA;;;AAzBzE,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,8BAAA,EAAA,CAAA;MA6BiC,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;MAK0B,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,SAAA;;;MAGxC,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;MAO7B,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,MAAA;;;MAIiB,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;MAaN,WAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;MAaN,WAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;MAKR,WAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;MAM3B,WAAM,GAAA;AAAA,EAAA,GAAA,EAAA,eAAA;;;MAGiB,WAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;;;;gCAvFnCA,gBA2Fa,CAAA,YAAA,CAAA,CAAA;SA1FXC,SAyFS,EAAA,EAAAC,WAAA,CAAA,qBAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EAxFNC,OAAQC,CAAAA,MAAAA;AAAAA,MAAAA,WAAAA,CACN,iBAAa,EAAA;AAAA,QAChB,QALN,EAAA,IAAA,CAAA,WAAA;AAAA,QAAA,EAAA,EAAA,aAAA;QAAA,KAYQ,EAAAC,cAAA,CAAA,CAAA,4CAAA,EAAA,EAAA,UAAA,EAAA,IAAA,CAAA,OAAA,EAAA,CAAA,CAAA;AAAA,OAAA,EAAA;AAHI,QAAA,OAAA,EAAAF,OAAA,CAAA,MAAA;AAAA,UAAAG,kBAAA;AATZ,YAAA,KAAA;AAAA,YAUc;AAAA,cAAA,GAAA,EAAA,iBAAA;AAKAC,cAAAA,KAAAA,EAAAA,cAAAA,CAAWC,CAAM,2BAAA,EAAA,EAAA,uCAAA,EAAA,IAAA,CAAA,iBAAA,EAAA,CAAA,CAAA;AAAA,aAAA;;;;AADzB,WAAA;AAAA,UAAA,IAAA,CAKE,+CAGO,EAAAC,kBAAA,CAAA,QAAA,EAAA,UAAA,EAAA;AAAA,YADcC,kBAAA,CAAA,kEAAA,CAAA;AAAA,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAnB,QAAsD,EAAA,EAAA,EAAA,MAAA;AAAA,cArBhE,IAAA,CAAA,OAAA,IAAAV,SAAA,EAAA,EAAAQ,kBAAA,CAAA,MAAA,EAAA,UAAA,EAAA,QAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,aAAA,EAAA,IAAA,CAAA;AAAA,WAyBM,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,UACE,IAAA,CAAA,OAAA,IAAA,IAAA,CAAA,MAAA,CAKM,YALN,CACE,IAAAT,SAAA,EAAA,EAAAQ,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,YAGOH,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,cADcI,kBAAA,CAAA,wEAAA,CAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAnB,kBAA0D,MAA1D;AAAA,gBA7BZ,IAAA,CAAA,OAAA,IAAAV,SAAA,EAAA,EAAAQ,kBAAA,CAAA,MAAA,EAAA,UAAA,EAAA,YAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;AAAA,aAAA,CAAA;AAAA,WAkCM,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,UAAA,IAAA,CACE,gBAGO,MAFL,CAAA,SAAA,CAAA,IAAAT,SAAA,EAAA,EAAAQ,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA;AAAA,YAAAE,UAAA,CACYJ,IAAO,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;AAAA,cAAAG,kBAAA,CAAnB,iEAAgD,CAAA;AAAA,cArC1D,IAAA,CAAA,OAAA,IAAAT,SAAA,EAAA,EAAAQ,kBAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,aAAA,EAAA,IAAA,CAAA;AAAA,WAyCM,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,UAAA,IAAA,CAKE,6CAGO,EAAAD,kBAAA,CAAA,MAAA,EAAA,UAAA,EAAA;AAAA,YADcC,kBAAA,CAAA,gEAAA,CAAA;AAAA,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAnB,MAAoD,EAAA,EAAA,EAAA,MAAA;AAAA,cAhD9D,IAAA,CAAA,OAAA,IAAAV,SAAA,EAAA,EAAAQ,kBAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,aAAA,EAAA,IAAA,CAAA;AAAA,mCAoDM,MAWc,EAAA,IAAA,CAAA;AAAA,UAAA,IAAA,CATZ,OAAI,IAAA,IAAA,CAAA,MAAA,CAAY,YACN,CAAA,IAAAT,SAAA,EAAA,EAAEW,WAAkB,CAAA,sBAAA,EAAA;AAAA,YAC9B,GAAA,EAAA,YAAA;AAAA,YACA,SAAM,EAAA,IAAA,CAAA,kBAAA;AAAA,YAAA,OAAA,EAAA,YAAA;AAzDd,YAAA,KAAA,EAAA,uCAAA;AAAA,WAAA,EAAA;qBA4DQT,OAEO,CAAA,MAAA;AAAA,cADcO,kBAAA,CAAA,sEAAA,CAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAnB,kBAA0D,MAA1D;AAAA,gBA7DV,IAAA,CAAA,OAAA,IAAAV,SAAA,EAAA,EAAAQ,kBAAA,CAAA,MAAA,EAAA,WAAA,EAAA,YAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,eAAA,EAAA,IAAA,CAAA;AAAA,aAAA,CAAA;AAAA,YAAA,CAAA,EAAA,CAAA;AAAA;AAAA,WAkEcH,EAAAA,CAAAA,EAAWC,CAAM,WAAA,CAAA,CAAA,IAAAE,kBAAA,CADzB,MAWc,EAAA,IAAA,CAAA;AAAA,UAAA,IAAA,CATZ,OAAI,IAAA,IAAA,CAAA,MAAA,CAAa,aACP,CAAA,IAAAT,SAAA,EAAA,EAAEY,WAAmB,CAAA,sBAAA,EAAA;AAAA,YAC/B,GAAA,EAAA,aAAA;AAAA,YACA,SAAM,EAAA,IAAA,CAAA,mBAAA;AAAA,YAAA,OAAA,EAAA,aAAA;AAtEd,YAAA,KAAA,EAAA,wCAAA;AAAA,WAAA,EAAA;qBAyEQV,OAEO,CAAA,MAAA;AAAA,cADcO,kBAAA,CAAA,uEAAA,CAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAnB,iBAAA,EAAA,MAAA;AAAA,gBA1EV,IAAA,CAAA,OAAA,IAAAV,SAAA,EAAA,EAAAQ,kBAAA,CAAA,MAAA,EAAA,WAAA,EAAA,aAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,eAAA,EAAA,IAAA,CAAA;AAAA,aAAA,CAAA;AAAA,YAAA,CAAA,EAAA,CAAA;AAAA;AAAA,WA8EM,EAAA,CAAA,EAEO,kBADOH,kBAAO,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,UAAAI,UAAA,CAAA,IAAA,CAAA,MAAA,EAAnB,iBAAA,EAAA,MAAA;AAAA,YA/ER,IAAA,CAAA,OAAA,IAAAV,SAAA,EAAA,EAAAQ,kBAAA,CAAA,MAAA,EAAA,WAAA,EAAA,aAAA,CAAA,IAmFcF,mBAAWC,MAAM,EAAA,IAAA,CAAA;AAAA,WAAA,EAAA,IAAA,CAAA;AAIvB,UAAA,IAAA,CAAA,OAAA,IAAA,IAAA,CAEO,sCADc,EAAAC,kBAAA,CAAA,KAAA,EAAA,WAAA,EAAA;AAAA,YAAAE,UAAA,CAAA,IAAA,CAAA,MAAA,EAAnB,iBAA6D,EAA7D,EAAA,MAAA;AAAA,cAxFV,IAAA,CAAA,OAAA,IAAAV,SAAA,EAAA,EAAAQ,kBAAA,CAAA,MAAA,EAAA,WAAA,EAAA,eAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,aAAA,EAAA,IAAA,CAAA;AAAA,WAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,SAAA,CAAA;;;AAAA,OAAA,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,OAAA,CAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1,11 +1,8 @@
-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 { defineComponent, ref, computed } from 'vue';
 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';
+import Scroll from '../../x-modules/scroll/components/scroll.vue.js';
+import BaseIdModal from '../modals/base-id-modal.vue.js';
+import _sfc_main$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
 
 /**
  * Component for use as Layout to be filled with the rest of the components.
@@ -14,30 +11,29 @@ import LayoutsMixin from './layouts.mixin.js';
  *
  * @public
  */
-let FixedHeaderAndAsidesLayout = class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {
-    constructor() {
-        super(...arguments);
-        this.scrollPosition = 0;
-        this.rightAsideAnimation = animateTranslate('right');
-        this.leftAsideAnimation = animateTranslate('left');
+var _sfc_main = defineComponent({
+    name: 'FixedHeaderAndAsidesLayout',
+    components: { BaseIdModal, MainScroll: _sfc_main$1, Scroll },
+    props: {
+        /** Enables the devMode, which shows the available slots to use with its names. */
+        devMode: Boolean
+    },
+    setup() {
+        const scrollPosition = ref(0);
+        const rightAsideAnimation = animateTranslate('right');
+        const leftAsideAnimation = animateTranslate('left');
+        const setPosition = (position) => {
+            scrollPosition.value = position;
+        };
+        const isBackdropVisible = computed(() => scrollPosition.value > 0);
+        return {
+            rightAsideAnimation,
+            leftAsideAnimation,
+            setPosition,
+            isBackdropVisible
+        };
     }
-    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 };
+export { _sfc_main as default };
 //# sourceMappingURL=fixed-header-and-asides-layout.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue2.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue?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  import { Component } from 'vue-property-decorator';\n  import { mixins } from 'vue-class-component';\n  import { VueConstructor } from 'vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.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   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseIdModal,\n      MainScroll,\n      Scroll\n    }\n  })\n  export default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n    protected scrollPosition = 0;\n    protected rightAsideAnimation: VueConstructor = animateTranslate('right');\n    protected leftAsideAnimation: VueConstructor = 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":";;;;;;;;;AAiGE;;;;;;AAMG;AAQY,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,MAAM,CAAC,YAAY,CAAC,CAAA;AAA7D,IAAA,WAAA,GAAA;;QACH,IAAc,CAAA,cAAA,GAAG,CAAC,CAAC;AACnB,QAAA,IAAA,CAAA,mBAAmB,GAAmB,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAChE,QAAA,IAAA,CAAA,kBAAkB,GAAmB,gBAAgB,CAAC,MAAM,CAAC,CAAC;KASzE;AAPW,IAAA,WAAW,CAAC,QAAgB,EAAA;AACpC,QAAA,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;AAED,IAAA,IAAc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;KAChC;CACF,CAAA;AAZoB,0BAA0B,GAAA,UAAA,CAAA;AAP9C,IAAA,SAAS,CAAC;AACT,QAAA,UAAU,EAAE;yBACVA,iBAAW;wBACXC,mBAAU;oBACVC,mBAAM;AACP,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,0BAA0B,CAY9C,CAAA;aAZoB,0BAA0B;;;;"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue2.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      @scroll=\"setPosition\"\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots['header']\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"devMode || $slots['sub-header']\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"devMode || $slots['toolbar']\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main\n        v-if=\"devMode || $slots['main']\"\n        key=\"main\"\n        class=\"x-layout__main x-list x-list--vertical\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modalId=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modalId=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, ref } from 'vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FixedHeaderAndAsidesLayout',\n    components: { BaseIdModal, MainScroll, Scroll },\n    props: {\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    },\n    setup() {\n      const scrollPosition = ref(0);\n\n      const rightAsideAnimation = animateTranslate('right');\n      const leftAsideAnimation = animateTranslate('left');\n\n      const setPosition = (position: number) => {\n        scrollPosition.value = position;\n      };\n      const isBackdropVisible = computed(() => scrollPosition.value > 0);\n\n      return {\n        rightAsideAnimation,\n        leftAsideAnimation,\n        setPosition,\n        isBackdropVisible\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n  .x-layout {\n    /* custom properties */\n    display: grid;\n    align-content: stretch;\n    min-height: 100%;\n\n    /* layout */\n    max-height: 100%;\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n    --x-size-margin-layout: max(\n      var(--x-size-min-margin-layout, 20px),\n      var(--x-size-margin-max-width)\n    );\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [main-end page-end];\n\n    grid-template-columns:\n      [page-start]\n      var(--x-size-margin-layout)\n      [max-width-start]\n      1fr\n      [max-width-end]\n      var(--x-size-margin-layout)\n      [page-end];\n  }\n\n  .x-layout__header {\n    /* layout */\n    position: sticky;\n    top: -0.5px;\n    z-index: 2;\n    grid-row: header;\n    grid-column: page;\n    max-height: var(--x-size-max-height-layout-header, auto);\n    padding: 0 var(--x-size-margin-layout);\n\n    /* color */\n    background: var(--x-color-background-layout-header, transparent);\n    border-color: var(--x-size-border-color-layout-header, transparent);\n\n    /* border */\n    border-width: var(--x-size-border-width-layout-header, 0);\n    border-style: solid;\n  }\n\n  .x-layout__sub-header {\n    /* layout */\n    grid-row: sub-header;\n    grid-column: page;\n    padding: 0 var(--x-size-margin-layout);\n\n    /* color */\n    background: var(--x-color-background-layout-sub-header, transparent);\n    border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n    /* border */\n    border-width: var(--x-size-border-width-layout-sub-header, 0);\n    border-style: solid;\n  }\n\n  .x-layout__toolbar {\n    /* layout */\n    grid-row: toolbar;\n    grid-column: max-width;\n  }\n\n  .x-layout__main {\n    /* layout */\n    grid-row: main;\n    grid-column: max-width;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside.x-modal) {\n    z-index: 3;\n    flex-flow: row nowrap;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside--right.x-modal) {\n    justify-content: flex-end;\n  }\n\n  /* others */\n  .x-layout :deep(.x-layout__aside) {\n    pointer-events: none;\n  }\n  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n    pointer-events: all;\n  }\n\n  .x-layout__scroll-to-top {\n    position: fixed;\n    z-index: 1;\n    bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n    right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n  }\n\n  .x-layout__header-backdrop {\n    /* layout */\n    grid-row: page;\n    grid-column: page;\n    position: sticky;\n    top: -0.5px;\n    z-index: 1;\n    height: var(--x-size-height-layout-backdrop, 40vh);\n    width: 100%;\n    pointer-events: none;\n\n    /* color */\n    background-color: var(\n      --x-color-background-layout-header-backdrop,\n      var(--x-color-base-neutral-100, white)\n    );\n    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n    /* transition */\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n  }\n  .x-layout__header-backdrop--is-visible {\n    opacity: 1;\n  }\n\n  .x-layout :deep(.x-layout__aside .x-modal__content) {\n    background-color: transparent;\n    height: 100%;\n    width: var(--x-size-width-layout-aside, 300px);\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":["MainScroll"],"mappings":";;;;;;AAsGE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,UAAU,EAAE,EAAE,WAAW,cAAEA,WAAU,EAAE,QAAQ;AAC/C,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE,OAAM;AAChB,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,cAAe,GAAE,GAAG,CAAC,CAAC,CAAC,CAAA;AAE7B,QAAA,MAAM,mBAAoB,GAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;AACrD,QAAA,MAAM,kBAAmB,GAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;AAEnD,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAK;AACxC,YAAA,cAAc,CAAC,KAAI,GAAI,QAAQ,CAAA;AACjC,SAAC,CAAA;AACD,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAI,GAAI,CAAC,CAAC,CAAA;QAElE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAgB;SACjB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../tools/inject-css.js';
 
-var css = ".dev-mode .slot-helper[data-v-5a184d92] {\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-5a184d92] {\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];\n  grid-template-columns: [page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];\n}\n.x-layout__header[data-v-5a184d92] {\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n.x-layout__sub-header[data-v-5a184d92] {\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n.x-layout__toolbar[data-v-5a184d92] {\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n.x-layout__main[data-v-5a184d92] {\n  grid-row: main;\n  grid-column: max-width;\n}\n.x-layout[data-v-5a184d92]  .x-layout__aside {\n  pointer-events: none;\n}\n.x-layout[data-v-5a184d92]  .x-layout__aside.x-modal {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n.x-layout[data-v-5a184d92]  .x-layout__aside > *:not(.slot-helper) {\n  pointer-events: all;\n}\n.x-layout[data-v-5a184d92]  .x-layout__aside--right.x-modal {\n  justify-content: flex-end;\n}\n.x-layout__scroll-to-top[data-v-5a184d92] {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n.x-layout__header-backdrop[data-v-5a184d92] {\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n  background-color: var(--x-color-background-layout-header-backdrop, var(--x-color-base-neutral-100, white));\n  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n          mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible[data-v-5a184d92] {\n  opacity: 1;\n}\n[data-v-5a184d92] .x-layout__aside .x-modal__content {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".dev-mode .slot-helper{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-d5a25402]{--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout, 1440px))/2);--x-size-margin-layout:max(var(--x-size-min-margin-layout,20px),var(--x-size-margin-max-width));align-content:stretch;display:grid;grid-template-columns:[page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];max-height:100%;min-height:100%}.x-layout__header[data-v-d5a25402]{background:var(--x-color-background-layout-header,transparent);border-color:var(--x-size-border-color-layout-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-header,0);grid-column:page;grid-row:header;max-height:var(--x-size-max-height-layout-header,auto);padding:0 var(--x-size-margin-layout);position:sticky;top:-.5px;z-index:2}.x-layout__sub-header[data-v-d5a25402]{background:var(--x-color-background-layout-sub-header,transparent);border-color:var(--x-size-border-color-layout-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-sub-header,0);grid-column:page;grid-row:sub-header;padding:0 var(--x-size-margin-layout)}.x-layout__toolbar[data-v-d5a25402]{grid-column:max-width;grid-row:toolbar}.x-layout__main[data-v-d5a25402]{grid-column:max-width;grid-row:main}.x-layout[data-v-d5a25402] .x-layout__aside.x-modal{flex-flow:row nowrap;z-index:3}.x-layout[data-v-d5a25402] .x-layout__aside--right.x-modal{justify-content:flex-end}.x-layout[data-v-d5a25402] .x-layout__aside{pointer-events:none}.x-layout[data-v-d5a25402] .x-layout__aside>:not(.slot-helper){pointer-events:all}.x-layout__scroll-to-top[data-v-d5a25402]{bottom:var(--x-size-margin-bottom-layout-scroll-to-top,16px);position:fixed;right:var(--x-size-margin-right-layout-scroll-to-top,16px);z-index:1}.x-layout__header-backdrop[data-v-d5a25402]{background-color:var(\n      --x-color-background-layout-header-backdrop,var(--x-color-base-neutral-100,#fff)\n    );grid-column:page;grid-row:page;height:var(--x-size-height-layout-backdrop,40vh);mask:linear-gradient(180deg,rgba(0,0,0,.8),transparent);opacity:0;pointer-events:none;position:sticky;top:-.5px;transition:opacity .2s ease-out;width:100%;z-index:1}.x-layout__header-backdrop--is-visible[data-v-d5a25402]{opacity:1}.x-layout[data-v-d5a25402] .x-layout__aside .x-modal__content{background-color:transparent;height:100%;width:var(--x-size-width-layout-aside,300px)}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=fixed-header-and-asides-layout.vue3.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}