@empathyco/x-components 3.0.0-alpha.52 → 3.0.0-alpha.53

package/js/components/items-list-injection.mixin.js

@@ -1,4 +1,4 @@
-import { __extends, __decorate } from 'tslib';
+import { __decorate } from 'tslib';
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import { XProvide, XInject } from './decorators/injection.decorators.js';
@@ -10,37 +10,28 @@ import { LIST_ITEMS_KEY } from './decorators/injection.consts.js';
  *
  * @public
  */
-var ItemsListInjectionMixin = /** @class */ (function (_super) {
-    __extends(ItemsListInjectionMixin, _super);
-    function ItemsListInjectionMixin() {
-        return _super !== null && _super.apply(this, arguments) || this;
+let ItemsListInjectionMixin = class ItemsListInjectionMixin extends Vue {
+    /**
+     * The computed list items of the entity that uses the mixin.
+     *
+     * @remarks It should be overridden in the component that uses the mixin and it's intended to be
+     * filled with items from the state. Vue doesn't allow mixins as abstract classes.
+     * @returns An empty array as fallback in case it is not overridden.
+     * @internal
+     */
+    get items() {
+        return [];
     }
-    Object.defineProperty(ItemsListInjectionMixin.prototype, "items", {
-        /**
-         * The computed list items of the entity that uses the mixin.
-         *
-         * @remarks It should be overridden in the component that uses the mixin and it's intended to be
-         * filled with items from the state. Vue doesn't allow mixins as abstract classes.
-         * @returns An empty array as fallback in case it is not overridden.
-         * @internal
-         */
-        get: function () {
-            return [];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    __decorate([
-        XProvide(LIST_ITEMS_KEY)
-    ], ItemsListInjectionMixin.prototype, "items", null);
-    __decorate([
-        XInject(LIST_ITEMS_KEY)
-    ], ItemsListInjectionMixin.prototype, "injectedListItems", void 0);
-    ItemsListInjectionMixin = __decorate([
-        Component
-    ], ItemsListInjectionMixin);
-    return ItemsListInjectionMixin;
-}(Vue));
+};
+__decorate([
+    XProvide(LIST_ITEMS_KEY)
+], ItemsListInjectionMixin.prototype, "items", null);
+__decorate([
+    XInject(LIST_ITEMS_KEY)
+], ItemsListInjectionMixin.prototype, "injectedListItems", void 0);
+ItemsListInjectionMixin = __decorate([
+    Component
+], ItemsListInjectionMixin);
 
 export { ItemsListInjectionMixin };
 //# sourceMappingURL=items-list-injection.mixin.js.map

package/js/components/items-list-injection.mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"items-list-injection.mixin.js","sources":["../../../src/components/items-list-injection.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { ListItem } from '../utils/types';\nimport { XInject, XProvide } from './decorators/injection.decorators';\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n/**\n * Mixin to facilitate providing and injecting a list of list items. Injected list is\n * available at `injectedListItems`, and the provided list should be stored in `items`.\n *\n * @public\n */\n@Component\nexport class ItemsListInjectionMixin extends Vue {\n  /**\n   * The list items of the entity that uses the mixin from the state.\n   *\n   * @remarks It should be defined in the component that uses the mixin and it's intended to be\n   * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n   *\n   * @internal\n   */\n  protected stateItems!: ListItem[];\n\n  /**\n   * The computed list items of the entity that uses the mixin.\n   *\n   * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n   * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n   * @returns An empty array as fallback in case it is not overridden.\n   * @internal\n   */\n  @XProvide(LIST_ITEMS_KEY)\n  public get items(): ListItem[] {\n    return [];\n  }\n\n  /**\n   * It injects {@link ListItem} provided by an ancestor as injectedListItems.\n   *\n   * @internal\n   */\n  @XInject(LIST_ITEMS_KEY)\n  public injectedListItems: ListItem[] | undefined;\n}\n"],"names":[],"mappings":";;;;;;AAMA;;;;;;;IAO6C,2CAAG;IAAhD;;KA+BC;IAXC,sBAAW,0CAAK;;;;;;;;;aAAhB;YACE,OAAO,EAAE,CAAC;SACX;;;OAAA;IAFD;QADC,QAAQ,CAAC,cAAc,CAAC;wDAGxB;IAQD;QADC,OAAO,CAAC,cAAc,CAAC;sEACyB;IA9BtC,uBAAuB;QADnC,SAAS;OACG,uBAAuB,CA+BnC;IAAD,8BAAC;CAAA,CA/B4C,GAAG;;;;"}
+{"version":3,"file":"items-list-injection.mixin.js","sources":["../../../src/components/items-list-injection.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { ListItem } from '../utils/types';\nimport { XInject, XProvide } from './decorators/injection.decorators';\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n/**\n * Mixin to facilitate providing and injecting a list of list items. Injected list is\n * available at `injectedListItems`, and the provided list should be stored in `items`.\n *\n * @public\n */\n@Component\nexport class ItemsListInjectionMixin extends Vue {\n  /**\n   * The list items of the entity that uses the mixin from the state.\n   *\n   * @remarks It should be defined in the component that uses the mixin and it's intended to be\n   * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n   *\n   * @internal\n   */\n  protected stateItems!: ListItem[];\n\n  /**\n   * The computed list items of the entity that uses the mixin.\n   *\n   * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n   * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n   * @returns An empty array as fallback in case it is not overridden.\n   * @internal\n   */\n  @XProvide(LIST_ITEMS_KEY)\n  public get items(): ListItem[] {\n    return [];\n  }\n\n  /**\n   * It injects {@link ListItem} provided by an ancestor as injectedListItems.\n   *\n   * @internal\n   */\n  @XInject(LIST_ITEMS_KEY)\n  public injectedListItems: ListItem[] | undefined;\n}\n"],"names":[],"mappings":";;;;;;AAMA;;;;;;IAOa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,GAAG;;;;;;;;;IAoB9C,IAAW,KAAK;QACd,OAAO,EAAE,CAAC;KACX;EASF;AAXC;IADC,QAAQ,CAAC,cAAc,CAAC;oDAGxB;AAQD;IADC,OAAO,CAAC,cAAc,CAAC;kEACyB;AA9BtC,uBAAuB;IADnC,SAAS;GACG,uBAAuB,CA+BnC;;;;"}

package/js/components/items-list.vue.js

@@ -1,8 +1,8 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './items-list.vue_rollup-plugin-vue=script.js';
+import script from './items-list.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 () {
@@ -33,7 +33,8 @@ var __vue_render__ = function () {
                   return [_vm._v(_vm._s(item.id))]
                 },
                 { item: item }
-              ) ],
+              ),
+            ],
             2
           )
         }),
