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

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.54](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.53...@empathyco/x-components@3.0.0-alpha.54) (2022-02-09)
+
+### ⚠ BREAKING CHANGES
+
+- **components:** Removed `CollapseFromTop` Animation. Use `animateScale()` instead.
+- **components:** Removed `TranslateFromLeft` and `TranslateFromRight` components. Use
+  `animateTranslate('left')` and `animateTranslate('right')` instead.
+
+### Features
+
+- **components:** created abstract factory for animations
+  ([a6120c1](https://github.com/empathyco/x/commit/a6120c135f93e5993f8d41b2b823085a2bf3d291)),
+  closes [EX-5355](https://searchbroker.atlassian.net/browse/EX-5355)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.53](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.52...@empathyco/x-components@3.0.0-alpha.53) (2022-02-08)
 
 ### Continuous Integration

package/core/index.js

@@ -1,14 +1,15 @@
 export { default as AnimateWidth } from '../js/components/animations/animate-width.vue.js';
-export { default as CollapseFromTop } from '../js/components/animations/collapse-from-top.vue.js';
 export { default as CollapseHeight } from '../js/components/animations/collapse-height.vue.js';
 export { default as CollapseWidth } from '../js/components/animations/collapse-width.vue.js';
 export { default as CrossFade } from '../js/components/animations/cross-fade.vue.js';
 export { default as FadeAndSlide } from '../js/components/animations/fade-and-slide.vue.js';
 export { default as StaggeredFadeAndSlide } from '../js/components/animations/staggered-fade-and-slide.vue.js';
 export { default as StaggeringTransitionGroup } from '../js/components/animations/staggering-transition-group.vue.js';
-export { default as TranslateFromLeft } from '../js/components/animations/translate-from-left.vue.js';
-export { default as TranslateFromRight } from '../js/components/animations/translate-from-right.vue.js';
 export { createCollapseAnimationMixin } from '../js/components/animations/animations.mixin.js';
+export { createDirectionalAnimationFactory } from '../js/components/animations/create-directional-animation-factory.js';
+export { animateClipPath } from '../js/components/animations/animate-clip-path/animate-clip-path.factory.js';
+export { animateScale } from '../js/components/animations/animate-scale/animate-scale.factory.js';
+export { animateTranslate } from '../js/components/animations/animate-translate/animate-translate.factory.js';
 export { default as BaseColumnPickerDropdown } from '../js/components/column-picker/base-column-picker-dropdown.vue.js';
 export { default as BaseColumnPickerList } from '../js/components/column-picker/base-column-picker-list.vue.js';
 export { default as ColumnPickerMixin } from '../js/components/column-picker/column-picker.mixin.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/docs/API-reference/api/x-components.animateclippath.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [animateClipPath](./x-components.animateclippath.md)
+
+## animateClipPath variable
+
+Returns a transition component to wrap an element passed in the default slot and animating its clip-path using inset and with the origin passed as parameter.
+
+<b>Signature:</b>
+
+```typescript
+animateClipPath: (animationOrigin?: import("../create-directional-animation-factory").AnimationOrigin | undefined) => import("vue").VueConstructor<import("vue").default>
+```

package/docs/API-reference/api/x-components.animatescale.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [animateScale](./x-components.animatescale.md)
+
+## animateScale variable
+
+Returns a transition component to wrap an element passed in the default slot and animating its scale using transform and with the transform origin passed as parameter.
+
+<b>Signature:</b>
+
+```typescript
+animateScale: (animationOrigin?: import("../create-directional-animation-factory").AnimationOrigin | undefined) => import("vue").VueConstructor<import("vue").default>
+```

package/docs/API-reference/api/x-components.animatetranslate.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [animateTranslate](./x-components.animatetranslate.md)
+
+## animateTranslate variable
+
+Returns a transition component to wrap an element passed in the default slot and animating its translate using transform and with the transform origin passed as parameter.
+
+<b>Signature:</b>
+
+```typescript
+animateTranslate: (animationOrigin?: import("../create-directional-animation-factory").AnimationOrigin | undefined) => import("vue").VueConstructor<import("vue").default>
+```

package/docs/API-reference/api/x-components.md

@@ -52,7 +52,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [ClearFilters](./x-components.clearfilters.md) | Renders a simple button, emitting the needed events when clicked. |
 |  [ClearHistoryQueries](./x-components.clearhistoryqueries.md) | A button that when is pressed, emits the [HistoryQueriesXEvents.UserPressedClearHistoryQueries](./x-components.historyqueriesxevents.userpressedclearhistoryqueries.md) event, expressing the user intention to clear the whole history of queries. |
 |  [ClearSearchInput](./x-components.clearsearchinput.md) | This component renders a button to delete the current query. |
-|  [CollapseFromTop](./x-components.collapsefromtop.md) | Renders a transition group wrapping the element passed in the default slot and animating it with a scale. |
 |  [CollapseHeight](./x-components.collapseheight.md) | Renders a transition wrapping the element passed in the default slot and animating it with a height animation. |
 |  [CollapseWidth](./x-components.collapsewidth.md) | Renders a transition wrapping the element passed in the default slot and animating it with a width animation. |
 |  [ColumnPickerMixin](./x-components.columnpickermixin.md) | Mixin to share Column Pickers logic. |
@@ -129,8 +128,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [StaggeredFadeAndSlide](./x-components.staggeredfadeandslide.md) | Renders a transition group wrapping the elements passed in the default slot and animating them with an staggered fade and slide animation. |
 |  [StaggeringTransitionGroup](./x-components.staggeringtransitiongroup.md) | A replacement component for Vue's transition-group, that also adds the option to stagger the animations. |
 |  [Tagging](./x-components.tagging.md) | This component enables and manages the sending of information to the [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html)<!-- -->. It allows to enable or disable the session id management through the <code>consent</code> prop. |
-|  [TranslateFromLeft](./x-components.translatefromleft.md) | Renders a transition wrapping the element passed in the default slot and moving it to its desired position. |
-|  [TranslateFromRight](./x-components.translatefromright.md) | Renders a transition wrapping the element passed in the default slot and moving it to its desired position. |
 |  [UrlHandler](./x-components.urlhandler.md) | This component manage the browser URL parameters to perserve them through reloads and browser history navigation. It allow to configure the default url parameter names using its attributes. This component doesn't render elements to the DOM. |
 |  [WindowScroll](./x-components.windowscroll.md) | The <code>WindowScroll</code> component listens to either the <code>html</code> or <code>body</code> DOM scroll events, and re-emits them as X Events. Additionally it also emits events related to the direction or current position of these elements scroll. |
 |  [XInstaller](./x-components.xinstaller.md) | The purpose of this class is to offer a quick way to initialize the XComponents in a setup project. It allows to receive all the options in [InstallXOptions](./x-components.installxoptions.md) which is an extension of [XPluginOptions](./x-components.xpluginoptions.md) with all the options for the plugin and some options more.<!-- -->This class does multiple things: 1. Install the [XPlugin](./x-components.xplugin.md) with the [XPluginOptions](./x-components.xpluginoptions.md)<!-- -->. 2. Creates the public [XAPI](./x-components.xapi.md) and add it to global window. 3. Creates the Vue Application for the customer project.<!-- -->The steps 2 &amp; 3 are optional and depends on the options passed in [InstallXOptions](./x-components.installxoptions.md)<!-- -->. |
@@ -355,6 +352,9 @@ X-Components is a library usable everywhere not only for search experiences.
 |  --- | --- |
 |  [addQueryToHistory](./x-components.addquerytohistory.md) | Default implementation for the [HistoryQueriesActions.addQueryToHistory()](./x-components.historyqueriesactions.addquerytohistory.md)<!-- -->. |
 |  [addQueryToHistoryQueries](./x-components.addquerytohistoryqueries.md) | Saves a new query into the history queries. |
+|  [animateClipPath](./x-components.animateclippath.md) | Returns a transition component to wrap an element passed in the default slot and animating its clip-path using inset and with the origin passed as parameter. |
+|  [animateScale](./x-components.animatescale.md) | Returns a transition component to wrap an element passed in the default slot and animating its scale using transform and with the transform origin passed as parameter. |
+|  [animateTranslate](./x-components.animatetranslate.md) | Returns a transition component to wrap an element passed in the default slot and animating its translate using transform and with the transform origin passed as parameter. |
 |  [ArrowDownIcon](./x-components.arrowdownicon.md) |  |
 |  [ArrowLeftIcon](./x-components.arrowlefticon.md) |  |
 |  [ArrowRightIcon](./x-components.arrowrighticon.md) |  |

package/docs/API-reference/api/x-components.xinstaller.md

@@ -28,7 +28,7 @@ The way to use this class is the next: 1. Create the installer passing in the [I
 2.1 Using the created installer:
 
 ```
-           installer.init(snipetConfig)
+           installer.init(snippetConfig)
 ```
 2.2 If the API option is enabled (`createAPI` is `true` in [InstallXOptions](./x-components.installxoptions.md)<!-- -->, or is not present as the default value is `true`<!-- -->) then this init step can be done with the Public API:
 

package/docs/API-reference/components/common/filters/labels/x-components.base-price-filter-label.md

@@ -11,13 +11,13 @@ value of the filter.
 
 ## Props
 
-| Name                  | Description                                                            | Type                | Default       |
-| --------------------- | ---------------------------------------------------------------------- | ------------------- | ------------- |
-| <code>filter</code>   | The filter data for get min and max value.                             | <code>object</code> | <code></code> |
-| <code>format</code>   | Configuration for show the label.                                      | <code>string</code> | <code></code> |
-| <code>lessThan</code> | Message shown when the filter hasn't got the min value defined.        | <code>string</code> | <code></code> |
-| <code>fromTo</code>   | Message shown when the filter has both the min and max values defined. | <code>string</code> | <code></code> |
-| <code>from</code>     | Message shown when the filter hasn't got max value defined.            | <code>string</code> | <code></code> |
+| Name                  | Description                                                            | Type                               | Default       |
+| --------------------- | ---------------------------------------------------------------------- | ---------------------------------- | ------------- |
+| <code>filter</code>   | The filter data for get min and max value.                             | <code>{ range: RangeValue }</code> | <code></code> |
+| <code>format</code>   | Configuration for show the label.                                      | <code>string</code>                | <code></code> |
+| <code>lessThan</code> | Message shown when the filter hasn't got the min value defined.        | <code>string</code>                | <code></code> |
+| <code>fromTo</code>   | Message shown when the filter has both the min and max values defined. | <code>string</code>                | <code></code> |
+| <code>from</code>     | Message shown when the filter hasn't got max value defined.            | <code>string</code>                | <code></code> |
 
 ## Example
 

package/docs/API-reference/components/common/layouts/x-components.single-column-layout.md

@@ -10,10 +10,10 @@ Component for use as Layout to be filled with the rest of the Components.
 
 ## Props
 
-| Name                        | Description                                                                 | Type                 | Default                               |
-| --------------------------- | --------------------------------------------------------------------------- | -------------------- | ------------------------------------- |
-| <code>devMode</code>        | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code> | <code>false</code>                    |
-| <code>asideAnimation</code> | The animation used for the Main Aside.                                      | <code>Vue</code>     | <code>() => TranslateFromRight</code> |
+| Name                        | Description                                                                 | Type                 | Default                                      |
+| --------------------------- | --------------------------------------------------------------------------- | -------------------- | -------------------------------------------- |
+| <code>devMode</code>        | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code> | <code>false</code>                           |
+| <code>asideAnimation</code> | The animation used for the Main Aside.                                      | <code>Vue</code>     | <code>() => animateTranslate('right')</code> |
 
 ## Slots
 

package/js/components/animations/animate-clip-path/animate-clip-path.factory.js

@@ -0,0 +1,18 @@
+import './animate-clip-path.style.scss.js';
+import { createDirectionalAnimationFactory } from '../create-directional-animation-factory.js';
+
+/**
+ * Returns a transition component to wrap an element passed in the default slot and animating its
+ * clip-path using inset and with the origin passed as parameter.
+ *
+ * @param animationOrigin - The origin of the animation. This means where the animation starts and
+ * ends. For example 'left' makes the element to animate from the left. If not provided the default
+ * value is 'top'.
+ * @returns A Transition Component.
+ *
+ * @public
+ */
+const animateClipPath = createDirectionalAnimationFactory('animate-clip-path');
+
+export { animateClipPath };
+//# sourceMappingURL=animate-clip-path.factory.js.map

package/js/components/animations/animate-clip-path/animate-clip-path.factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-clip-path.factory.js","sources":["../../../../../src/components/animations/animate-clip-path/animate-clip-path.factory.ts"],"sourcesContent":["import './animate-clip-path.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * clip-path using inset and with the origin passed as parameter.\n *\n * @param animationOrigin - The origin of the animation. This means where the animation starts and\n * ends. For example 'left' makes the element to animate from the left. If not provided the default\n * value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateClipPath = createDirectionalAnimationFactory('animate-clip-path');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;MAWa,eAAe,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}

package/js/components/animations/animate-clip-path/animate-clip-path.style.scss.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-animate-clip-path--enter-active, .x-animate-clip-path--leave-active {\n  transition: -webkit-clip-path var(--x-duration-animation, 0.3s) ease-out;\n  transition: clip-path var(--x-duration-animation, 0.3s) ease-out;\n  transition: clip-path var(--x-duration-animation, 0.3s) ease-out, -webkit-clip-path var(--x-duration-animation, 0.3s) ease-out;\n  -webkit-clip-path: inset(0 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n          clip-path: inset(0 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--enter.x-animate-clip-path--top, .x-animate-clip-path--leave-to.x-animate-clip-path--top {\n  -webkit-clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n          clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--enter.x-animate-clip-path--bottom, .x-animate-clip-path--leave-to.x-animate-clip-path--bottom {\n  -webkit-clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n          clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--enter.x-animate-clip-path--left, .x-animate-clip-path--leave-to.x-animate-clip-path--left {\n  -webkit-clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n          clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--enter.x-animate-clip-path--right, .x-animate-clip-path--leave-to.x-animate-clip-path--right {\n  -webkit-clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n          clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=animate-clip-path.style.scss.js.map

package/js/components/animations/animate-clip-path/animate-clip-path.style.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-clip-path.style.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/animations/animate-scale/animate-scale.factory.js

@@ -0,0 +1,18 @@
+import './animate-scale.style.scss.js';
+import { createDirectionalAnimationFactory } from '../create-directional-animation-factory.js';
+
+/**
+ * Returns a transition component to wrap an element passed in the default slot and animating its
+ * scale using transform and with the transform origin passed as parameter.
+ *
+ * @param animationOrigin - The origin of the transform animation. This means where the animation
+ * starts and ends. For example 'left' makes the element to animate from the left. If not provided
+ * the default value is 'top'.
+ * @returns A Transition Component.
+ *
+ * @public
+ */
+const animateScale = createDirectionalAnimationFactory('animate-scale');
+
+export { animateScale };
+//# sourceMappingURL=animate-scale.factory.js.map

package/js/components/animations/animate-scale/animate-scale.factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-scale.factory.js","sources":["../../../../../src/components/animations/animate-scale/animate-scale.factory.ts"],"sourcesContent":["import './animate-scale.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * scale using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element to animate from the left. If not provided\n * the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateScale = createDirectionalAnimationFactory('animate-scale');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;MAWa,YAAY,GAAG,iCAAiC,CAAC,eAAe;;;;"}

package/js/components/animations/animate-scale/animate-scale.style.scss.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-animate-scale--enter-active, .x-animate-scale--leave-active, .x-animate-scale--enter-active *, .x-animate-scale--leave-active * {\n  animation-duration: var(--x-duration-animation, 0.3s);\n  animation-timing-function: linear;\n}\n.x-animate-scale--enter-active, .x-animate-scale--leave-active {\n  overflow: hidden;\n}\n.x-animate-scale--enter-active.x-animate-scale--top, .x-animate-scale--enter-active.x-animate-scale--bottom, .x-animate-scale--leave-active.x-animate-scale--top, .x-animate-scale--leave-active.x-animate-scale--bottom {\n  animation-name: containerAnimationY;\n}\n.x-animate-scale--enter-active.x-animate-scale--left, .x-animate-scale--enter-active.x-animate-scale--right, .x-animate-scale--leave-active.x-animate-scale--left, .x-animate-scale--leave-active.x-animate-scale--right {\n  animation-name: containerAnimationX;\n}\n.x-animate-scale--enter-active.x-animate-scale--top > *, .x-animate-scale--enter-active.x-animate-scale--bottom > *, .x-animate-scale--leave-active.x-animate-scale--top > *, .x-animate-scale--leave-active.x-animate-scale--bottom > * {\n  animation-name: contentAnimationY;\n}\n.x-animate-scale--enter-active.x-animate-scale--left > *, .x-animate-scale--enter-active.x-animate-scale--right > *, .x-animate-scale--leave-active.x-animate-scale--left > *, .x-animate-scale--leave-active.x-animate-scale--right > * {\n  animation-name: contentAnimationX;\n}\n.x-animate-scale--leave-active, .x-animate-scale--leave-active > * {\n  animation-direction: reverse;\n}\n.x-animate-scale--top.x-animate-scale--enter-active, .x-animate-scale--top.x-animate-scale--leave-active, .x-animate-scale--top.x-animate-scale--enter-active > *, .x-animate-scale--top.x-animate-scale--leave-active > * {\n  transform-origin: top center;\n}\n.x-animate-scale--bottom.x-animate-scale--enter-active, .x-animate-scale--bottom.x-animate-scale--leave-active, .x-animate-scale--bottom.x-animate-scale--enter-active > *, .x-animate-scale--bottom.x-animate-scale--leave-active > * {\n  transform-origin: bottom center;\n}\n.x-animate-scale--left.x-animate-scale--enter-active, .x-animate-scale--left.x-animate-scale--leave-active, .x-animate-scale--left.x-animate-scale--enter-active > *, .x-animate-scale--left.x-animate-scale--leave-active > * {\n  transform-origin: left center;\n}\n.x-animate-scale--right.x-animate-scale--enter-active, .x-animate-scale--right.x-animate-scale--leave-active, .x-animate-scale--right.x-animate-scale--enter-active > *, .x-animate-scale--right.x-animate-scale--leave-active > * {\n  transform-origin: right center;\n}\n\n@keyframes containerAnimationY {\n  0% {\n    transform: scaleY(0);\n  }\n  5.5555555556% {\n    transform: scaleY(0.0000762079);\n  }\n  11.1111111111% {\n    transform: scaleY(0.0012193263);\n  }\n  16.6666666667% {\n    transform: scaleY(0.0061728395);\n  }\n  22.2222222222% {\n    transform: scaleY(0.0195092212);\n  }\n  27.7777777778% {\n    transform: scaleY(0.0476299345);\n  }\n  33.3333333333% {\n    transform: scaleY(0.0987654321);\n  }\n  38.8888888889% {\n    transform: scaleY(0.1829751562);\n  }\n  44.4444444444% {\n    transform: scaleY(0.3121475385);\n  }\n  50% {\n    transform: scaleY(0.5);\n  }\n  55.5555555556% {\n    transform: scaleY(0.6878524615);\n  }\n  61.1111111111% {\n    transform: scaleY(0.8170248438);\n  }\n  66.6666666667% {\n    transform: scaleY(0.9012345679);\n  }\n  72.2222222222% {\n    transform: scaleY(0.9523700655);\n  }\n  77.7777777778% {\n    transform: scaleY(0.9804907788);\n  }\n  83.3333333333% {\n    transform: scaleY(0.9938271605);\n  }\n  88.8888888889% {\n    transform: scaleY(0.9987806737);\n  }\n  94.4444444444% {\n    transform: scaleY(0.9999237921);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n@keyframes contentAnimationY {\n  0% {\n    transform: scaleY(99999999);\n  }\n  5.5555555556% {\n    transform: scaleY(13122);\n  }\n  11.1111111111% {\n    transform: scaleY(820.125);\n  }\n  16.6666666667% {\n    transform: scaleY(162);\n  }\n  22.2222222222% {\n    transform: scaleY(51.2578125);\n  }\n  27.7777777778% {\n    transform: scaleY(20.9952);\n  }\n  33.3333333333% {\n    transform: scaleY(10.125);\n  }\n  38.8888888889% {\n    transform: scaleY(5.4652228238);\n  }\n  44.4444444444% {\n    transform: scaleY(3.2036132813);\n  }\n  50% {\n    transform: scaleY(2);\n  }\n  55.5555555556% {\n    transform: scaleY(1.4538001329);\n  }\n  61.1111111111% {\n    transform: scaleY(1.2239529895);\n  }\n  66.6666666667% {\n    transform: scaleY(1.1095890411);\n  }\n  72.2222222222% {\n    transform: scaleY(1.0500120029);\n  }\n  77.7777777778% {\n    transform: scaleY(1.019897404);\n  }\n  83.3333333333% {\n    transform: scaleY(1.0062111801);\n  }\n  88.8888888889% {\n    transform: scaleY(1.0012208149);\n  }\n  94.4444444444% {\n    transform: scaleY(1.0000762137);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n@keyframes containerAnimationX {\n  0% {\n    transform: scaleX(0);\n  }\n  5.5555555556% {\n    transform: scaleX(0.0000762079);\n  }\n  11.1111111111% {\n    transform: scaleX(0.0012193263);\n  }\n  16.6666666667% {\n    transform: scaleX(0.0061728395);\n  }\n  22.2222222222% {\n    transform: scaleX(0.0195092212);\n  }\n  27.7777777778% {\n    transform: scaleX(0.0476299345);\n  }\n  33.3333333333% {\n    transform: scaleX(0.0987654321);\n  }\n  38.8888888889% {\n    transform: scaleX(0.1829751562);\n  }\n  44.4444444444% {\n    transform: scaleX(0.3121475385);\n  }\n  50% {\n    transform: scaleX(0.5);\n  }\n  55.5555555556% {\n    transform: scaleX(0.6878524615);\n  }\n  61.1111111111% {\n    transform: scaleX(0.8170248438);\n  }\n  66.6666666667% {\n    transform: scaleX(0.9012345679);\n  }\n  72.2222222222% {\n    transform: scaleX(0.9523700655);\n  }\n  77.7777777778% {\n    transform: scaleX(0.9804907788);\n  }\n  83.3333333333% {\n    transform: scaleX(0.9938271605);\n  }\n  88.8888888889% {\n    transform: scaleX(0.9987806737);\n  }\n  94.4444444444% {\n    transform: scaleX(0.9999237921);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes contentAnimationX {\n  0% {\n    transform: scaleX(99999999);\n  }\n  5.5555555556% {\n    transform: scaleX(13122);\n  }\n  11.1111111111% {\n    transform: scaleX(820.125);\n  }\n  16.6666666667% {\n    transform: scaleX(162);\n  }\n  22.2222222222% {\n    transform: scaleX(51.2578125);\n  }\n  27.7777777778% {\n    transform: scaleX(20.9952);\n  }\n  33.3333333333% {\n    transform: scaleX(10.125);\n  }\n  38.8888888889% {\n    transform: scaleX(5.4652228238);\n  }\n  44.4444444444% {\n    transform: scaleX(3.2036132813);\n  }\n  50% {\n    transform: scaleX(2);\n  }\n  55.5555555556% {\n    transform: scaleX(1.4538001329);\n  }\n  61.1111111111% {\n    transform: scaleX(1.2239529895);\n  }\n  66.6666666667% {\n    transform: scaleX(1.1095890411);\n  }\n  72.2222222222% {\n    transform: scaleX(1.0500120029);\n  }\n  77.7777777778% {\n    transform: scaleX(1.019897404);\n  }\n  83.3333333333% {\n    transform: scaleX(1.0062111801);\n  }\n  88.8888888889% {\n    transform: scaleX(1.0012208149);\n  }\n  94.4444444444% {\n    transform: scaleX(1.0000762137);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/animations/animate-scale/animate-scale.style.scss',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=animate-scale.style.scss.js.map

package/js/components/animations/animate-scale/animate-scale.style.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-scale.style.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/animations/animate-translate/animate-translate.factory.js

@@ -0,0 +1,18 @@
+import './animate-translate.style.scss.js';
+import { createDirectionalAnimationFactory } from '../create-directional-animation-factory.js';
+
+/**
+ * Returns a transition component to wrap an element passed in the default slot and animating its
+ * translate using transform and with the transform origin passed as parameter.
+ *
+ * @param animationOrigin - The origin of the transform animation. This means where the animation
+ * starts and ends. For example 'left' makes the element to animate from the left. If not provided
+ * the default value is 'top'.
+ * @returns A Transition Component.
+ *
+ * @public
+ */
+const animateTranslate = createDirectionalAnimationFactory('animate-translate');
+
+export { animateTranslate };
+//# sourceMappingURL=animate-translate.factory.js.map

package/js/components/animations/animate-translate/animate-translate.factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-translate.factory.js","sources":["../../../../../src/components/animations/animate-translate/animate-translate.factory.ts"],"sourcesContent":["import './animate-translate.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * translate using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element to animate from the left. If not provided\n * the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateTranslate = createDirectionalAnimationFactory('animate-translate');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;MAWa,gBAAgB,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}

package/js/components/animations/animate-translate/animate-translate.style.scss.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-animate-translate--enter-active, .x-animate-translate--leave-active {\n  transition: transform var(--x-duration-animation, 0.3s) ease-out;\n}\n.x-animate-translate--enter.x-animate-translate--top, .x-animate-translate--leave-to.x-animate-translate--top {\n  transform: translateY(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--bottom, .x-animate-translate--leave-to.x-animate-translate--bottom {\n  transform: translateY(100%);\n}\n.x-animate-translate--enter.x-animate-translate--left, .x-animate-translate--leave-to.x-animate-translate--left {\n  transform: translateX(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--right, .x-animate-translate--leave-to.x-animate-translate--right {\n  transform: translateX(100%);\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=animate-translate.style.scss.js.map

package/js/components/animations/animate-translate/animate-translate.style.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-translate.style.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/animations/create-directional-animation-factory.js

@@ -0,0 +1,26 @@
+import Vue from 'vue';
+
+/**
+ * Abstract Factory to create animations Factory. The returned animation factory uses the
+ * `animationName` parameter to create a Transition Component with that name.
+ *
+ * @param animationName - The name to use in the Transition Component of animation.
+ * @returns The animation factory configured.
+ *
+ * @internal
+ */
+function createDirectionalAnimationFactory(animationName) {
+    return (animationOrigin = 'top') => {
+        return Vue.extend({
+            name: `transition-${animationName}-${animationOrigin}`,
+            render(h) {
+                return h('transition', {
+                    props: { name: `x-${animationName}--${animationOrigin} x-${animationName}-` }
+                }, this.$slots.default);
+            }
+        });
+    };
+}
+
+export { createDirectionalAnimationFactory };
+//# sourceMappingURL=create-directional-animation-factory.js.map

package/js/components/animations/create-directional-animation-factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import Vue, { VueConstructor } from 'vue';\n\n/**\n * Abstract Factory to create animations Factory. The returned animation factory uses the\n * `animationName` parameter to create a Transition Component with that name.\n *\n * @param animationName - The name to use in the Transition Component of animation.\n * @returns The animation factory configured.\n *\n * @internal\n */\nexport function createDirectionalAnimationFactory(\n  animationName: string\n): (animationOrigin?: AnimationOrigin) => VueConstructor {\n  return (animationOrigin = 'top') => {\n    return Vue.extend({\n      name: `transition-${animationName}-${animationOrigin}`,\n      render(h) {\n        return h(\n          'transition',\n          {\n            props: { name: `x-${animationName}--${animationOrigin} x-${animationName}-` }\n          },\n          this.$slots.default\n        );\n      }\n    });\n  };\n}\n\nexport type AnimationOrigin = 'top' | 'bottom' | 'left' | 'right';\n"],"names":[],"mappings":";;AAEA;;;;;;;;;SASgB,iCAAiC,CAC/C,aAAqB;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK;QAC7B,OAAO,GAAG,CAAC,MAAM,CAAC;YAChB,IAAI,EAAE,cAAc,aAAa,IAAI,eAAe,EAAE;YACtD,MAAM,CAAC,CAAC;gBACN,OAAO,CAAC,CACN,YAAY,EACZ;oBACE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,aAAa,KAAK,eAAe,MAAM,aAAa,GAAG,EAAE;iBAC9E,EACD,IAAI,CAAC,MAAM,CAAC,OAAO,CACpB,CAAC;aACH;SACF,CAAC,CAAC;KACJ,CAAC;AACJ;;;;"}

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

@@ -204,11 +204,11 @@ __vue_render__._withStripped = true;
   /* style */
   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 });
+    inject("data-v-e252e204_0", { source: ".dev-mode .slot-helper[data-v-e252e204] {\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-e252e204] {\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-e252e204] {\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-e252e204] {\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-e252e204] {\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n.x-layout__main[data-v-e252e204] {\n  grid-row: main;\n  grid-column: max-width;\n}\n.x-layout__aside[data-v-e252e204] {\n  pointer-events: none;\n}\n.x-layout__aside.x-modal[data-v-e252e204] {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n.x-layout__aside.x-modal[data-v-e252e204]  .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-e252e204]  > *:not(.slot-helper) {\n  pointer-events: all;\n}\n.x-layout__aside--right.x-modal[data-v-e252e204] {\n  justify-content: flex-end;\n}\n.x-layout__scroll-to-top[data-v-e252e204] {\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-e252e204] {\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-e252e204] {\n  opacity: 1;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-7c425b28";
+  const __vue_scope_id__ = "data-v-e252e204";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

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":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import LayoutsMixin from './layouts.mixin';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the components.\n   *\n   * @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 = animateTranslate('right');\n    protected leftAsideAnimation = animateTranslate('left');\n\n    protected setPosition(position: number): void {\n      this.scrollPosition = position;\n    }\n\n    protected get isBackdropVisible(): boolean {\n      return this.scrollPosition > 0;\n    }\n  }\n</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

@@ -1,21 +1,10 @@
 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 __vue_component__$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
+import { animateTranslate } from '../animations/animate-translate/animate-translate.factory.js';
+import __vue_component__ from '../modals/base-id-modal.vue.js';
+import __vue_component__$2 from '../../x-modules/scroll/components/scroll.vue.js';
 import LayoutsMixin from './layouts.mixin.js';
 
 /**
@@ -27,8 +16,8 @@ let FixedHeaderAndAsidesLayout = class FixedHeaderAndAsidesLayout extends mixins
     constructor() {
         super(...arguments);
         this.scrollPosition = 0;
-        this.rightAsideAnimation = __vue_component__;
-        this.leftAsideAnimation = __vue_component__$1;
+        this.rightAsideAnimation = animateTranslate('right');
+        this.leftAsideAnimation = animateTranslate('left');
     }
     setPosition(position) {
         this.scrollPosition = position;
@@ -40,9 +29,9 @@ let FixedHeaderAndAsidesLayout = class FixedHeaderAndAsidesLayout extends mixins
 FixedHeaderAndAsidesLayout = __decorate([
     Component({
         components: {
-            BaseIdModal: __vue_component__$2,
-            MainScroll: __vue_component__$3,
-            Scroll: __vue_component__$4
+            BaseIdModal: __vue_component__,
+            MainScroll: __vue_component__$1,
+            Scroll: __vue_component__$2
         }
     })
 ], FixedHeaderAndAsidesLayout);

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

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

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

@@ -208,11 +208,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-4de87e4a_0", { source: ".dev-mode .slot-helper[data-v-4de87e4a] {\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-4de87e4a] {\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-4de87e4a] {\n  grid-column: 1/-1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n.x-layout__header[data-v-4de87e4a] {\n  grid-row: header;\n  z-index: 1;\n}\n.x-layout__sub-header[data-v-4de87e4a] {\n  grid-row: sub-header;\n  z-index: 1;\n}\n.x-layout__toolbar[data-v-4de87e4a] {\n  grid-row: toolbar;\n  z-index: 1;\n}\n.x-layout__predictive[data-v-4de87e4a] {\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-4de87e4a] {\n  grid-row: main;\n  flex-flow: column nowrap;\n}\n.x-layout__floating[data-v-4de87e4a] {\n  grid-row: floating;\n  z-index: 1;\n}\n.x-layout__footer[data-v-4de87e4a] {\n  grid-row: footer;\n}\n.x-layout__aside[data-v-4de87e4a] {\n  grid-row: page;\n  z-index: 3;\n}\n[dir=\"ltr\"] .x-layout__aside[data-v-4de87e4a]  .x-modal__content {\n  margin-left: var(--x-size-margin-left-layout-single-column, 0);\n}\n[dir=\"rtl\"] .x-layout__aside[data-v-4de87e4a]  .x-modal__content {\n  margin-right: var(--x-size-margin-left-layout-single-column, 0);\n}\n.x-layout__aside[data-v-4de87e4a]  .x-modal__content {\n  width: 100%;\n  height: 100%;\n}\n.x-layout__predictive[data-v-4de87e4a], .x-layout__floating[data-v-4de87e4a], .x-layout__aside[data-v-4de87e4a],\n.x-layout .slot-helper[data-v-4de87e4a] {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-4de87e4a]  > *, .x-layout__floating[data-v-4de87e4a]  > *, .x-layout__aside[data-v-4de87e4a]  > *,\n.x-layout .slot-helper[data-v-4de87e4a]  > * {\n  pointer-events: all;\n}\n.x-layout__predictive[data-v-4de87e4a]  .x-list, .x-layout__floating[data-v-4de87e4a]  .x-list, .x-layout__aside[data-v-4de87e4a]  .x-list,\n.x-layout .slot-helper[data-v-4de87e4a]  .x-list {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-4de87e4a]  .x-list > *, .x-layout__floating[data-v-4de87e4a]  .x-list > *, .x-layout__aside[data-v-4de87e4a]  .x-list > *,\n.x-layout .slot-helper[data-v-4de87e4a]  .x-list > * {\n  pointer-events: all;\n}", map: undefined, media: undefined });
+    inject("data-v-2fc90c9a_0", { source: ".dev-mode .slot-helper[data-v-2fc90c9a] {\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-2fc90c9a] {\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-2fc90c9a] {\n  grid-column: 1/-1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n.x-layout__header[data-v-2fc90c9a] {\n  grid-row: header;\n  z-index: 1;\n}\n.x-layout__sub-header[data-v-2fc90c9a] {\n  grid-row: sub-header;\n  z-index: 1;\n}\n.x-layout__toolbar[data-v-2fc90c9a] {\n  grid-row: toolbar;\n  z-index: 1;\n}\n.x-layout__predictive[data-v-2fc90c9a] {\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-2fc90c9a] {\n  grid-row: main;\n  flex-flow: column nowrap;\n}\n.x-layout__floating[data-v-2fc90c9a] {\n  grid-row: floating;\n  z-index: 1;\n}\n.x-layout__footer[data-v-2fc90c9a] {\n  grid-row: footer;\n}\n.x-layout__aside[data-v-2fc90c9a] {\n  grid-row: page;\n  z-index: 3;\n}\n[dir=\"ltr\"] .x-layout__aside[data-v-2fc90c9a]  .x-modal__content {\n  margin-left: var(--x-size-margin-left-layout-single-column, 0);\n}\n[dir=\"rtl\"] .x-layout__aside[data-v-2fc90c9a]  .x-modal__content {\n  margin-right: var(--x-size-margin-left-layout-single-column, 0);\n}\n.x-layout__aside[data-v-2fc90c9a]  .x-modal__content {\n  width: 100%;\n  height: 100%;\n}\n.x-layout__predictive[data-v-2fc90c9a], .x-layout__floating[data-v-2fc90c9a], .x-layout__aside[data-v-2fc90c9a],\n.x-layout .slot-helper[data-v-2fc90c9a] {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-2fc90c9a]  > *, .x-layout__floating[data-v-2fc90c9a]  > *, .x-layout__aside[data-v-2fc90c9a]  > *,\n.x-layout .slot-helper[data-v-2fc90c9a]  > * {\n  pointer-events: all;\n}\n.x-layout__predictive[data-v-2fc90c9a]  .x-list, .x-layout__floating[data-v-2fc90c9a]  .x-list, .x-layout__aside[data-v-2fc90c9a]  .x-list,\n.x-layout .slot-helper[data-v-2fc90c9a]  .x-list {\n  pointer-events: none;\n}\n.x-layout__predictive[data-v-2fc90c9a]  .x-list > *, .x-layout__floating[data-v-2fc90c9a]  .x-list > *, .x-layout__aside[data-v-2fc90c9a]  .x-list > *,\n.x-layout .slot-helper[data-v-2fc90c9a]  .x-list > * {\n  pointer-events: all;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-4de87e4a";
+  const __vue_scope_id__ = "data-v-2fc90c9a";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n  <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n    <header v-if=\"hasContent('header')\" class=\"x-layout__header x-list x-list--horizontal\">\n      <!-- @slot Slot that is used to insert content into the Header. -->\n      <slot name=\"header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n      </slot>\n    </header>\n\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  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import TranslateFromRight from '../animations/translate-from-right.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import BaseScroll from '../scroll/base-scroll.vue';\n  import LayoutsMixin from './layouts.mixin';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the Components.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n  })\n  export default class SingleColumnLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => TranslateFromRight })\n    protected asideAnimation!: Vue;\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @import '../../design-system/utilities/dev-mode';\n\n  .x-layout {\n    display: grid;\n    align-content: stretch;\n    justify-content: stretch;\n    height: 100%;\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [floating-start]\n      auto\n      [main-end floating-end footer-start]\n      auto\n      [footer-end page-end];\n\n    grid-template-columns: 1fr;\n\n    > * {\n      grid-column: 1/-1;\n      min-width: 0;\n      min-height: 0;\n      display: flex;\n    }\n\n    &__header {\n      grid-row: header;\n      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    &__aside {\n      grid-row: page;\n      z-index: 3;\n\n      ::v-deep .x-modal__content {\n        width: 100%;\n        height: 100%;\n        margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n      }\n    }\n\n    &__predictive,\n    &__floating,\n    &__aside,\n    .slot-helper {\n      pointer-events: none;\n\n      ::v-deep > * {\n        pointer-events: all;\n      }\n\n      ::v-deep .x-list {\n        pointer-events: none;\n\n        > * {\n          pointer-events: all;\n        }\n      }\n    }\n  }\n</style>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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  </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    &__aside {\n      grid-row: page;\n      z-index: 3;\n\n      ::v-deep .x-modal__content {\n        width: 100%;\n        height: 100%;\n        margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n      }\n    }\n\n    &__predictive,\n    &__floating,\n    &__aside,\n    .slot-helper {\n      pointer-events: none;\n\n      ::v-deep > * {\n        pointer-events: all;\n      }\n\n      ::v-deep .x-list {\n        pointer-events: none;\n\n        > * {\n          pointer-events: all;\n        }\n      }\n    }\n  }\n</style>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}