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

package/js/components/layouts/single-column-layout.vue.js

@@ -6,7 +6,7 @@ import script from './single-column-layout.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     "div",
     {
       staticClass: "x-layout x-layout--single-column",
-      class: { "dev-mode": _vm.devMode }
+      class: { "dev-mode": _vm.devMode },
     },
     [
       _vm.hasContent("header")
@@ -22,16 +22,13 @@ var __vue_render__ = function() {
             "header",
             { staticClass: "x-layout__header x-list x-list--horizontal" },
             [
-              _vm._t("header", function() {
+              _vm._t("header", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("HEADER")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("HEADER") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -41,16 +38,13 @@ var __vue_render__ = function() {
             "div",
             { staticClass: "x-layout__sub-header x-list x-list--horizontal" },
             [
-              _vm._t("sub-header", function() {
+              _vm._t("sub-header", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("SUB HEADER")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("SUB HEADER") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -60,16 +54,13 @@ var __vue_render__ = function() {
             "div",
             { staticClass: "x-layout__toolbar x-list x-list--horizontal" },
             [
-              _vm._t("toolbar", function() {
+              _vm._t("toolbar", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("TOOLBAR")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("TOOLBAR") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -82,19 +73,15 @@ var __vue_render__ = function() {
               _c(
                 "BaseScroll",
                 [
-                  _vm._t("predictive", function() {
+                  _vm._t("predictive", function () {
                     return [
                       _vm.devMode
                         ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("PREDICTIVE")
-                          ])
-                        : _vm._e()
-                    ]
-                  })
-                ],
+                            _vm._v("PREDICTIVE") ])
+                        : _vm._e() ]
+                  }) ],
                 2
-              )
-            ],
+              ) ],
             1
           )
         : _vm._e(),
@@ -105,22 +92,23 @@ var __vue_render__ = function() {
             { staticClass: "x-layout__main x-list x-list--vertical" },
             [
               _c(
-                "BaseIdScroll",
-                { attrs: { id: "main-scroll" } },
+                "MainScroll",
                 [
-                  _vm._t("main", function() {
-                    return [
-                      _vm.devMode
-                        ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("MAIN")
-                          ])
-                        : _vm._e()
-                    ]
-                  })
-                ],
-                2
-              )
-            ],
+                  _c(
+                    "Scroll",
+                    { attrs: { id: "main-scroll" } },
+                    [
+                      _vm._t("main", function () {
+                        return [
+                          _vm.devMode
+                            ? _c("span", { staticClass: "slot-helper" }, [
+                                _vm._v("MAIN") ])
+                            : _vm._e() ]
+                      }) ],
+                    2
+                  ) ],
+                1
+              ) ],
             1
           )
         : _vm._e(),
@@ -130,16 +118,13 @@ var __vue_render__ = function() {
             "div",
             { staticClass: "x-layout__floating x-list x-list--horizontal" },
             [
-              _vm._t("floating", function() {
+              _vm._t("floating", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("FLOATING")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("FLOATING") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -149,16 +134,13 @@ var __vue_render__ = function() {
             "footer",
             { staticClass: "x-layout__footer x-list x-list--horizontal" },
             [
-              _vm._t("footer", function() {
+              _vm._t("footer", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("FOOTER")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("FOOTER") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -168,23 +150,19 @@ var __vue_render__ = function() {
             "BaseIdModal",
             {
               staticClass: "x-layout__aside",
-              attrs: { animation: _vm.asideAnimation, modalId: "aside-modal" }
+              attrs: { animation: _vm.asideAnimation, modalId: "aside-modal" },
             },
             [
-              _vm._t("aside", function() {
+              _vm._t("aside", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("ASIDE")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("ASIDE") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
-        : _vm._e()
-    ],
+        : _vm._e() ],
     1
   )
 };
@@ -194,11 +172,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-2893adba_0", { source: ".dev-mode .slot-helper[data-v-2893adba] {\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-2893adba] {\n  display: grid;\n  align-content: stretch;\n  justify-content: stretch;\n  height: 100%;\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 [floating-start] auto [main-end floating-end footer-start] auto [footer-end page-end];\n  grid-template-columns: 1fr;\n}\n.x-layout > *[data-v-2893adba] {\n  grid-column: 1/-1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n.x-layout__header[data-v-2893adba] {\n  grid-row: header;\n}\n.x-layout__sub-header[data-v-2893adba] {\n  grid-row: sub-header;\n}\n.x-layout__toolbar[data-v-2893adba] {\n  grid-row: toolbar;\n}\n.x-layout__predictive[data-v-2893adba] {\n  grid-row-start: header-end;\n  grid-row-end: page-end;\n  flex-flow: column nowrap;\n  z-index: 2;\n}\n.x-layout__main[data-v-2893adba] {\n  grid-row: main;\n  flex-flow: column nowrap;\n}\n.x-layout__floating[data-v-2893adba] {\n  grid-row: floating;\n  z-index: 1;\n}\n.x-layout__footer[data-v-2893adba] {\n  grid-row: footer;\n}\n.x-layout__aside[data-v-2893adba] {\n  grid-row: page;\n  z-index: 3;\n}\n.x-layout__aside[data-v-2893adba]  .x-modal__content {\n  width: 100%;\n  height: 100%;\n  margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n}\n.x-layout__predictive[data-v-2893adba], .x-layout__floating[data-v-2893adba], .x-layout__aside[data-v-2893adba],\n.x-layout .slot-helper[data-v-2893adba] {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-2893adba]  > *, .x-layout__floating[data-v-2893adba]  > *, .x-layout__aside[data-v-2893adba]  > *,\n.x-layout .slot-helper[data-v-2893adba]  > * {\n  pointer-events: all;\n}\n.x-layout__predictive[data-v-2893adba]  .x-list, .x-layout__floating[data-v-2893adba]  .x-list, .x-layout__aside[data-v-2893adba]  .x-list,\n.x-layout .slot-helper[data-v-2893adba]  .x-list {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-2893adba]  .x-list > *, .x-layout__floating[data-v-2893adba]  .x-list > *, .x-layout__aside[data-v-2893adba]  .x-list > *,\n.x-layout .slot-helper[data-v-2893adba]  .x-list > * {\n  pointer-events: all;\n}", map: undefined, media: undefined });
+    inject("data-v-1842dc0c_0", { source: ".dev-mode .slot-helper[data-v-1842dc0c] {\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-1842dc0c] {\n  display: grid;\n  align-content: stretch;\n  justify-content: stretch;\n  height: 100%;\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 [floating-start] auto [main-end floating-end footer-start] auto [footer-end page-end];\n  grid-template-columns: 1fr;\n}\n.x-layout > *[data-v-1842dc0c] {\n  grid-column: 1/-1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n.x-layout__header[data-v-1842dc0c] {\n  grid-row: header;\n}\n.x-layout__sub-header[data-v-1842dc0c] {\n  grid-row: sub-header;\n}\n.x-layout__toolbar[data-v-1842dc0c] {\n  grid-row: toolbar;\n}\n.x-layout__predictive[data-v-1842dc0c] {\n  grid-row-start: header-end;\n  grid-row-end: page-end;\n  flex-flow: column nowrap;\n  z-index: 2;\n}\n.x-layout__main[data-v-1842dc0c] {\n  grid-row: main;\n  flex-flow: column nowrap;\n}\n.x-layout__floating[data-v-1842dc0c] {\n  grid-row: floating;\n  z-index: 1;\n}\n.x-layout__footer[data-v-1842dc0c] {\n  grid-row: footer;\n}\n.x-layout__aside[data-v-1842dc0c] {\n  grid-row: page;\n  z-index: 3;\n}\n.x-layout__aside[data-v-1842dc0c]  .x-modal__content {\n  width: 100%;\n  height: 100%;\n  margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n}\n.x-layout__predictive[data-v-1842dc0c], .x-layout__floating[data-v-1842dc0c], .x-layout__aside[data-v-1842dc0c],\n.x-layout .slot-helper[data-v-1842dc0c] {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-1842dc0c]  > *, .x-layout__floating[data-v-1842dc0c]  > *, .x-layout__aside[data-v-1842dc0c]  > *,\n.x-layout .slot-helper[data-v-1842dc0c]  > * {\n  pointer-events: all;\n}\n.x-layout__predictive[data-v-1842dc0c]  .x-list, .x-layout__floating[data-v-1842dc0c]  .x-list, .x-layout__aside[data-v-1842dc0c]  .x-list,\n.x-layout .slot-helper[data-v-1842dc0c]  .x-list {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-1842dc0c]  .x-list > *, .x-layout__floating[data-v-1842dc0c]  .x-list > *, .x-layout__aside[data-v-1842dc0c]  .x-list > *,\n.x-layout .slot-helper[data-v-1842dc0c]  .x-list > * {\n  pointer-events: all;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-2893adba";
+  var __vue_scope_id__ = "data-v-1842dc0c";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/layouts/single-column-layout.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n  <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n    <header v-if=\"hasContent('header')\" class=\"x-layout__header x-list x-list--horizontal\">\n      <!-- @slot Slot that is used to insert content into the Header. -->\n      <slot name=\"header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n      </slot>\n    </header>\n    <div v-if=\"hasContent('sub-header')\" class=\"x-layout__sub-header x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n      <slot name=\"sub-header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n      </slot>\n    </div>\n\n    <div v-if=\"hasContent('toolbar')\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n      <slot name=\"toolbar\">\n        <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n      </slot>\n    </div>\n\n    <div v-if=\"hasContent('predictive')\" class=\"x-layout__predictive x-list x-list--vertical\">\n      <BaseScroll>\n        <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n        <slot name=\"predictive\">\n          <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n        </slot>\n      </BaseScroll>\n    </div>\n\n    <main v-if=\"hasContent('main')\" class=\"x-layout__main x-list x-list--vertical\">\n      <BaseIdScroll id=\"main-scroll\">\n        <!-- @slot Slot that can be used to insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </BaseIdScroll>\n    </main>\n\n    <div v-if=\"hasContent('floating')\" class=\"x-layout__floating x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Floating. -->\n      <slot name=\"floating\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n      </slot>\n    </div>\n\n    <footer v-if=\"hasContent('footer')\" class=\"x-layout__footer x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Footer. -->\n      <slot name=\"footer\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n      </slot>\n    </footer>\n\n    <BaseIdModal\n      v-if=\"hasContent('aside')\"\n      :animation=\"asideAnimation\"\n      modalId=\"aside-modal\"\n      class=\"x-layout__aside\"\n    >\n      <!-- @slot Slot that can be used to insert content into the Aside. -->\n      <slot name=\"aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n      </slot>\n    </BaseIdModal>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import TranslateFromRight from '../animations/translate-from-right.vue';\n  import BaseIdScroll from '../scroll/base-id-scroll.vue';\n  import BaseScroll from '../scroll/base-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   * @public\n   */\n  @Component({\n    components: { BaseIdScroll, BaseScroll, BaseIdModal }\n  })\n  export default class SingleColumnLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => TranslateFromRight })\n    protected asideAnimation!: Vue;\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @import '../../design-system/utilities/dev-mode';\n\n  .x-layout {\n    display: grid;\n    align-content: stretch;\n    justify-content: stretch;\n    height: 100%;\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      [floating-start]\n      auto\n      [main-end floating-end footer-start]\n      auto\n      [footer-end page-end];\n\n    grid-template-columns: 1fr;\n\n    > * {\n      grid-column: 1/-1;\n      min-width: 0;\n      min-height: 0;\n      display: flex;\n    }\n    &__header {\n      grid-row: header;\n    }\n    &__sub-header {\n      grid-row: sub-header;\n    }\n    &__toolbar {\n      grid-row: toolbar;\n    }\n    &__predictive {\n      grid-row-start: header-end;\n      grid-row-end: page-end;\n      flex-flow: column nowrap;\n      z-index: 2;\n    }\n    &__main {\n      grid-row: main;\n      flex-flow: column nowrap;\n    }\n    &__floating {\n      grid-row: floating;\n      z-index: 1;\n    }\n    &__footer {\n      grid-row: footer;\n    }\n    &__aside {\n      grid-row: page;\n      z-index: 3;\n\n      ::v-deep .x-modal__content {\n        width: 100%;\n        height: 100%;\n        margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n      }\n    }\n    &__predictive,\n    &__floating,\n    &__aside,\n    .slot-helper {\n      pointer-events: none;\n      ::v-deep > * {\n        pointer-events: all;\n      }\n\n      ::v-deep .x-list {\n        pointer-events: none;\n        > * {\n          pointer-events: all;\n        }\n      }\n    }\n  }\n</style>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n  <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n    <header v-if=\"hasContent('header')\" class=\"x-layout__header x-list x-list--horizontal\">\n      <!-- @slot Slot that is used to insert content into the Header. -->\n      <slot name=\"header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n      </slot>\n    </header>\n    <div v-if=\"hasContent('sub-header')\" class=\"x-layout__sub-header x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n      <slot name=\"sub-header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n      </slot>\n    </div>\n\n    <div v-if=\"hasContent('toolbar')\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n      <slot name=\"toolbar\">\n        <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n      </slot>\n    </div>\n\n    <div v-if=\"hasContent('predictive')\" class=\"x-layout__predictive x-list x-list--vertical\">\n      <BaseScroll>\n        <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n        <slot name=\"predictive\">\n          <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n        </slot>\n      </BaseScroll>\n    </div>\n\n    <main v-if=\"hasContent('main')\" class=\"x-layout__main x-list x-list--vertical\">\n      <MainScroll>\n        <Scroll id=\"main-scroll\">\n          <!-- @slot Slot that can be used to insert content into the Main. -->\n          <slot name=\"main\">\n            <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n          </slot>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"hasContent('floating')\" class=\"x-layout__floating x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Floating. -->\n      <slot name=\"floating\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n      </slot>\n    </div>\n\n    <footer v-if=\"hasContent('footer')\" class=\"x-layout__footer x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Footer. -->\n      <slot name=\"footer\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n      </slot>\n    </footer>\n\n    <BaseIdModal\n      v-if=\"hasContent('aside')\"\n      :animation=\"asideAnimation\"\n      modalId=\"aside-modal\"\n      class=\"x-layout__aside\"\n    >\n      <!-- @slot Slot that can be used to insert content into the Aside. -->\n      <slot name=\"aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n      </slot>\n    </BaseIdModal>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { mixins } from 'vue-class-component';\n  import { Component, 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 TranslateFromRight from '../animations/translate-from-right.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import BaseScroll from '../scroll/base-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   * @public\n   */\n  @Component({\n    components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n  })\n  export default class SingleColumnLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => TranslateFromRight })\n    protected asideAnimation!: Vue;\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @import '../../design-system/utilities/dev-mode';\n\n  .x-layout {\n    display: grid;\n    align-content: stretch;\n    justify-content: stretch;\n    height: 100%;\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      [floating-start]\n      auto\n      [main-end floating-end footer-start]\n      auto\n      [footer-end page-end];\n\n    grid-template-columns: 1fr;\n\n    > * {\n      grid-column: 1/-1;\n      min-width: 0;\n      min-height: 0;\n      display: flex;\n    }\n\n    &__header {\n      grid-row: header;\n    }\n\n    &__sub-header {\n      grid-row: sub-header;\n    }\n\n    &__toolbar {\n      grid-row: toolbar;\n    }\n\n    &__predictive {\n      grid-row-start: header-end;\n      grid-row-end: page-end;\n      flex-flow: column nowrap;\n      z-index: 2;\n    }\n\n    &__main {\n      grid-row: main;\n      flex-flow: column nowrap;\n    }\n\n    &__floating {\n      grid-row: floating;\n      z-index: 1;\n    }\n\n    &__footer {\n      grid-row: footer;\n    }\n\n    &__aside {\n      grid-row: page;\n      z-index: 3;\n\n      ::v-deep .x-modal__content {\n        width: 100%;\n        height: 100%;\n        margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n      }\n    }\n\n    &__predictive,\n    &__floating,\n    &__aside,\n    .slot-helper {\n      pointer-events: none;\n\n      ::v-deep > * {\n        pointer-events: all;\n      }\n\n      ::v-deep .x-list {\n        pointer-events: none;\n\n        > * {\n          pointer-events: all;\n        }\n      }\n    }\n  }\n</style>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/layouts/single-column-layout.vue_rollup-plugin-vue=script.js

@@ -4,7 +4,8 @@ import TranslateFromRight from '../animations/translate-from-right.vue.js';
 import { mixins } from 'vue-class-component';
 import BaseIdModal from '../modals/base-id-modal.vue.js';
 import BaseScroll from '../scroll/base-scroll.vue.js';
-import BaseIdScroll from '../scroll/base-id-scroll.vue.js';
+import MainScroll from '../../x-modules/scroll/components/main-scroll.vue.js';
+import Scroll from '../../x-modules/scroll/components/scroll.vue.js';
 import LayoutsMixin from './layouts.mixin.js';
 
 /**
@@ -22,7 +23,7 @@ var SingleColumnLayout = /** @class */ (function (_super) {
     ], SingleColumnLayout.prototype, "asideAnimation", void 0);
     SingleColumnLayout = __decorate([
         Component({
-            components: { BaseIdScroll: BaseIdScroll, BaseScroll: BaseScroll, BaseIdModal: BaseIdModal }
+            components: { BaseIdModal: BaseIdModal, BaseScroll: BaseScroll, MainScroll: MainScroll, Scroll: Scroll }
         })
     ], SingleColumnLayout);
     return SingleColumnLayout;

package/js/components/layouts/single-column-layout.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"single-column-layout.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/layouts/single-column-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\nimport Vue from 'vue';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseIdModal from '../modals/base-id-modal.vue';\nimport TranslateFromRight from '../animations/translate-from-right.vue';\nimport BaseIdScroll from '../scroll/base-id-scroll.vue';\nimport BaseScroll from '../scroll/base-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: { BaseIdScroll, BaseScroll, BaseIdModal }\n})\nexport default class SingleColumnLayout extends mixins(LayoutsMixin) {\n  /**\n   * The animation used for the Main Aside.\n   *\n   * @public\n   */\n  @Prop({ default: () => TranslateFromRight })\n  protected asideAnimation!: Vue;\n}\n"],"names":[],"mappings":";;;;;;;;;AA8EA;;;;;AAQA;IAAgD,sCAAoB;IAApE;;KAQC;IADC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,kBAAkB,GAAA,EAAE,CAAC;8DACb;IAPZ,kBAAkB;QAHtC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,YAAY,cAAA,EAAE,UAAU,YAAA,EAAE,WAAW,aAAA,EAAE;SACtD,CAAC;OACmB,kBAAkB,CAQtC;IAAD,yBAAC;CARD,CAAgD,MAAM,CAAC,YAAY,CAAC;;;;"}
+{"version":3,"file":"single-column-layout.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/layouts/single-column-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\nimport Vue from 'vue';\nimport { mixins } from 'vue-class-component';\nimport { Component, 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 TranslateFromRight from '../animations/translate-from-right.vue';\nimport BaseIdModal from '../modals/base-id-modal.vue';\nimport BaseScroll from '../scroll/base-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: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n})\nexport default class SingleColumnLayout extends mixins(LayoutsMixin) {\n  /**\n   * The animation used for the Main Aside.\n   *\n   * @public\n   */\n  @Prop({ default: () => TranslateFromRight })\n  protected asideAnimation!: Vue;\n}\n"],"names":[],"mappings":";;;;;;;;;;AAiFA;;;;;AAQA;IAAgD,sCAAoB;IAApE;;KAQC;IADC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,kBAAkB,GAAA,EAAE,CAAC;8DACb;IAPZ,kBAAkB;QAHtC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,WAAW,aAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,MAAM,QAAA,EAAE;SAC5D,CAAC;OACmB,kBAAkB,CAQtC;IAAD,yBAAC;CARD,CAAgD,MAAM,CAAC,YAAY,CAAC;;;;"}

package/js/components/location-provider.vue.js

@@ -0,0 +1,39 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './location-provider.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+//# sourceMappingURL=location-provider.vue.js.map

package/js/components/location-provider.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"location-provider.vue.js","sources":["../../../src/components/location-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Prop, Provide, Component } from 'vue-property-decorator';\n  import { NoElement } from '../components/no-element';\n  import { FeatureLocation } from '../types';\n\n  /**\n   * Location Provider component.\n   * This component injects the location with value passed as prop.\n   *\n   * @public\n   */\n  @Component\n  export default class LocationProvider extends NoElement {\n    /**\n     * The {@link FeatureLocation} to provide.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    @Provide()\n    protected location!: FeatureLocation;\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events. However, events emitted by child components, will include the\n`location` prop value in its metadata.\n\n## See it in action\n\nIn this example, the `LocationProvider` component receives the `location` prop with the\n`predictive_layer` value. This value will then be combined with the `NextQueries` feature name,\n`next_query` to create a `QueryOrigin` string, which is used for tracking the performance of the\ndifferent tools that generate the query.\n\n```vue\n<template>\n  <LocationProvider location=\"predictive_layer\">\n    <NextQueries />\n  </LocationProvider>\n</template>\n<script>\n  import { LocationProvider } from '@empathyco/x-components';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  export default {\n    name: 'LocationProviderDemo',\n    components: {\n      LocationProvider,\n      NextQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/location-provider.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,27 @@
+import { __extends, __decorate } from 'tslib';
+import { Prop, Provide, Component } from 'vue-property-decorator';
+import { NoElement } from './no-element.js';
+
+/**
+ * Location Provider component.
+ * This component injects the location with value passed as prop.
+ *
+ * @public
+ */
+var LocationProvider = /** @class */ (function (_super) {
+    __extends(LocationProvider, _super);
+    function LocationProvider() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Prop({ required: true }),
+        Provide()
+    ], LocationProvider.prototype, "location", void 0);
+    LocationProvider = __decorate([
+        Component
+    ], LocationProvider);
+    return LocationProvider;
+}(NoElement));
+
+export default LocationProvider;
+//# sourceMappingURL=location-provider.vue_rollup-plugin-vue=script.js.map

package/js/components/location-provider.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"location-provider.vue_rollup-plugin-vue=script.js","sources":["../../../src/components/location-provider.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Prop, Provide, Component } from 'vue-property-decorator';\nimport { NoElement } from '../components/no-element';\nimport { FeatureLocation } from '../types';\n\n/**\n * Location Provider component.\n * This component injects the location with value passed as prop.\n *\n * @public\n */\n@Component\nexport default class LocationProvider extends NoElement {\n  /**\n   * The {@link FeatureLocation} to provide.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  @Provide()\n  protected location!: FeatureLocation;\n}\n"],"names":[],"mappings":";;;;AAKA;;;;;;AAOA;IAA8C,oCAAS;IAAvD;;KASC;IADC;QAFC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QACxB,OAAO,EAAE;sDAC2B;IARlB,gBAAgB;QADpC,SAAS;OACW,gBAAgB,CASpC;IAAD,uBAAC;CAAA,CAT6C,SAAS;;;;"}

package/js/components/modals/base-events-modal-close.vue.js

@@ -5,7 +5,7 @@ import script from './base-events-modal-close.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-button x-events-modal-close-button",
-        attrs: { events: _vm.events, "data-test": "close-modal" }
+        attrs: { events: _vm.events, "data-test": "close-modal" },
       },
       _vm.$listeners
     ),

package/js/components/modals/base-events-modal-open.vue.js

@@ -5,7 +5,7 @@ import script from './base-events-modal-open.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-button x-events-modal-open-button",
-        attrs: { events: _vm.events, "data-test": "open-modal" }
+        attrs: { events: _vm.events, "data-test": "open-modal" },
       },
       _vm.$listeners
     ),

package/js/components/modals/base-events-modal.vue.js

@@ -5,7 +5,7 @@ import script from './base-events-modal.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,8 +15,8 @@ var __vue_render__ = function() {
       attrs: { animation: _vm.animation, open: _vm.isOpen },
       on: {
         "click:overlay": _vm.emitBodyClickEvent,
-        "focusin:body": _vm.emitBodyClickEvent
-      }
+        "focusin:body": _vm.emitBodyClickEvent,
+      },
     },
     [_vm._t("default")],
     2

package/js/components/modals/base-id-modal-close.vue.js

@@ -5,7 +5,7 @@ import script from './base-id-modal-close.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-button x-events-modal-id-close-button",
-        attrs: { events: _vm.events, "data-test": "close-modal-id" }
+        attrs: { events: _vm.events, "data-test": "close-modal-id" },
       },
       _vm.$listeners
     ),

package/js/components/modals/base-id-modal-open.vue.js

@@ -5,7 +5,7 @@ import script from './base-id-modal-open.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-button x-events-modal-id-open-button",
-        attrs: { events: _vm.events, "data-test": "open-modal-id" }
+        attrs: { events: _vm.events, "data-test": "open-modal-id" },
       },
       _vm.$listeners
     ),

package/js/components/modals/base-id-modal.vue.js

@@ -5,7 +5,7 @@ import script from './base-id-modal.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,8 +15,8 @@ var __vue_render__ = function() {
       attrs: { animation: _vm.animation, open: _vm.isOpen },
       on: {
         "click:overlay": _vm.emitClickOutOfModal,
-        "focusin:body": _vm.emitClickOutOfModal
-      }
+        "focusin:body": _vm.emitClickOutOfModal,
+      },
     },
     [_vm._t("default")],
     2