@@ -45,13 +46,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 */
@@ -60,7 +61,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__,
@@ -73,5 +74,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=items-list.vue.js.map

package/js/components/items-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"items-list.vue.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n\n  /**\n   * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n   * the `modelName`of the item.\n   *\n   * @public\n   */\n  @Component\n  export default class ItemsList extends Vue {\n    /**\n     * Animation component that will be used to animate the list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * List of items.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected items!: ListItem[];\n\n    /**\n     * The list of the items with additional properties.\n     *\n     * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n     *\n     * @internal\n     */\n    protected get computedItems(): {\n      dataTest: string;\n      class: string[];\n    }[] {\n      return this.items.map(item => {\n        const modelName = toKebabCase(item.modelName);\n        return {\n          ...item,\n          dataTest: `${modelName}s-list-item`,\n          class: [`x-${modelName}s-list-item`],\n          slotName: modelName\n        };\n      });\n    }\n  }\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"items-list.vue.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n\n  /**\n   * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n   * the `modelName`of the item.\n   *\n   * @public\n   */\n  @Component\n  export default class ItemsList extends Vue {\n    /**\n     * Animation component that will be used to animate the list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * List of items.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected items!: ListItem[];\n\n    /**\n     * The list of the items with additional properties.\n     *\n     * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n     *\n     * @internal\n     */\n    protected get computedItems(): {\n      dataTest: string;\n      class: string[];\n    }[] {\n      return this.items.map(item => {\n        const modelName = toKebabCase(item.modelName);\n        return {\n          ...item,\n          dataTest: `${modelName}s-list-item`,\n          class: [`x-${modelName}s-list-item`],\n          slotName: modelName\n        };\n      });\n    }\n  }\n</script>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/items-list.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,44 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import { toKebabCase } from '../utils/string.js';
+
+/**
+ * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on
+ * the `modelName`of the item.
+ *
+ * @public
+ */
+let ItemsList = class ItemsList extends Vue {
+    /**
+     * The list of the items with additional properties.
+     *
+     * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.
+     *
+     * @internal
+     */
+    get computedItems() {
+        return this.items.map(item => {
+            const modelName = toKebabCase(item.modelName);
+            return {
+                ...item,
+                dataTest: `${modelName}s-list-item`,
+                class: [`x-${modelName}s-list-item`],
+                slotName: modelName
+            };
+        });
+    }
+};
+__decorate([
+    Prop({ default: 'ul' })
+], ItemsList.prototype, "animation", void 0);
+__decorate([
+    Prop({ required: true })
+], ItemsList.prototype, "items", void 0);
+ItemsList = __decorate([
+    Component
+], ItemsList);
+var script = ItemsList;
+
+export { script as default };
+//# sourceMappingURL=items-list.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/items-list.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"items-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/items-list.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\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { ListItem } from '../utils/types';\nimport { toKebabCase } from '../utils/string';\n\n/**\n * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n * the `modelName`of the item.\n *\n * @public\n */\n@Component\nexport default class ItemsList extends Vue {\n  /**\n   * Animation component that will be used to animate the list.\n   *\n   * @public\n   */\n  @Prop({ default: 'ul' })\n  protected animation!: Vue | string;\n\n  /**\n   * List of items.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected items!: ListItem[];\n\n  /**\n   * The list of the items with additional properties.\n   *\n   * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n   *\n   * @internal\n   */\n  protected get computedItems(): {\n    dataTest: string;\n    class: string[];\n  }[] {\n    return this.items.map(item => {\n      const modelName = toKebabCase(item.modelName);\n      return {\n        ...item,\n        dataTest: `${modelName}s-list-item`,\n        class: [`x-${modelName}s-list-item`],\n        slotName: modelName\n      };\n    });\n  }\n}\n"],"names":[],"mappings":";;;;;AA8BA;;;;;;AAOA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;;;;;;;;IAwBxC,IAAc,aAAa;QAIzB,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI;YACxB,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC9C,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,GAAG,SAAS,aAAa;gBACnC,KAAK,EAAE,CAAC,KAAK,SAAS,aAAa,CAAC;gBACpC,QAAQ,EAAE,SAAS;aACpB,CAAC;SACH,CAAC,CAAC;KACJ;CACF,CAAA;AA/BC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACW;AAQnC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;wCACI;AAfV,SAAS;IAD7B,SAAS;GACW,SAAS,CAsC7B;aAtCoB,SAAS;;;;"}

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

