@empathyco/x-components 3.0.0-alpha.21 → 3.0.0-alpha.210

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

@@ -0,0 +1,16 @@
+import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+
+var css = ":root {\n  --x-size-min-margin-layout-columns: var(--x-size-base-06);\n  --x-size-column-gap-layout-columns: var(--x-size-base-06);\n  --x-size-padding-top-layout-columns-header: var(--x-size-base-07);\n  --x-size-padding-bottom-layout-columns-header: var(--x-size-base-05);\n  --x-size-padding-top-layout-columns-toolbar: var(--x-size-base-05);\n  --x-size-padding-bottom-layout-columns-toolbar: var(--x-size-base-03);\n  --x-size-margin-bottom-layout-columns-scroll-to-top: var(--x-size-base-03);\n  --x-size-margin-left-layout-columns-scroll-to-top: var(--x-size-base-03);\n  --x-color-background-layout-columns: var(--x-color-base-neutral-100);\n  --x-color-border-layout-columns: var(--x-color-base-neutral-70);\n  --x-color-border-layout-columns-header: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-sub-header: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-toolbar: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main-aside: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main-body: var(--x-color-border-layout-columns);\n  --x-size-border-width-layout-columns-header: 0;\n  --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n}";
+           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('/__w/x/x/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=multi-column-max-width-layout.vue_rollup-plugin-vue_styles.0.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-max-width-layout.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,16 @@
+import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+
+var css = ".dev-mode .slot-helper[data-v-24f2b448] {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\n.x-layout[data-v-24f2b448] {\n  --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n  --x-size-margin-layout-columns: max(\n    var(--x-size-min-margin-layout-columns, 20px),\n    var(--x-size-margin-max-width)\n  );\n  --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n  --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n  --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n  display: grid;\n  align-content: stretch;\n  max-height: 100%;\n  grid-template-columns: [page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];\n}\n.x-layout__header[data-v-24f2b448] {\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle), 1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];\n  padding-top: var(--x-size-padding-top-layout-columns-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-header, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-header, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-header, 0);\n  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n.x-layout__header-start[data-v-24f2b448] {\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list[data-v-24f2b448] {\n  flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n  align-items: var(--x-size-align-layout-columns-header-start, flex start);\n}\n.x-layout__header-middle[data-v-24f2b448] {\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list[data-v-24f2b448] {\n  flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n  align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n}\n.x-layout__header-end[data-v-24f2b448] {\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list[data-v-24f2b448] {\n  flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n  align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n}\n.x-layout__sub-header[data-v-24f2b448] {\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content), 1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];\n  padding-top: var(--x-size-padding-top-layout-columns-sub-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n  margin-top: var(--x-size-margin-top-layout-columns-sub-header, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n  background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n  border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n.x-layout__sub-header-content[data-v-24f2b448] {\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list[data-v-24f2b448] {\n  flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n  align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n}\n.x-layout__toolbar[data-v-24f2b448] {\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body), 1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];\n  padding-top: var(--x-size-padding-top-layout-columns-toolbar, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-toolbar, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n.x-layout__toolbar-aside[data-v-24f2b448] {\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list[data-v-24f2b448] {\n  flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n  align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n}\n.x-layout__toolbar-body[data-v-24f2b448] {\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list[data-v-24f2b448] {\n  flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n  align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n}\n.x-layout__main[data-v-24f2b448] {\n  grid-column: page;\n  grid-row: main;\n  min-height: 0;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: stretch;\n  padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n  padding-top: var(--x-size-padding-top-layout-columns-main, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-main, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-main, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-main, 0);\n  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n.x-layout__collapse-aside[data-v-24f2b448] {\n  width: calc((100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns)) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default));\n}\n.x-layout__aside-scroll[data-v-24f2b448] {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n.x-layout__body-scroll[data-v-24f2b448] {\n  flex: 1 1 auto;\n  width: 0;\n  padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n}\n.x-layout__body-scroll.x-scroll[data-v-24f2b448] {\n  --x-string-overflow-scroll: scroll;\n}\n.x-layout__scroll-to-top[data-v-24f2b448] {\n  grid-area: scroll-to-top;\n  justify-content: flex-end;\n  width: 100%;\n  display: flex;\n  z-index: 1;\n  pointer-events: none;\n}\n[dir=\"ltr\"] .x-layout__scroll-to-top-content[data-v-24f2b448] {\n  padding-left: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n[dir=\"rtl\"] .x-layout__scroll-to-top-content[data-v-24f2b448] {\n  padding-right: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content[data-v-24f2b448] {\n  flex: 1 0 auto;\n  padding-bottom: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content[data-v-24f2b448]  > * {\n  pointer-events: all;\n}";
+           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('/__w/x/x/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue?rollup-plugin-vue=styles.1.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=multi-column-max-width-layout.vue_rollup-plugin-vue_styles.1.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-max-width-layout.vue_rollup-plugin-vue_styles.1.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

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

@@ -1,12 +1,11 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './single-column-layout.vue_rollup-plugin-vue=script.js';
+import script from './single-column-layout.vue_rollup-plugin-vue_script.vue.js';
+import './single-column-layout.vue_rollup-plugin-vue_styles.0.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
-
+const __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 +13,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,15 +21,15 @@ 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._v("HEADER"),
                       ])