package/js/components/modals/base-modal.vue.js

@@ -6,7 +6,7 @@ import script from './base-modal.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,13 +15,13 @@ var __vue_render__ = function() {
     {
       tag: "component",
       on: {
-        beforeEnter: function($event) {
+        beforeEnter: function ($event) {
           _vm.showOverlay = false;
         },
-        afterEnter: function($event) {
+        afterEnter: function ($event) {
           _vm.showOverlay = true;
-        }
-      }
+        },
+      },
     },
     [
       _vm.open
@@ -34,7 +34,7 @@ var __vue_render__ = function() {
                 {
                   ref: "modal",
                   staticClass: "x-modal__content x-list",
-                  attrs: { "data-test": "modal-content", role: "dialog" }
+                  attrs: { "data-test": "modal-content", role: "dialog" },
                 },
                 [_vm._t("default")],
                 2
@@ -44,12 +44,10 @@ var __vue_render__ = function() {
                 staticClass: "x-modal__overlay",
                 class: { "x-modal__overlay--is-visible": _vm.showOverlay },
                 attrs: { "data-test": "modal-overlay" },
-                on: { click: _vm.emitOverlayClicked }
-              })
-            ]
+                on: { click: _vm.emitOverlayClicked },
+              }) ]
           )
-        : _vm._e()
-    ]
+        : _vm._e() ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/modals/base-modal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-modal.vue.js","sources":["../../../../src/components/modals/base-modal.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" @beforeEnter=\"showOverlay = false\" @afterEnter=\"showOverlay = true\">\n    <div v-if=\"open\" class=\"x-modal\" data-test=\"modal\">\n      <div ref=\"modal\" class=\"x-modal__content x-list\" data-test=\"modal-content\" role=\"dialog\">\n        <!-- @slot (Required) Modal container content -->\n        <slot />\n      </div>\n      <div\n        @click=\"emitOverlayClicked\"\n        class=\"x-modal__overlay\"\n        :class=\"{ 'x-modal__overlay--is-visible': showOverlay }\"\n        data-test=\"modal-overlay\"\n      />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NoElement } from '../no-element';\n\n  /**\n   * Base component with no XPlugin dependencies that serves as a utility for constructing more\n   * complex modals.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseModal extends Vue {\n    /**\n     * Animation to use for opening/closing the modal.\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Determines if the modal is open or not.\n     */\n    @Prop({ required: true })\n    public open!: boolean;\n\n    /** The previous value of the body overflow style. */\n    protected previousBodyOverflow = '';\n    /** The previous value of the HTML element overflow style. */\n    protected previousHTMLOverflow = '';\n    /** To animate the overlay opacity after and before the animation. */\n    protected showOverlay = true;\n\n    public $refs!: {\n      modal: HTMLDivElement;\n    };\n\n    protected mounted(): void {\n      /* Watcher added after mount to prevent SSR from breaking */\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.$watch('open', this.syncBody, { immediate: true });\n    }\n\n    /**\n     * Syncs the body to the open state of the modal, adding or removing styles and listeners.\n     *\n     * @param isOpen - True when the modal is opened.\n     * @internal\n     */\n    protected syncBody(isOpen: boolean): void {\n      if (isOpen) {\n        this.disableScroll();\n        this.addBodyListeners();\n        /* eslint-disable @typescript-eslint/unbound-method */\n        this.$on('hook:beforeDestroy', this.removeBodyListeners);\n        this.$on('hook:beforeDestroy', this.enableScroll);\n        /* eslint-enable @typescript-eslint/unbound-method */\n      } else {\n        this.enableScroll();\n        this.removeBodyListeners();\n        /* eslint-disable @typescript-eslint/unbound-method */\n        this.$off('hook:beforeDestroy', this.removeBodyListeners);\n        this.$off('hook:beforeDestroy', this.enableScroll);\n        /* eslint-enable @typescript-eslint/unbound-method */\n      }\n    }\n\n    /**\n     * Disables the scroll of both the body and the window.\n     *\n     * @internal\n     */\n    protected disableScroll(): void {\n      this.previousBodyOverflow = document.body.style.overflow;\n      this.previousHTMLOverflow = document.documentElement.style.overflow;\n      document.body.style.overflow = document.documentElement.style.overflow = 'hidden';\n    }\n\n    /**\n     * Restores the scroll of both the body and the window.\n     *\n     * @internal\n     */\n    protected enableScroll(): void {\n      document.body.style.overflow = this.previousBodyOverflow;\n      document.documentElement.style.overflow = this.previousHTMLOverflow;\n      document.body.style.overflow = document.documentElement.style.overflow = '';\n    }\n\n    /**\n     * Adds listeners to the body element ot detect if the modal should be closed.\n     *\n     * @internal\n     */\n    protected addBodyListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.body.addEventListener('focusin', this.emitFocusInBody);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Removes the body listeners.\n     *\n     * @internal\n     */\n    protected removeBodyListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.body.removeEventListener('focusin', this.emitFocusInBody);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Emits the `click:overlay` event if the click has been triggered in the overlay layer.\n     *\n     * @param event - The click event.\n     * @internal\n     */\n    protected emitOverlayClicked(event: MouseEvent): void {\n      this.$emit('click:overlay', event);\n    }\n\n    /**\n     * Emits the `focusin:body` event if a focus event has been triggered outside the modal.\n     *\n     * @param event - The focusin event.\n     * @internal\n     */\n    protected emitFocusInBody(event: FocusEvent): void {\n      if (!this.$refs.modal.contains(event.target as HTMLElement)) {\n        this.$emit('focusin:body', event);\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    width: 100%;\n    height: 100%;\n\n    z-index: 1;\n\n    &__content {\n      z-index: 1;\n    }\n\n    &__overlay {\n      width: 100%;\n      height: 100%;\n      position: fixed;\n      background-color: rgba(0, 0, 0, 0.7);\n      opacity: 0;\n\n      &--is-visible {\n        transition: opacity 0.3s ease-out;\n        opacity: 1;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThe `BaseModal` is a simple component that serves to create complex modals. Its open state has to be\npassed via prop. It also accepts an animation to use for opening & closing.\n\nIt emits a `click:overlay` event when any part out of the content is clicked, but only if the modal\nis open.\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = true\">Open modal</button>\n    <BaseModal animation=\"fadeAndSlide\" :open=\"open\" @click:overlay=\"open = false\">\n      <h1>Hello</h1>\n      <p>The modal is working</p>\n      <button @click=\"open = false\">Close modal</button>\n    </BaseModal>\n  </div>\n</template>\n\n<script>\n  import { BaseModal, FadeAndSlide } from '@empathyco/x-components';\n  import Vue from 'vue';\n\n  Vue.component('fadeAndSlide', FadeAndSlide);\n\n  export default {\n    components: {\n      BaseModal\n    },\n    data() {\n      return {\n        open: false\n      };\n    }\n  };\n</script>\n```\n\n## Vue Events\n\nA list of events that the component will emit:\n\n- `click:overlay`: the event is emitted after the user clicks any part out of the content but only\n  if the modal is open. The event payload is the mouse event that triggers it.\n- `focusin:body`: the event is emitted after the user focus in any part out of the content but only\n  if the modal is open. The event payload is the focus event that triggers it.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-modal.vue.js","sources":["../../../../src/components/modals/base-modal.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" @beforeEnter=\"showOverlay = false\" @afterEnter=\"showOverlay = true\">\n    <div v-if=\"open\" class=\"x-modal\" data-test=\"modal\">\n      <div ref=\"modal\" class=\"x-modal__content x-list\" data-test=\"modal-content\" role=\"dialog\">\n        <!-- @slot (Required) Modal container content -->\n        <slot />\n      </div>\n      <div\n        @click=\"emitOverlayClicked\"\n        class=\"x-modal__overlay\"\n        :class=\"{ 'x-modal__overlay--is-visible': showOverlay }\"\n        data-test=\"modal-overlay\"\n      />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NoElement } from '../no-element';\n\n  /**\n   * Base component with no XPlugin dependencies that serves as a utility for constructing more\n   * complex modals.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseModal extends Vue {\n    /**\n     * Animation to use for opening/closing the modal.\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Determines if the modal is open or not.\n     */\n    @Prop({ required: true })\n    public open!: boolean;\n\n    /** The previous value of the body overflow style. */\n    protected previousBodyOverflow = '';\n    /** The previous value of the HTML element overflow style. */\n    protected previousHTMLOverflow = '';\n    /** To animate the overlay opacity after and before the animation. */\n    protected showOverlay = true;\n\n    public $refs!: {\n      modal: HTMLDivElement;\n    };\n\n    protected mounted(): void {\n      /* Watcher added after mount to prevent SSR from breaking */\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.$watch('open', this.syncBody, { immediate: true });\n    }\n\n    /**\n     * Syncs the body to the open state of the modal, adding or removing styles and listeners.\n     *\n     * @param isOpen - True when the modal is opened.\n     * @internal\n     */\n    protected syncBody(isOpen: boolean): void {\n      if (isOpen) {\n        this.disableScroll();\n        this.addBodyListeners();\n        /* eslint-disable @typescript-eslint/unbound-method */\n        this.$on('hook:beforeDestroy', this.removeBodyListeners);\n        this.$on('hook:beforeDestroy', this.enableScroll);\n        /* eslint-enable @typescript-eslint/unbound-method */\n      } else {\n        this.enableScroll();\n        this.removeBodyListeners();\n        /* eslint-disable @typescript-eslint/unbound-method */\n        this.$off('hook:beforeDestroy', this.removeBodyListeners);\n        this.$off('hook:beforeDestroy', this.enableScroll);\n        /* eslint-enable @typescript-eslint/unbound-method */\n      }\n    }\n\n    /**\n     * Disables the scroll of both the body and the window.\n     *\n     * @internal\n     */\n    protected disableScroll(): void {\n      this.previousBodyOverflow = document.body.style.overflow;\n      this.previousHTMLOverflow = document.documentElement.style.overflow;\n      document.body.style.overflow = document.documentElement.style.overflow = 'hidden';\n    }\n\n    /**\n     * Restores the scroll of both the body and the window.\n     *\n     * @internal\n     */\n    protected enableScroll(): void {\n      document.body.style.overflow = this.previousBodyOverflow;\n      document.documentElement.style.overflow = this.previousHTMLOverflow;\n      document.body.style.overflow = document.documentElement.style.overflow = '';\n    }\n\n    /**\n     * Adds listeners to the body element ot detect if the modal should be closed.\n     *\n     * @internal\n     */\n    protected addBodyListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.body.addEventListener('focusin', this.emitFocusInBody);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Removes the body listeners.\n     *\n     * @internal\n     */\n    protected removeBodyListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.body.removeEventListener('focusin', this.emitFocusInBody);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Emits the `click:overlay` event if the click has been triggered in the overlay layer.\n     *\n     * @param event - The click event.\n     * @internal\n     */\n    protected emitOverlayClicked(event: MouseEvent): void {\n      this.$emit('click:overlay', event);\n    }\n\n    /**\n     * Emits the `focusin:body` event if a focus event has been triggered outside the modal.\n     *\n     * @param event - The focusin event.\n     * @internal\n     */\n    protected emitFocusInBody(event: FocusEvent): void {\n      if (!this.$refs.modal.contains(event.target as HTMLElement)) {\n        this.$emit('focusin:body', event);\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    width: 100%;\n    height: 100%;\n\n    z-index: 1;\n\n    &__content {\n      z-index: 1;\n    }\n\n    &__overlay {\n      width: 100%;\n      height: 100%;\n      position: fixed;\n      background-color: rgba(0, 0, 0, 0.7);\n      opacity: 0;\n\n      &--is-visible {\n        transition: opacity 0.3s ease-out;\n        opacity: 1;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThe `BaseModal` is a simple component that serves to create complex modals. Its open state has to be\npassed via prop. It also accepts an animation to use for opening & closing.\n\nIt emits a `click:overlay` event when any part out of the content is clicked, but only if the modal\nis open.\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = true\">Open modal</button>\n    <BaseModal animation=\"fadeAndSlide\" :open=\"open\" @click:overlay=\"open = false\">\n      <h1>Hello</h1>\n      <p>The modal is working</p>\n      <button @click=\"open = false\">Close modal</button>\n    </BaseModal>\n  </div>\n</template>\n\n<script>\n  import { BaseModal, FadeAndSlide } from '@empathyco/x-components';\n  import Vue from 'vue';\n\n  Vue.component('fadeAndSlide', FadeAndSlide);\n\n  export default {\n    components: {\n      BaseModal\n    },\n    data() {\n      return {\n        open: false\n      };\n    }\n  };\n</script>\n```\n\n## Vue Events\n\nA list of events that the component will emit:\n\n- `click:overlay`: the event is emitted after the user clicks any part out of the content but only\n  if the modal is open. The event payload is the mouse event that triggers it.\n- `focusin:body`: the event is emitted after the user focus in any part out of the content but only\n  if the modal is open. The event payload is the focus event that triggers it.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/panels/base-header-toggle-panel.vue.js

@@ -6,7 +6,7 @@ import script from './base-header-toggle-panel.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -16,19 +16,18 @@ var __vue_render__ = function() {
     [
       _vm._t(
         "header",
-        function() {
+        function () {
           return [
             _c(
               "button",
               {
                 staticClass: "x-header-toggle-panel__header",
                 attrs: { "data-test": "toggle-panel-header" },
-                on: { click: _vm.toggleOpen }
+                on: { click: _vm.toggleOpen },
               },
               [_vm._t("header-content", null, null, { open: _vm.open })],
               2
-            )
-          ]
+            ) ]
         },
         null,
         { toggleOpen: _vm.toggleOpen, open: _vm.open }
@@ -39,8 +38,7 @@ var __vue_render__ = function() {
         { attrs: { open: _vm.open, animation: _vm.animation } },
         [_vm._t("default")],
         2
-      )
-    ],
+      ) ],
     2
   )
 };