@@ -1,9 +1,9 @@
-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 './fixed-header-and-asides-layout.vue_rollup-plugin-vue=script.js';
+import script from './fixed-header-and-asides-layout.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -42,9 +42,12 @@ var __vue_render__ = function () {
                     return [
                       _vm.devMode
                         ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("HEADER") ])
-                        : _vm._e() ]
-                  }) ],
+                            _vm._v("HEADER"),
+                          ])
+                        : _vm._e(),
+                    ]
+                  }),
+                ],
                 2
               )
             : _vm._e(),
@@ -62,11 +65,15 @@ var __vue_render__ = function () {
                         return [
                           _vm.devMode
                             ? _c("span", { staticClass: "slot-helper" }, [
-                                _vm._v("SUB HEADER") ])
-                            : _vm._e() ]
-                      }) ],
+                                _vm._v("SUB HEADER"),
+                              ])
+                            : _vm._e(),
+                        ]
+                      }),
+                    ],
                     2
-                  ) ]
+                  ),
+                ]
               )
             : _vm._e(),
           _vm._v(" "),
@@ -79,9 +86,12 @@ var __vue_render__ = function () {
                     return [
                       _vm.devMode
                         ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("TOOLBAR") ])
-                        : _vm._e() ]
-                  }) ],
+                            _vm._v("TOOLBAR"),
+                          ])
+                        : _vm._e(),
+                    ]
+                  }),
+                ],
                 2
               )
             : _vm._e(),