-                    : _vm._e()
+                    : _vm._e(),
                 ]
-              })
+              }),
             ],
             2
           )
@@ -41,15 +40,15 @@ 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._v("SUB HEADER"),
                       ])
-                    : _vm._e()
+                    : _vm._e(),
                 ]
-              })
+              }),
             ],
             2
           )
@@ -60,15 +59,15 @@ 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._v("TOOLBAR"),
                       ])
-                    : _vm._e()
+                    : _vm._e(),
                 ]
-              })
+              }),
             ],
             2
           )
@@ -81,19 +80,23 @@ var __vue_render__ = function() {
             [
               _c(
                 "BaseScroll",
+                {
+                  staticClass:
+                    "x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand",
+                },
                 [
-                  _vm._t("predictive", function() {
+                  _vm._t("predictive", function () {
                     return [
                       _vm.devMode
                         ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("PREDICTIVE")
+                            _vm._v("PREDICTIVE"),
                           ])
-                        : _vm._e()
+                        : _vm._e(),
                     ]
-                  })
+                  }),
                 ],
                 2
-              )
+              ),
             ],
             1
           )
@@ -102,24 +105,34 @@ var __vue_render__ = function() {
       _vm.hasContent("main")
         ? _c(
             "main",
-            { staticClass: "x-layout__main x-list x-list--vertical" },
+            { staticClass: "x-layout__main" },
             [
               _c(
-                "BaseIdScroll",
-                { attrs: { id: "main-scroll" } },
+                "MainScroll",
                 [
-                  _vm._t("main", function() {
-                    return [
-                      _vm.devMode
-                        ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("MAIN")
-                          ])
-                        : _vm._e()
-                    ]
-                  })
+                  _c(
+                    "Scroll",
+                    {
+                      staticClass:
+                        "x-layout__main-scroll x-list x-list--vertical",
+                      attrs: { id: "main-scroll" },
+                    },
+                    [
+                      _vm._t("main", function () {
+                        return [
+                          _vm.devMode
+                            ? _c("span", { staticClass: "slot-helper" }, [
+                                _vm._v("MAIN"),
+                              ])
+                            : _vm._e(),
+                        ]
+                      }),
+                    ],
+                    2
+                  ),
                 ],
-                2
-              )
+                1
+              ),
             ],
             1
           )
@@ -130,15 +143,15 @@ 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._v("FLOATING"),
                       ])
-                    : _vm._e()
+                    : _vm._e(),
                 ]
-              })
+              }),
             ],
             2
           )
@@ -149,15 +162,15 @@ 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._v("FOOTER"),
                       ])
-                    : _vm._e()
+                    : _vm._e(),
                 ]
-              })
+              }),
             ],
             2
           )
@@ -168,48 +181,56 @@ 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._v("ASIDE"),
                       ])
-                    : _vm._e()
+                    : _vm._e(),
                 ]
-              })
+              }),
             ],
             2
           )
-        : _vm._e()
+        : _vm._e(),
+      _vm._v(" "),
+      _vm._t("extra-aside", function () {
+        return [
+          _vm.devMode
+            ? _c("span", { staticClass: "slot-helper" }, [
+                _vm._v("EXTRA ASIDE"),
+              ])
+            : _vm._e(),
+        ]
+      }),
     ],
