@empathyco/x-components 3.0.0-alpha.31 → 3.0.0-alpha.35

package/js/components/icons/trash-open.vue.js

@@ -5,7 +5,7 @@ import script from './trash-open.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function(_h, _vm) {
+var __vue_render__ = function (_h, _vm) {
   var _c = _vm._c;
   return _c(
     "svg",
@@ -15,8 +15,8 @@ var __vue_render__ = function(_h, _vm) {
         viewBox: "0 0 16 16",
         version: "1.1",
         xmlns: "http://www.w3.org/2000/svg",
-        "xmlns:xlink": "http://www.w3.org/1999/xlink"
-      }
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
     },
     [
       _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
@@ -25,15 +25,14 @@ var __vue_render__ = function(_h, _vm) {
             transform:
               "translate(8.500000, 4.356429) rotate(25.000000)\n      translate(-8.500000, -4.356429) ",
             points:
-              "3.72425268 4.46044924 4.78552987 4.43733371 13.2757473 4.25240953"
-          }
+              "3.72425268 4.46044924 4.78552987 4.43733371 13.2757473 4.25240953",
+          },
         }),
         _vm._v(" "),
         _c("path", {
           attrs: {
-            d:
-              "M11.8880894,5.90635374 L11.8880894,12.9882942 C11.8880894,13.5470439 11.4081136,14\n      10.8160333,14 L5.45575268,14 C4.86367243,14 4.38369655,13.5470439 4.38369655,12.9882942\n      L4.38369655,5.90635374 M6.55677437,3.50129871 L7.00984487,2.58438188\n      C7.26006879,2.0779827 7.89792124,1.85889257 8.43452818,2.09503039 L10.3777538,2.95016107\n      C10.9143608,3.18629888 11.1465201,3.78824405 10.8962961,4.29464323 L10.4432256,5.21156006"
-          }
+            d: "M11.8880894,5.90635374 L11.8880894,12.9882942 C11.8880894,13.5470439 11.4081136,14\n      10.8160333,14 L5.45575268,14 C4.86367243,14 4.38369655,13.5470439 4.38369655,12.9882942\n      L4.38369655,5.90635374 M6.55677437,3.50129871 L7.00984487,2.58438188\n      C7.26006879,2.0779827 7.89792124,1.85889257 8.43452818,2.09503039 L10.3777538,2.95016107\n      C10.9143608,3.18629888 11.1465201,3.78824405 10.8962961,4.29464323 L10.4432256,5.21156006",
+          },
         }),
         _vm._v(" "),
         _c("line", {
@@ -41,8 +40,8 @@ var __vue_render__ = function(_h, _vm) {
             x1: "7.06383687",
             y1: "8.4356182",
             x2: "7.06383687",
-            y2: "11.4707355"
-          }
+            y2: "11.4707355",
+          },
         }),
         _vm._v(" "),
         _c("line", {
@@ -50,11 +49,9 @@ var __vue_render__ = function(_h, _vm) {
             x1: "9.20794912",
             y1: "8.4356182",
             x2: "9.20794912",
-            y2: "11.4707355"
-          }
-        })
-      ])
-    ]
+            y2: "11.4707355",
+          },
+        }) ]) ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/icons/trash-open.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"trash-open.vue.js","sources":["../../../../src/components/icons/trash-open.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline\n        transform=\"translate(8.500000, 4.356429) rotate(25.000000)\n        translate(-8.500000, -4.356429) \"\n        points=\"3.72425268 4.46044924 4.78552987 4.43733371 13.2757473 4.25240953\"\n      />\n      <path\n        d=\"M11.8880894,5.90635374 L11.8880894,12.9882942 C11.8880894,13.5470439 11.4081136,14\n        10.8160333,14 L5.45575268,14 C4.86367243,14 4.38369655,13.5470439 4.38369655,12.9882942\n        L4.38369655,5.90635374 M6.55677437,3.50129871 L7.00984487,2.58438188\n        C7.26006879,2.0779827 7.89792124,1.85889257 8.43452818,2.09503039 L10.3777538,2.95016107\n        C10.9143608,3.18629888 11.1465201,3.78824405 10.8962961,4.29464323 L10.4432256,5.21156006\"\n      />\n      <line x1=\"7.06383687\" y1=\"8.4356182\" x2=\"7.06383687\" y2=\"11.4707355\" />\n      <line x1=\"9.20794912\" y1=\"8.4356182\" x2=\"9.20794912\" y2=\"11.4707355\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"trash-open.vue.js","sources":["../../../../src/components/icons/trash-open.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline\n        transform=\"translate(8.500000, 4.356429) rotate(25.000000)\n        translate(-8.500000, -4.356429) \"\n        points=\"3.72425268 4.46044924 4.78552987 4.43733371 13.2757473 4.25240953\"\n      />\n      <path\n        d=\"M11.8880894,5.90635374 L11.8880894,12.9882942 C11.8880894,13.5470439 11.4081136,14\n        10.8160333,14 L5.45575268,14 C4.86367243,14 4.38369655,13.5470439 4.38369655,12.9882942\n        L4.38369655,5.90635374 M6.55677437,3.50129871 L7.00984487,2.58438188\n        C7.26006879,2.0779827 7.89792124,1.85889257 8.43452818,2.09503039 L10.3777538,2.95016107\n        C10.9143608,3.18629888 11.1465201,3.78824405 10.8962961,4.29464323 L10.4432256,5.21156006\"\n      />\n      <line x1=\"7.06383687\" y1=\"8.4356182\" x2=\"7.06383687\" y2=\"11.4707355\" />\n      <line x1=\"9.20794912\" y1=\"8.4356182\" x2=\"9.20794912\" y2=\"11.4707355\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/trash.vue.js

@@ -5,7 +5,7 @@ import script from './trash.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function(_h, _vm) {
+var __vue_render__ = function (_h, _vm) {
   var _c = _vm._c;
   return _c(
     "svg",
@@ -15,8 +15,8 @@ var __vue_render__ = function(_h, _vm) {
         viewBox: "0 0 16 16",
         version: "1.1",
         xmlns: "http://www.w3.org/2000/svg",
-        "xmlns:xlink": "http://www.w3.org/1999/xlink"
-      }
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
     },
     [
       _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
@@ -24,20 +24,17 @@ var __vue_render__ = function(_h, _vm) {
         _vm._v(" "),
         _c("path", {
           attrs: {
-            d:
-              "M11.8888889,4.4 L11.8888889,12.8 C11.8888889,13.4627417 11.3914275,14 10.7777778,14\n      L5.22222222,14 C4.6085725,14 4.11111111,13.4627417 4.11111111,12.8 L4.11111111,4.4\n      M5.77777778,4.4 L5.77777778,3.2 C5.77777778,2.5372583 6.27523917,2 6.88888889,2\n      L9.11111111,2 C9.72476083,2 10.2222222,2.5372583 10.2222222,3.2 L10.2222222,4.4"
-          }
+            d: "M11.8888889,4.4 L11.8888889,12.8 C11.8888889,13.4627417 11.3914275,14 10.7777778,14\n      L5.22222222,14 C4.6085725,14 4.11111111,13.4627417 4.11111111,12.8 L4.11111111,4.4\n      M5.77777778,4.4 L5.77777778,3.2 C5.77777778,2.5372583 6.27523917,2 6.88888889,2\n      L9.11111111,2 C9.72476083,2 10.2222222,2.5372583 10.2222222,3.2 L10.2222222,4.4",
+          },
         }),
         _vm._v(" "),
         _c("line", {
-          attrs: { x1: "6.88888889", y1: "7.4", x2: "6.88888889", y2: "11" }
+          attrs: { x1: "6.88888889", y1: "7.4", x2: "6.88888889", y2: "11" },
         }),
         _vm._v(" "),
         _c("line", {
-          attrs: { x1: "9.11111111", y1: "7.4", x2: "9.11111111", y2: "11" }
-        })
-      ])
-    ]
+          attrs: { x1: "9.11111111", y1: "7.4", x2: "9.11111111", y2: "11" },
+        }) ]) ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/icons/trash.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"trash.vue.js","sources":["../../../../src/components/icons/trash.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline points=\"3 4.4 4.11111111 4.4 13 4.4\" />\n      <path\n        d=\"M11.8888889,4.4 L11.8888889,12.8 C11.8888889,13.4627417 11.3914275,14 10.7777778,14\n        L5.22222222,14 C4.6085725,14 4.11111111,13.4627417 4.11111111,12.8 L4.11111111,4.4\n        M5.77777778,4.4 L5.77777778,3.2 C5.77777778,2.5372583 6.27523917,2 6.88888889,2\n        L9.11111111,2 C9.72476083,2 10.2222222,2.5372583 10.2222222,3.2 L10.2222222,4.4\"\n      />\n      <line x1=\"6.88888889\" y1=\"7.4\" x2=\"6.88888889\" y2=\"11\" />\n      <line x1=\"9.11111111\" y1=\"7.4\" x2=\"9.11111111\" y2=\"11\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"trash.vue.js","sources":["../../../../src/components/icons/trash.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline points=\"3 4.4 4.11111111 4.4 13 4.4\" />\n      <path\n        d=\"M11.8888889,4.4 L11.8888889,12.8 C11.8888889,13.4627417 11.3914275,14 10.7777778,14\n        L5.22222222,14 C4.6085725,14 4.11111111,13.4627417 4.11111111,12.8 L4.11111111,4.4\n        M5.77777778,4.4 L5.77777778,3.2 C5.77777778,2.5372583 6.27523917,2 6.88888889,2\n        L9.11111111,2 C9.72476083,2 10.2222222,2.5372583 10.2222222,3.2 L10.2222222,4.4\"\n      />\n      <line x1=\"6.88888889\" y1=\"7.4\" x2=\"6.88888889\" y2=\"11\" />\n      <line x1=\"9.11111111\" y1=\"7.4\" x2=\"9.11111111\" y2=\"11\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/trending-tiny.vue.js

@@ -5,7 +5,7 @@ import script from './trending-tiny.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function(_h, _vm) {
+var __vue_render__ = function (_h, _vm) {
   var _c = _vm._c;
   return _c(
     "svg",
@@ -15,8 +15,8 @@ var __vue_render__ = function(_h, _vm) {
         viewBox: "0 0 16 16",
         version: "1.1",
         xmlns: "http://www.w3.org/2000/svg",
-        "xmlns:xlink": "http://www.w3.org/1999/xlink"
-      }
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
     },
     [
       _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
@@ -24,19 +24,17 @@ var __vue_render__ = function(_h, _vm) {
           attrs: {
             transform:
               "translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) ",
-            points: "12 10 8.54545455 6.83333333 6.72727273 8.5 4 6"
-          }
+            points: "12 10 8.54545455 6.83333333 6.72727273 8.5 4 6",
+          },
         }),
         _vm._v(" "),
         _c("polyline", {
           attrs: {
             transform:
               "translate(10.909091, 7.000000) scale(1, -1) translate(-10.909091, -7.000000) ",
-            points: "9.81818182 8 12 8 12 6"
-          }
-        })
-      ])
-    ]
+            points: "9.81818182 8 12 8 12 6",
+          },
+        }) ]) ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/icons/trending-tiny.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"trending-tiny.vue.js","sources":["../../../../src/components/icons/trending-tiny.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline\n        transform=\"translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) \"\n        points=\"12 10 8.54545455 6.83333333 6.72727273 8.5 4 6\"\n      />\n      <polyline\n        transform=\"translate(10.909091, 7.000000) scale(1, -1) translate(-10.909091, -7.000000) \"\n        points=\"9.81818182 8 12 8 12 6\"\n      />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"trending-tiny.vue.js","sources":["../../../../src/components/icons/trending-tiny.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline\n        transform=\"translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) \"\n        points=\"12 10 8.54545455 6.83333333 6.72727273 8.5 4 6\"\n      />\n      <polyline\n        transform=\"translate(10.909091, 7.000000) scale(1, -1) translate(-10.909091, -7.000000) \"\n        points=\"9.81818182 8 12 8 12 6\"\n      />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/trending.vue.js

@@ -5,7 +5,7 @@ import script from './trending.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function(_h, _vm) {
+var __vue_render__ = function (_h, _vm) {
   var _c = _vm._c;
   return _c(
     "svg",
@@ -15,8 +15,8 @@ var __vue_render__ = function(_h, _vm) {
         viewBox: "0 0 16 16",
         version: "1.1",
         xmlns: "http://www.w3.org/2000/svg",
-        "xmlns:xlink": "http://www.w3.org/1999/xlink"
-      }
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
     },
     [
       _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
@@ -24,19 +24,17 @@ var __vue_render__ = function(_h, _vm) {
           attrs: {
             transform:
               "translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) ",
-            points: "14 12 8.81818182 6.45833333 6.09090909 9.375 2 5"
-          }
+            points: "14 12 8.81818182 6.45833333 6.09090909 9.375 2 5",
+          },
         }),
         _vm._v(" "),
         _c("polyline", {
           attrs: {
             transform:
               "translate(12.363636, 6.750000) scale(1, -1) translate(-12.363636, -6.750000) ",
-            points: "10.7272727 8.5 14 8.5 14 5"
-          }
-        })
-      ])
-    ]
+            points: "10.7272727 8.5 14 8.5 14 5",
+          },
+        }) ]) ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/icons/trending.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"trending.vue.js","sources":["../../../../src/components/icons/trending.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline\n        transform=\"translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) \"\n        points=\"14 12 8.81818182 6.45833333 6.09090909 9.375 2 5\"\n      />\n      <polyline\n        transform=\"translate(12.363636, 6.750000) scale(1, -1) translate(-12.363636, -6.750000) \"\n        points=\"10.7272727 8.5 14 8.5 14 5\"\n      />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"trending.vue.js","sources":["../../../../src/components/icons/trending.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <polyline\n        transform=\"translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) \"\n        points=\"14 12 8.81818182 6.45833333 6.09090909 9.375 2 5\"\n      />\n      <polyline\n        transform=\"translate(12.363636, 6.750000) scale(1, -1) translate(-12.363636, -6.750000) \"\n        points=\"10.7272727 8.5 14 8.5 14 5\"\n      />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/user.vue.js

@@ -5,7 +5,7 @@ import script from './user.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function(_h, _vm) {
+var __vue_render__ = function (_h, _vm) {
   var _c = _vm._c;
   return _c(
     "svg",
@@ -15,21 +15,18 @@ var __vue_render__ = function(_h, _vm) {
         viewBox: "0 0 16 16",
         version: "1.1",
         xmlns: "http://www.w3.org/2000/svg",
-        "xmlns:xlink": "http://www.w3.org/1999/xlink"
-      }
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
     },
     [
       _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
         _c("path", {
           attrs: {
-            d:
-              "M14,14 L14,12.6666667 C14,11.1939073 12.6568542,10 11,10 L5,10 C3.34314575,10\n      2,11.1939073 2,12.6666667 L2,14"
-          }
+            d: "M14,14 L14,12.6666667 C14,11.1939073 12.6568542,10 11,10 L5,10 C3.34314575,10\n      2,11.1939073 2,12.6666667 L2,14",
+          },
         }),
         _vm._v(" "),
-        _c("circle", { attrs: { cx: "8", cy: "5", r: "3" } })
-      ])
-    ]
+        _c("circle", { attrs: { cx: "8", cy: "5", r: "3" } }) ]) ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/icons/user.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"user.vue.js","sources":["../../../../src/components/icons/user.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <path\n        d=\"M14,14 L14,12.6666667 C14,11.1939073 12.6568542,10 11,10 L5,10 C3.34314575,10\n        2,11.1939073 2,12.6666667 L2,14\"\n      />\n      <circle cx=\"8\" cy=\"5\" r=\"3\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"user.vue.js","sources":["../../../../src/components/icons/user.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <path\n        d=\"M14,14 L14,12.6666667 C14,11.1939073 12.6568542,10 11,10 L5,10 C3.34314575,10\n        2,11.1939073 2,12.6666667 L2,14\"\n      />\n      <circle cx=\"8\" cy=\"5\" r=\"3\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -5,7 +5,7 @@ import script from './items-list.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,26 +15,25 @@ var __vue_render__ = function() {
         {
           tag: "component",
           staticClass: "x-items-list",
-          attrs: { tag: "ul", "data-test": "items-list" }
+          attrs: { tag: "ul", "data-test": "items-list" },
         },
-        _vm._l(_vm.computedItems, function(item) {
+        _vm._l(_vm.computedItems, function (item) {
           return _c(
             "li",
             {
               key: item.id,
               staticClass: "x-items-list__item",
               class: item.class,
-              attrs: { "data-test": item.dataTest }
+              attrs: { "data-test": item.dataTest },
             },
             [
               _vm._t(
                 item.slotName,
-                function() {
+                function () {
                   return [_vm._v(_vm._s(item.id))]
                 },
                 { item: item }
-              )
-            ],
+              ) ],
             2
           )
         }),

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":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,212 @@
+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';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "MainScroll",
+    [
+      _c(
+        "Scroll",
+        {
+          staticClass: "x-layout x-layout--fixed-header-and-asides",
+          class: { "dev-mode": _vm.devMode },
+          attrs: { id: "main-scroll" },
+          on: { scroll: _vm.setPosition },
+        },
+        [
+          _c("div", {
+            key: "header-backdrop",
+            staticClass: "x-layout__header-backdrop",
+            class: {
+              "x-layout__header-backdrop--is-visible": _vm.isBackdropVisible,
+            },
+          }),
+          _vm._v(" "),
+          _vm.hasContent("header")
+            ? _c(
+                "header",
+                {
+                  key: "header",
+                  staticClass: "x-layout__header x-list x-list--horizontal",
+                },
+                [
+                  _vm._t("header", function () {
+                    return [
+                      _vm.devMode
+                        ? _c("span", { staticClass: "slot-helper" }, [
+                            _vm._v("HEADER") ])
+                        : _vm._e() ]
+                  }) ],
+                2
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _vm.hasContent("sub-header")
+            ? _c(
+                "div",
+                { key: "sub-header", staticClass: "x-layout__sub-header" },
+                [
+                  _c(
+                    "div",
+                    { staticClass: "x-layout__sub-header-content" },
+                    [
+                      _vm._t("sub-header", function () {
+                        return [
+                          _vm.devMode
+                            ? _c("span", { staticClass: "slot-helper" }, [
+                                _vm._v("SUB HEADER") ])
+                            : _vm._e() ]
+                      }) ],
+                    2
+                  ) ]
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _vm.hasContent("toolbar")
+            ? _c(
+                "section",
+                { key: "toolbar", staticClass: "x-layout__toolbar" },
+                [
+                  _vm._t("toolbar", function () {
+                    return [
+                      _vm.devMode
+                        ? _c("span", { staticClass: "slot-helper" }, [
+                            _vm._v("TOOLBAR") ])
+                        : _vm._e() ]
+                  }) ],
+                2
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _vm.hasContent("main")
+            ? _c(
+                "main",
+                {
+                  key: "main",
+                  staticClass: "x-layout__main x-list x-list--vertical",
+                },
+                [
+                  _vm._t("main", function () {
+                    return [
+                      _vm.devMode
+                        ? _c("span", { staticClass: "slot-helper" }, [
+                            _vm._v("MAIN") ])
+                        : _vm._e() ]
+                  }) ],
+                2
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _vm.hasContent("left-aside")
+            ? _c(
+                "BaseIdModal",
+                {
+                  key: "left-aside",
+                  staticClass: "x-layout__aside x-layout__aside--left",
+                  attrs: {
+                    animation: _vm.leftAsideAnimation,
+                    modalId: "left-aside",
+                  },
+                },
+                [
+                  _vm._t("left-aside", function () {
+                    return [
+                      _vm.devMode
+                        ? _c("span", { staticClass: "slot-helper" }, [
+                            _vm._v("LEFT ASIDE") ])
+                        : _vm._e() ]
+                  }) ],
+                2
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _vm.hasContent("right-aside")
+            ? _c(
+                "BaseIdModal",
+                {
+                  key: "right-aside",
+                  staticClass: "x-layout__aside x-layout__aside--right",
+                  attrs: {
+                    animation: _vm.rightAsideAnimation,
+                    modalId: "right-aside",
+                  },
+                },
+                [
+                  _vm._t("right-aside", function () {
+                    return [
+                      _vm.devMode
+                        ? _c("span", { staticClass: "slot-helper" }, [
+                            _vm._v("RIGHT ASIDE") ])
+                        : _vm._e() ]
+                  }) ],
+                2
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _vm.hasContent("scroll-to-top")
+            ? _c(
+                "div",
+                {
+                  key: "scroll-to-top",
+                  staticClass: "x-layout__scroll-to-top",
+                },
+                [
+                  _vm._t("scroll-to-top", function () {
+                    return [
+                      _vm.devMode
+                        ? _c("span", { staticClass: "slot-helper" }, [
+                            _vm._v("SCROLL TO TOP") ])
+                        : _vm._e() ]
+                  }) ],
+                2
+              )
+            : _vm._e() ],
+        1
+      ) ],
+    1
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __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  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";
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    __vue_create_injector__,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+//# sourceMappingURL=fixed-header-and-asides-layout.vue.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,57 @@
+import { __extends, __decorate } from 'tslib';
+import { Component } from 'vue-property-decorator';
+import '../animations/animate-width.vue.js';
+import '../animations/collapse-from-top.vue.js';
+import '../animations/animations.mixin.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/staggering-transition-group.vue.js';
+import '../animations/staggered-fade-and-slide.vue.js';
+import TranslateFromLeft from '../animations/translate-from-left.vue.js';
+import TranslateFromRight from '../animations/translate-from-right.vue.js';
+import { mixins } from 'vue-class-component';
+import MainScroll from '../../x-modules/scroll/components/main-scroll.vue.js';
+import BaseIdModal from '../modals/base-id-modal.vue.js';
+import Scroll 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
+ */
+var FixedHeaderAndAsidesLayout = /** @class */ (function (_super) {
+    __extends(FixedHeaderAndAsidesLayout, _super);
+    function FixedHeaderAndAsidesLayout() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.scrollPosition = 0;
+        _this.rightAsideAnimation = TranslateFromRight;
+        _this.leftAsideAnimation = TranslateFromLeft;
+        return _this;
+    }
+    FixedHeaderAndAsidesLayout.prototype.setPosition = function (position) {
+        this.scrollPosition = position;
+    };
+    Object.defineProperty(FixedHeaderAndAsidesLayout.prototype, "isBackdropVisible", {
+        get: function () {
+            return this.scrollPosition > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    FixedHeaderAndAsidesLayout = __decorate([
+        Component({
+            components: {
+                BaseIdModal: BaseIdModal,
+                MainScroll: MainScroll,
+                Scroll: Scroll
+            }
+        })
+    ], FixedHeaderAndAsidesLayout);
+    return FixedHeaderAndAsidesLayout;
+}(mixins(LayoutsMixin)));
+
+export default FixedHeaderAndAsidesLayout;
+//# sourceMappingURL=fixed-header-and-asides-layout.vue_rollup-plugin-vue=script.js.map