@@ -98,9 +108,12 @@ var __vue_render__ = function () {
                     return [
                       _vm.devMode
                         ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("MAIN") ])
-                        : _vm._e() ]
-                  }) ],
+                            _vm._v("MAIN"),
+                          ])
+                        : _vm._e(),
+                    ]
+                  }),
+                ],
                 2
               )
             : _vm._e(),
@@ -121,9 +134,12 @@ var __vue_render__ = function () {
                     return [
                       _vm.devMode
                         ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("LEFT ASIDE") ])
-                        : _vm._e() ]
-                  }) ],
+                            _vm._v("LEFT ASIDE"),
+                          ])
+                        : _vm._e(),
+                    ]
+                  }),
+                ],
                 2
               )
             : _vm._e(),
@@ -144,9 +160,12 @@ var __vue_render__ = function () {
                     return [
                       _vm.devMode
                         ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("RIGHT ASIDE") ])
-                        : _vm._e() ]
-                  }) ],
+                            _vm._v("RIGHT ASIDE"),
+                          ])
+                        : _vm._e(),
+                    ]
+                  }),
+                ],
                 2
               )
             : _vm._e(),
@@ -163,14 +182,19 @@ var __vue_render__ = function () {
                     return [
                       _vm.devMode
                         ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("SCROLL TO TOP") ])
-                        : _vm._e() ]
-                  }) ],
+                            _vm._v("SCROLL TO TOP"),
+                          ])
+                        : _vm._e(),
+                    ]
+                  }),
+                ],
                 2
               )
-            : _vm._e() ],
+            : _vm._e(),
+        ],
         1
-      ) ],
+      ),
+    ],
     1
   )
 };