-    1
+    2
   )
 };
 var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-62760e49_0", { source: ".x-layout[data-v-62760e49] {\n  display: grid;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  -ms-flex-pack: 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-62760e49] {\n  grid-column: 1/-1;\n  min-width: 0;\n  min-height: 0;\n  display: -ms-flexbox;\n  display: flex;\n}\n.x-layout__header[data-v-62760e49] {\n  grid-row: header;\n}\n.x-layout__sub-header[data-v-62760e49] {\n  grid-row: sub-header;\n}\n.x-layout__toolbar[data-v-62760e49] {\n  grid-row: toolbar;\n}\n.x-layout__predictive[data-v-62760e49] {\n  grid-row-start: header-end;\n  grid-row-end: page-end;\n  -ms-flex-flow: column nowrap;\n      flex-flow: column nowrap;\n  z-index: 2;\n}\n.x-layout__main[data-v-62760e49] {\n  grid-row: main;\n  -ms-flex-flow: column nowrap;\n      flex-flow: column nowrap;\n}\n.x-layout__floating[data-v-62760e49] {\n  grid-row: floating;\n  z-index: 1;\n}\n.x-layout__footer[data-v-62760e49] {\n  grid-row: footer;\n}\n.x-layout__aside[data-v-62760e49] {\n  grid-row: page;\n  z-index: 3;\n}\n[dir=\"ltr\"] .x-layout__aside[data-v-62760e49]  .x-modal__content {\n          margin-left: var(--x-size-margin-left-layout-s, 0);\n}\n[dir=\"rtl\"] .x-layout__aside[data-v-62760e49]  .x-modal__content {\n          margin-right: var(--x-size-margin-left-layout-s, 0);\n}\n.x-layout__aside[data-v-62760e49]  .x-modal__content {\n  -webkit-margin-start: var(--x-size-margin-left-layout-s, 0);\n}\n.x-layout__predictive[data-v-62760e49], .x-layout__floating[data-v-62760e49], .x-layout__aside[data-v-62760e49],\n.x-layout .slot-helper[data-v-62760e49] {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-62760e49]  > *, .x-layout__floating[data-v-62760e49]  > *, .x-layout__aside[data-v-62760e49]  > *,\n.x-layout .slot-helper[data-v-62760e49]  > * {\n  pointer-events: all;\n}\n.x-layout__predictive[data-v-62760e49]  .x-list, .x-layout__floating[data-v-62760e49]  .x-list, .x-layout__aside[data-v-62760e49]  .x-list,\n.x-layout .slot-helper[data-v-62760e49]  .x-list {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-62760e49]  .x-list > *, .x-layout__floating[data-v-62760e49]  .x-list > *, .x-layout__aside[data-v-62760e49]  .x-list > *,\n.x-layout .slot-helper[data-v-62760e49]  .x-list > * {\n  pointer-events: all;\n}\n.dev-mode .slot-helper[data-v-62760e49] {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = "data-v-62760e49";
+  const __vue_scope_id__ = "data-v-e9e5dca2";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -217,10 +238,10 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=single-column-layout.vue.js.map

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 { 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\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 Vue {\n    /**\n     * Enables the devMode, which shows the available slots to use with its names.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    protected devMode!: boolean;\n\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => TranslateFromRight })\n    protected asideAnimation!: Vue;\n\n    /**\n     * Function to check if an slot has rendered content or not.\n     *\n     * @param slotNames - A VNode Array with of each slot.\n     * @returns True if the slot has rendered content or false otherwise.\n     *\n     * @internal\n     */\n    protected hasContent(...slotNames: string[]): boolean {\n      return (\n        (this.devMode ||\n          slotNames.some(slotName =>\n            this.$slots[slotName]?.some(vNode => vNode.tag !== undefined)\n          )) ??\n        false\n      );\n    }\n  }\n</script>\n\n<style scoped lang=\"scss\">\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        margin-inline-start: var(--x-size-margin-left-layout-s, 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\n  .dev-mode {\n    .slot-helper {\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  }\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\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 class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\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\">\n      <MainScroll>\n        <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\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\n    <slot name=\"extra-aside\">\n      <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n    </slot>\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 { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\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: () => animateTranslate('right') })\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      z-index: 1;\n    }\n\n    &__sub-header {\n      grid-row: sub-header;\n      z-index: 1;\n    }\n\n    &__toolbar {\n      grid-row: toolbar;\n      z-index: 1;\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    ::v-deep .x-layout__aside {\n      grid-row: page;\n      z-index: 3;\n\n      .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 ::v-deep,\n    &__floating ::v-deep,\n    .slot-helper ::v-deep {\n      pointer-events: none;\n\n      > * {\n        pointer-events: all;\n      }\n\n      > .x-list {\n        pointer-events: none;\n\n        > * {\n          pointer-events: all;\n        }\n      }\n    }\n  }\n</style>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"single-column-layout.vue_rollup-plugin-vue_script.vue.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\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 { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\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: () => animateTranslate('right') })\n  protected asideAnimation!: Vue;\n}\n"],"names":["BaseIdModal","BaseScroll","MainScroll","Scroll"],"mappings":";;;;;;;;;;AAsFA;;;;;AAQA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,MAAM,CAAC,YAAY,CAAC;CAQnE,CAAA;AADC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC,EAAE,CAAC;0DACpB;AAPZ,kBAAkB;IAHtC,SAAS,CAAC;QACT,UAAU,EAAE,eAAEA,iBAAW,cAAEC,mBAAU,cAAEC,mBAAU,UAAEC,mBAAM,EAAE;KAC5D,CAAC;GACmB,kBAAkB,CAQtC;aARoB,kBAAkB;;;;"}

package/js/components/layouts/single-column-layout.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,16 @@
+import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+
+var css = ".dev-mode .slot-helper[data-v-e9e5dca2] {\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-e9e5dca2] {\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-e9e5dca2] {\n  grid-column: 1/-1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n.x-layout__header[data-v-e9e5dca2] {\n  grid-row: header;\n  z-index: 1;\n}\n.x-layout__sub-header[data-v-e9e5dca2] {\n  grid-row: sub-header;\n  z-index: 1;\n}\n.x-layout__toolbar[data-v-e9e5dca2] {\n  grid-row: toolbar;\n  z-index: 1;\n}\n.x-layout__predictive[data-v-e9e5dca2] {\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-e9e5dca2] {\n  grid-row: main;\n  flex-flow: column nowrap;\n}\n.x-layout__floating[data-v-e9e5dca2] {\n  grid-row: floating;\n  z-index: 1;\n}\n.x-layout__footer[data-v-e9e5dca2] {\n  grid-row: footer;\n}\n.x-layout[data-v-e9e5dca2]  .x-layout__aside {\n  grid-row: page;\n  z-index: 3;\n}\n[dir=\"ltr\"] .x-layout[data-v-e9e5dca2]  .x-layout__aside .x-modal__content {\n  margin-left: var(--x-size-margin-left-layout-single-column, 0);\n}\n[dir=\"rtl\"] .x-layout[data-v-e9e5dca2]  .x-layout__aside .x-modal__content {\n  margin-right: var(--x-size-margin-left-layout-single-column, 0);\n}\n.x-layout[data-v-e9e5dca2]  .x-layout__aside .x-modal__content {\n  width: 100%;\n  height: 100%;\n}\n.x-layout__predictive[data-v-e9e5dca2] , .x-layout__floating[data-v-e9e5dca2] ,\n.x-layout .slot-helper[data-v-e9e5dca2]  {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-e9e5dca2]  > *, .x-layout__floating[data-v-e9e5dca2]  > *,\n.x-layout .slot-helper[data-v-e9e5dca2]  > * {\n  pointer-events: all;\n}\n.x-layout__predictive[data-v-e9e5dca2]  > .x-list, .x-layout__floating[data-v-e9e5dca2]  > .x-list,\n.x-layout .slot-helper[data-v-e9e5dca2]  > .x-list {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-e9e5dca2]  > .x-list > *, .x-layout__floating[data-v-e9e5dca2]  > .x-list > *,\n.x-layout .slot-helper[data-v-e9e5dca2]  > .x-list > * {\n  pointer-events: all;\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('/__w/x/x/packages/x-components/src/components/layouts/single-column-layout.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=single-column-layout.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/layouts/single-column-layout.vue_rollup-plugin-vue_styles.0.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-column-layout.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,39 @@
+import script from './location-provider.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __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 { __vue_component__ as default };
+//# 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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/location-provider.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,23 @@
+import { __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
+ */
+let LocationProvider = class LocationProvider extends NoElement {
+};
+__decorate([
+    Prop({ required: true }),
+    Provide()
+], LocationProvider.prototype, "location", void 0);
+LocationProvider = __decorate([
+    Component
+], LocationProvider);
+var script = LocationProvider;
+
+export { script as default };
+//# sourceMappingURL=location-provider.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"location-provider.vue_rollup-plugin-vue_script.vue.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,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,SAAS;CAStD,CAAA;AADC;IAFC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACxB,OAAO,EAAE;kDAC2B;AARlB,gBAAgB;IADpC,SAAS;GACW,gBAAgB,CASpC;aAToB,gBAAgB;;;;"}

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

@@ -1,11 +1,11 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './base-events-modal-close.vue_rollup-plugin-vue=script.js';
+import script from './base-events-modal-close.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __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
     ),