@@ -178,24 +202,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
     inject("data-v-7c425b28_0", { source: ".dev-mode .slot-helper[data-v-7c425b28] {\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-7c425b28] {\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];\n  grid-template-columns: [page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];\n}\n.x-layout__header[data-v-7c425b28] {\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n.x-layout__sub-header[data-v-7c425b28] {\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n.x-layout__toolbar[data-v-7c425b28] {\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n.x-layout__main[data-v-7c425b28] {\n  grid-row: main;\n  grid-column: max-width;\n}\n.x-layout__aside[data-v-7c425b28] {\n  pointer-events: none;\n}\n.x-layout__aside.x-modal[data-v-7c425b28] {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n.x-layout__aside.x-modal[data-v-7c425b28]  .x-modal__content {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}\n.x-layout__aside[data-v-7c425b28]  > *:not(.slot-helper) {\n  pointer-events: all;\n}\n.x-layout__aside--right.x-modal[data-v-7c425b28] {\n  justify-content: flex-end;\n}\n.x-layout__scroll-to-top[data-v-7c425b28] {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n.x-layout__header-backdrop[data-v-7c425b28] {\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n  background-color: var(--x-color-background-layout-header-backdrop, var(--x-color-base-neutral-100, white));\n  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n          mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible[data-v-7c425b28] {\n  opacity: 1;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-7c425b28";
+  const __vue_scope_id__ = "data-v-7c425b28";
   /* 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 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__,
@@ -208,5 +232,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=fixed-header-and-asides-layout.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      @scroll=\"setPosition\"\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"hasContent('header')\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"hasContent('sub-header')\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"hasContent('toolbar')\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"hasContent('main')\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"hasContent('left-aside')\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modalId=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"hasContent('right-aside')\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modalId=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <div v-if=\"hasContent('scroll-to-top')\" key=\"scroll-to-top\" class=\"x-layout__scroll-to-top\">\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\n  import { Component } from 'vue-property-decorator';\n  import { mixins } from 'vue-class-component';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import { TranslateFromLeft, TranslateFromRight } from '../animations';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import LayoutsMixin from './layouts.mixin';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the components.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseIdModal,\n      MainScroll,\n      Scroll\n    }\n  })\n  export default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n    protected scrollPosition = 0;\n    protected rightAsideAnimation = TranslateFromRight;\n    protected leftAsideAnimation = TranslateFromLeft;\n\n    protected setPosition(position: number): void {\n      this.scrollPosition = position;\n    }\n\n    protected get isBackdropVisible(): boolean {\n      return this.scrollPosition > 0;\n    }\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @import '../../design-system/utilities/dev-mode';\n\n  .x-layout {\n    // custom properties\n    display: grid;\n    align-content: stretch;\n    min-height: 100%;\n\n    // layout\n    max-height: 100%;\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n    --x-size-margin-layout: max(\n      var(--x-size-min-margin-layout, 20px),\n      var(--x-size-margin-max-width)\n    );\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [main-end page-end];\n\n    grid-template-columns:\n      [page-start]\n      var(--x-size-margin-layout)\n      [max-width-start]\n      1fr\n      [max-width-end]\n      var(--x-size-margin-layout)\n      [page-end];\n\n    &__header {\n      // layout\n      position: sticky;\n      top: -0.5px;\n      z-index: 2;\n      grid-row: header;\n      grid-column: page;\n      max-height: var(--x-size-max-height-layout-header, auto);\n      padding: 0 var(--x-size-margin-layout);\n\n      //color\n      background: var(--x-color-background-layout-header, transparent);\n      border-color: var(--x-size-border-color-layout-header, transparent);\n\n      // border\n      border-width: var(--x-size-border-width-layout-header, 0);\n      border-style: solid;\n    }\n\n    &__sub-header {\n      // layout\n      grid-row: sub-header;\n      grid-column: page;\n      padding: 0 var(--x-size-margin-layout);\n\n      //color\n      background: var(--x-color-background-layout-sub-header, transparent);\n      border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n      // border\n      border-width: var(--x-size-border-width-layout-sub-header, 0);\n      border-style: solid;\n    }\n\n    &__toolbar {\n      // layout\n      grid-row: toolbar;\n      grid-column: max-width;\n    }\n\n    &__main {\n      // layout\n      grid-row: main;\n      grid-column: max-width;\n    }\n\n    &__aside {\n      &.x-modal {\n        // layout\n        z-index: 3;\n        flex-flow: row nowrap;\n\n        ::v-deep .x-modal__content {\n          background-color: transparent;\n          height: 100%;\n          width: var(--x-size-width-layout-aside, 300px);\n        }\n      }\n\n      // others\n      pointer-events: none;\n      ::v-deep > *:not(.slot-helper) {\n        pointer-events: all;\n      }\n\n      &--right.x-modal {\n        justify-content: flex-end;\n      }\n    }\n\n    &__scroll-to-top {\n      position: fixed;\n      z-index: 1;\n      bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n      right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n    }\n\n    &__header-backdrop {\n      // layout\n      grid-row: page;\n      grid-column: page;\n      position: sticky;\n      top: -0.5px;\n      z-index: 1;\n      height: var(--x-size-height-layout-backdrop, 40vh);\n      width: 100%;\n      pointer-events: none;\n\n      // color\n      background-color: var(\n        --x-color-background-layout-header-backdrop,\n        var(--x-color-base-neutral-100, white)\n      );\n      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n      // transition\n      opacity: 0;\n      transition: opacity 0.2s ease-out;\n\n      &--is-visible {\n        opacity: 1;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      @scroll=\"setPosition\"\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"hasContent('header')\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"hasContent('sub-header')\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"hasContent('toolbar')\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"hasContent('main')\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"hasContent('left-aside')\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modalId=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"hasContent('right-aside')\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modalId=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <div v-if=\"hasContent('scroll-to-top')\" key=\"scroll-to-top\" class=\"x-layout__scroll-to-top\">\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\n  import { Component } from 'vue-property-decorator';\n  import { mixins } from 'vue-class-component';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import { TranslateFromLeft, TranslateFromRight } from '../animations';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import LayoutsMixin from './layouts.mixin';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the components.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseIdModal,\n      MainScroll,\n      Scroll\n    }\n  })\n  export default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n    protected scrollPosition = 0;\n    protected rightAsideAnimation = TranslateFromRight;\n    protected leftAsideAnimation = TranslateFromLeft;\n\n    protected setPosition(position: number): void {\n      this.scrollPosition = position;\n    }\n\n    protected get isBackdropVisible(): boolean {\n      return this.scrollPosition > 0;\n    }\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @import '../../design-system/utilities/dev-mode';\n\n  .x-layout {\n    // custom properties\n    display: grid;\n    align-content: stretch;\n    min-height: 100%;\n\n    // layout\n    max-height: 100%;\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n    --x-size-margin-layout: max(\n      var(--x-size-min-margin-layout, 20px),\n      var(--x-size-margin-max-width)\n    );\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [main-end page-end];\n\n    grid-template-columns:\n      [page-start]\n      var(--x-size-margin-layout)\n      [max-width-start]\n      1fr\n      [max-width-end]\n      var(--x-size-margin-layout)\n      [page-end];\n\n    &__header {\n      // layout\n      position: sticky;\n      top: -0.5px;\n      z-index: 2;\n      grid-row: header;\n      grid-column: page;\n      max-height: var(--x-size-max-height-layout-header, auto);\n      padding: 0 var(--x-size-margin-layout);\n\n      //color\n      background: var(--x-color-background-layout-header, transparent);\n      border-color: var(--x-size-border-color-layout-header, transparent);\n\n      // border\n      border-width: var(--x-size-border-width-layout-header, 0);\n      border-style: solid;\n    }\n\n    &__sub-header {\n      // layout\n      grid-row: sub-header;\n      grid-column: page;\n      padding: 0 var(--x-size-margin-layout);\n\n      //color\n      background: var(--x-color-background-layout-sub-header, transparent);\n      border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n      // border\n      border-width: var(--x-size-border-width-layout-sub-header, 0);\n      border-style: solid;\n    }\n\n    &__toolbar {\n      // layout\n      grid-row: toolbar;\n      grid-column: max-width;\n    }\n\n    &__main {\n      // layout\n      grid-row: main;\n      grid-column: max-width;\n    }\n\n    &__aside {\n      &.x-modal {\n        // layout\n        z-index: 3;\n        flex-flow: row nowrap;\n\n        ::v-deep .x-modal__content {\n          background-color: transparent;\n          height: 100%;\n          width: var(--x-size-width-layout-aside, 300px);\n        }\n      }\n\n      // others\n      pointer-events: none;\n      ::v-deep > *:not(.slot-helper) {\n        pointer-events: all;\n      }\n\n      &--right.x-modal {\n        justify-content: flex-end;\n      }\n    }\n\n    &__scroll-to-top {\n      position: fixed;\n      z-index: 1;\n      bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n      right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n    }\n\n    &__header-backdrop {\n      // layout\n      grid-row: page;\n      grid-column: page;\n      position: sticky;\n      top: -0.5px;\n      z-index: 1;\n      height: var(--x-size-height-layout-backdrop, 40vh);\n      width: 100%;\n      pointer-events: none;\n\n      // color\n      background-color: var(\n        --x-color-background-layout-header-backdrop,\n        var(--x-color-base-neutral-100, white)\n      );\n      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n      // transition\n      opacity: 0;\n      transition: opacity 0.2s ease-out;\n\n      &--is-visible {\n        opacity: 1;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,52 @@
+import { __decorate } from 'tslib';
+import { Component } from 'vue-property-decorator';
+import { mixins } from 'vue-class-component';
+import __vue_component__$3 from '../../x-modules/scroll/components/main-scroll.vue.js';
+import '../animations/animate-width.vue.js';
+import '../animations/collapse-from-top.vue.js';
+import '../animations/collapse-height.vue.js';
+import '../animations/collapse-width.vue.js';
+import '../animations/cross-fade.vue.js';
+import '../animations/fade-and-slide.vue.js';
+import '../animations/staggered-fade-and-slide.vue.js';
+import '../animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import 'vue-runtime-helpers/dist/normalize-component.mjs';
+import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
+import __vue_component__$1 from '../animations/translate-from-left.vue.js';
+import __vue_component__ from '../animations/translate-from-right.vue.js';
+import __vue_component__$2 from '../modals/base-id-modal.vue.js';
+import __vue_component__$4 from '../../x-modules/scroll/components/scroll.vue.js';
+import LayoutsMixin from './layouts.mixin.js';
+
+/**
+ * Component for use as Layout to be filled with the rest of the components.
+ *
+ * @public
+ */
+let FixedHeaderAndAsidesLayout = class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {
+    constructor() {
+        super(...arguments);
+        this.scrollPosition = 0;
+        this.rightAsideAnimation = __vue_component__;
+        this.leftAsideAnimation = __vue_component__$1;
+    }
+    setPosition(position) {
+        this.scrollPosition = position;
+    }
+    get isBackdropVisible() {
+        return this.scrollPosition > 0;
+    }
+};
+FixedHeaderAndAsidesLayout = __decorate([
+    Component({
+        components: {
+            BaseIdModal: __vue_component__$2,
+            MainScroll: __vue_component__$3,
+            Scroll: __vue_component__$4
+        }
+    })
+], FixedHeaderAndAsidesLayout);
+var script = FixedHeaderAndAsidesLayout;
+
+export { script as default };
+//# sourceMappingURL=fixed-header-and-asides-layout.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-header-and-asides-layout.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Component } from 'vue-property-decorator';\nimport { mixins } from 'vue-class-component';\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\nimport { TranslateFromLeft, TranslateFromRight } from '../animations';\nimport BaseIdModal from '../modals/base-id-modal.vue';\nimport Scroll from '../../x-modules/scroll/components/scroll.vue';\nimport LayoutsMixin from './layouts.mixin';\n\n/**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @public\n */\n@Component({\n  components: {\n    BaseIdModal,\n    MainScroll,\n    Scroll\n  }\n})\nexport default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n  protected scrollPosition = 0;\n  protected rightAsideAnimation = TranslateFromRight;\n  protected leftAsideAnimation = TranslateFromLeft;\n\n  protected setPosition(position: number): void {\n    this.scrollPosition = position;\n  }\n\n  protected get isBackdropVisible(): boolean {\n    return this.scrollPosition > 0;\n  }\n}\n"],"names":["TranslateFromRight","TranslateFromLeft","BaseIdModal","MainScroll","Scroll"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4FA;;;;;AAYA,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,MAAM,CAAC,YAAY,CAAC;IAA5E;;QACY,mBAAc,GAAG,CAAC,CAAC;QACnB,wBAAmB,GAAGA,iBAAkB,CAAC;QACzC,uBAAkB,GAAGC,mBAAiB,CAAC;KASlD;IAPW,WAAW,CAAC,QAAgB;QACpC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;IAED,IAAc,iBAAiB;QAC7B,OAAO,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;KAChC;CACF,CAAA;AAZoB,0BAA0B;IAP9C,SAAS,CAAC;QACT,UAAU,EAAE;yBACVC,mBAAW;wBACXC,mBAAU;oBACVC,mBAAM;SACP;KACF,CAAC;GACmB,0BAA0B,CAY9C;aAZoB,0BAA0B;;;;"}

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

@@ -1,4 +1,4 @@
-import { __extends, __decorate } from 'tslib';
+import { __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop } from 'vue-property-decorator';
 import Component from 'vue-class-component';
@@ -8,11 +8,7 @@ import Component from 'vue-class-component';
  *
  * @public
  */
-var LayoutsMixin = /** @class */ (function (_super) {
-    __extends(LayoutsMixin, _super);
-    function LayoutsMixin() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
+let LayoutsMixin = class LayoutsMixin extends Vue {
     /**
      * Function to check if an slot has rendered content or not.
      *
@@ -21,24 +17,19 @@ var LayoutsMixin = /** @class */ (function (_super) {
      *
      * @internal
      */
-    LayoutsMixin.prototype.hasContent = function () {
-        var _this = this;
-        var _a;
-        var slotNames = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            slotNames[_i] = arguments[_i];
-        }
-        return ((_a = (this.devMode ||
-            slotNames.some(function (slotName) { var _a; return (_a = _this.$slots[slotName]) === null || _a === void 0 ? void 0 : _a.some(function (vNode) { return vNode.tag !== undefined; }); }))) !== null && _a !== void 0 ? _a : false);
-    };
-    __decorate([
-        Prop({ default: false })
-    ], LayoutsMixin.prototype, "devMode", void 0);
-    LayoutsMixin = __decorate([
-        Component
-    ], LayoutsMixin);
-    return LayoutsMixin;
-}(Vue));
+    hasContent(...slotNames) {
+        return ((this.devMode ||
+            slotNames.some(slotName => this.$slots[slotName]?.some(vNode => vNode.tag !== undefined))) ??
+            false);
+    }
+};
+__decorate([
+    Prop({ default: false })
+], LayoutsMixin.prototype, "devMode", void 0);
+LayoutsMixin = __decorate([
+    Component
+], LayoutsMixin);
+var LayoutsMixin$1 = LayoutsMixin;
 
-export default LayoutsMixin;
+export { LayoutsMixin$1 as default };
 //# sourceMappingURL=layouts.mixin.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"layouts.mixin.js","sources":["../../../../src/components/layouts/layouts.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Prop } from 'vue-property-decorator';\nimport Component from 'vue-class-component';\n\n/**\n * Mixin to share layouts logic.\n *\n * @public\n */\n@Component\nexport default class LayoutsMixin extends Vue {\n  /**\n   * Enables the devMode, which shows the available slots to use with its names.\n   *\n   * @public\n   */\n  @Prop({ default: false })\n  protected devMode!: boolean;\n\n  /**\n   * Function to check if an slot has rendered content or not.\n   *\n   * @param slotNames - A VNode Array with of each slot.\n   * @returns True if the slot has rendered content or false otherwise.\n   *\n   * @internal\n   */\n  protected hasContent(...slotNames: string[]): boolean {\n    return (\n      (this.devMode ||\n        slotNames.some(slotName =>\n          this.$slots[slotName]?.some(vNode => vNode.tag !== undefined)\n        )) ??\n      false\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;AAIA;;;;;AAMA;IAA0C,gCAAG;IAA7C;;KA0BC;;;;;;;;;IATW,iCAAU,GAApB;QAAA,iBAQC;;QARoB,mBAAsB;aAAtB,UAAsB,EAAtB,qBAAsB,EAAtB,IAAsB;YAAtB,8BAAsB;;QACzC,QACE,OAAC,IAAI,CAAC,OAAO;YACX,SAAS,CAAC,IAAI,CAAC,UAAA,QAAQ,YACrB,OAAA,MAAA,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,0CAAE,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,SAAS,GAAA,CAAC,CAAA,EAAA,CAC9D,CAAC,mCACJ,KAAK,EACL;KACH;IAlBD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;iDACG;IAPT,YAAY;QADhC,SAAS;OACW,YAAY,CA0BhC;IAAD,mBAAC;CAAA,CA1ByC,GAAG;;;;"}
+{"version":3,"file":"layouts.mixin.js","sources":["../../../../src/components/layouts/layouts.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Prop } from 'vue-property-decorator';\nimport Component from 'vue-class-component';\n\n/**\n * Mixin to share layouts logic.\n *\n * @public\n */\n@Component\nexport default class LayoutsMixin extends Vue {\n  /**\n   * Enables the devMode, which shows the available slots to use with its names.\n   *\n   * @public\n   */\n  @Prop({ default: false })\n  protected devMode!: boolean;\n\n  /**\n   * Function to check if an slot has rendered content or not.\n   *\n   * @param slotNames - A VNode Array with of each slot.\n   * @returns True if the slot has rendered content or false otherwise.\n   *\n   * @internal\n   */\n  protected hasContent(...slotNames: string[]): boolean {\n    return (\n      (this.devMode ||\n        slotNames.some(slotName =>\n          this.$slots[slotName]?.some(vNode => vNode.tag !== undefined)\n        )) ??\n      false\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;AAIA;;;;;AAMA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;;;;;;;;;IAiBjC,UAAU,CAAC,GAAG,SAAmB;QACzC,QACE,CAAC,IAAI,CAAC,OAAO;YACX,SAAS,CAAC,IAAI,CAAC,QAAQ,IACrB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,CAC9D;YACH,KAAK,EACL;KACH;CACF,CAAA;AAnBC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;6CACG;AAPT,YAAY;IADhC,SAAS;GACW,YAAY,CA0BhC;qBA1BoB,YAAY;;;;"}