@@ -26,13 +26,13 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -41,7 +41,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -54,5 +54,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-events-modal-close.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-events-modal-close.vue.js","sources":["../../../../src/components/modals/base-events-modal-close.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-on=\"$listeners\"\n    :events=\"events\"\n    class=\"x-button x-events-modal-close-button\"\n    data-test=\"close-modal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { PropsWithType } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import BaseEventButton from '../base-event-button.vue';\n\n  /**\n   * Component contains an event button that emits {@link XEventsTypes.UserClickedCloseEventsModal}\n   * when clicked. It has a default slot to customize its contents.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseEventsModalClose extends Vue {\n    @Prop({ default: 'UserClickedCloseEventsModal' })\n    protected closingEvent!: PropsWithType<XEventsTypes, void>;\n\n    protected get events(): Partial<XEventsTypes> {\n      return { [this.closingEvent]: undefined };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n#Examples\n\nThe `BaseEventsModalClose` component can be used to close the `BaseEventsModal` component.\n\n## Basic example\n\nOn clicked, the component closes the `BaseEventsModal`. The only needed thing is the content that\nthe button should render, that can be any thing: a text, an image, an icon, a combination of the two\nof them...\n\n```vue\n<template>\n  <BaseEventsCloseButton>\n    <img src=\"./close-button-icon.svg\" />\n  </BaseEventsCloseButton>\n</template>\n\n<script>\n  import { BaseEventsModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalCloseTest',\n    components: {\n      BaseEventsModalClose\n    }\n  };\n</script>\n```\n\n## Defining another event to emit when clicking the button\n\nBy default it uses the same `closingEvent` that the `BaseEventsModal` is listening by default too.\nThis event can be changed using the `closingEvent` prop.\n\n```vue\n<template>\n  <BaseEventsModalClose closingEvent=\"UserClosedEmpathize\">×</BaseEventsModalClose>\n</template>\n\n<script>\n  import { BaseEventsModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalCloseTest',\n    components: {\n      BaseEventsModalClose\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedCloseEventsModal`: the event is emitted after the user clicks the button.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-events-modal-close.vue.js","sources":["../../../../src/components/modals/base-events-modal-close.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-on=\"$listeners\"\n    :events=\"events\"\n    class=\"x-button x-events-modal-close-button\"\n    data-test=\"close-modal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { PropsWithType } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import BaseEventButton from '../base-event-button.vue';\n\n  /**\n   * Component contains an event button that emits {@link XEventsTypes.UserClickedCloseEventsModal}\n   * when clicked. It has a default slot to customize its contents.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseEventsModalClose extends Vue {\n    @Prop({ default: 'UserClickedCloseEventsModal' })\n    protected closingEvent!: PropsWithType<XEventsTypes, void>;\n\n    protected get events(): Partial<XEventsTypes> {\n      return { [this.closingEvent]: undefined };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `BaseEventsModalClose` component can be used to close the `BaseEventsModal` component.\n\n### Basic example\n\nOn clicked, the component closes the `BaseEventsModal`. The only needed thing is the content that\nthe button should render, that can be any thing: a text, an image, an icon, a combination of the two\nof them...\n\n```vue\n<template>\n  <BaseEventsCloseButton>\n    <img src=\"./close-button-icon.svg\" />\n  </BaseEventsCloseButton>\n</template>\n\n<script>\n  import { BaseEventsModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalCloseTest',\n    components: {\n      BaseEventsModalClose\n    }\n  };\n</script>\n```\n\n### Defining another event to emit when clicking the button\n\nBy default it uses the same `closingEvent` that the `BaseEventsModal` is listening by default too.\nThis event can be changed using the `closingEvent` prop.\n\n```vue\n<template>\n  <BaseEventsModalClose closingEvent=\"UserClosedEmpathize\">×</BaseEventsModalClose>\n</template>\n\n<script>\n  import { BaseEventsModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalCloseTest',\n    components: {\n      BaseEventsModalClose\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedCloseEventsModal`: the event is emitted after the user clicks the button.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,28 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import __vue_component__ from '../base-event-button.vue.js';
+
+/**
+ * Component contains an event button that emits {@link XEventsTypes.UserClickedCloseEventsModal}
+ * when clicked. It has a default slot to customize its contents.
+ *
+ * @public
+ */
+let BaseEventsModalClose = class BaseEventsModalClose extends Vue {
+    get events() {
+        return { [this.closingEvent]: undefined };
+    }
+};
+__decorate([
+    Prop({ default: 'UserClickedCloseEventsModal' })
+], BaseEventsModalClose.prototype, "closingEvent", void 0);
+BaseEventsModalClose = __decorate([
+    Component({
+        components: { BaseEventButton: __vue_component__ }
+    })
+], BaseEventsModalClose);
+var script = BaseEventsModalClose;
+
+export { script as default };
+//# sourceMappingURL=base-events-modal-close.vue_rollup-plugin-vue_script.vue.js.map