@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.91

package/js/components/highlight.vue2.js

@@ -14,28 +14,28 @@ var _sfc_main = defineComponent({
         /** The text to highlight some part of it. */
         text: {
             type: String,
-            default: ''
+            default: '',
         },
         /** The part of the text to be highlighted. */
         highlight: {
             type: String,
-            default: ''
+            default: '',
         },
         /** CSS Class to add when the `text` string contains the `highlight` string. */
         matchClass: {
             type: String,
-            default: ''
+            default: '',
         },
         /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */
         noMatchClass: {
             type: String,
-            default: ''
+            default: '',
         },
         /** CSS Class to add to the matching text. */
         matchingPartClass: {
             type: String,
-            default: ''
-        }
+            default: '',
+        },
     },
     setup(props, { slots }) {
         /**
@@ -51,7 +51,7 @@ var _sfc_main = defineComponent({
             return {
                 start: label.substring(0, start),
                 match: label.substring(start, end),
-                end: label.substring(end)
+                end: label.substring(end),
             };
         }
         /**
@@ -88,7 +88,7 @@ var _sfc_main = defineComponent({
             const classes = {
                 'x-highlight--has-match': hasMatch.value,
                 'x-highlight-text': hasMatch.value,
-                [props.matchClass]: hasMatch.value
+                [props.matchClass]: hasMatch.value,
             };
             if (props.noMatchClass) {
                 classes[props.noMatchClass] = !hasMatch.value;
@@ -108,15 +108,15 @@ var _sfc_main = defineComponent({
             const slotProps = {
                 text: props.text,
                 hasMatch: hasMatch.value,
-                ...matchParts.value
+                ...matchParts.value,
             };
             return slots.default?.(slotProps)[0];
         }
         /* Hack to render through a render-function, the `default` slot or, in its absence,
-         the component itself. It is the alternative for the NoElement antipattern. */
+           the component itself. It is the alternative for the NoElement antipattern. */
         const componentProps = { hasMatch, matchParts, dynamicCSSClasses };
         return (slots.default ? renderDefaultSlot : componentProps);
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/highlight.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.vue2.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      v-text=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      v-text=\"matchParts.match\"\n      class=\"x-highlight__text x-highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      v-text=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { normalizeString } from '../utils';\n\n  /**\n   * Highlights the given part of the text. The component is smart enough to do matches\n   * between special characters like tilde, cedilla, eñe, capital letters...\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Highlight',\n    props: {\n      /** The text to highlight some part of it. */\n      text: {\n        type: String,\n        default: ''\n      },\n      /** The part of the text to be highlighted. */\n      highlight: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add when the `text` string contains the `highlight` string. */\n      matchClass: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n      noMatchClass: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add to the matching text. */\n      matchingPartClass: {\n        type: String,\n        default: ''\n      }\n    },\n    setup(props, { slots }) {\n      /**\n       * Splits the label in three parts based on two indexes.\n       *\n       * @param label - The string that will be divided in three parts.\n       * @param start - The first index that the label will be divided by.\n       * @param end - The second index that the label will be divided by.\n       *\n       * @returns The three parts of the divided label.\n       */\n      function splitAt(label: string, start: number, end: number) {\n        return {\n          start: label.substring(0, start),\n          match: label.substring(start, end),\n          end: label.substring(end)\n        };\n      }\n\n      /**\n       * Splits the text to highlight into 3 parts: a starting part, the matching part\n       * and the ending part. If there is no match between the text and the highlight, the `start`\n       * property will contain the whole text.\n       *\n       * @returns An object containing the different parts of the text.\n       */\n      const matchParts = computed(() => {\n        const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight));\n        return matcherIndex !== -1 && props.highlight\n          ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n          : { start: props.text, match: '', end: '' };\n      });\n\n      /**\n       * Checks if the normalized suggestion query matches with the module's query, so it has a\n       * matching part.\n       *\n       * @returns True if there is a match between the text and the highlight strings.\n       */\n      const hasMatch = computed(() => !!matchParts.value.match);\n\n      /**\n       * CSS classes to add depending on the component state.\n       *\n       * @remarks\n       * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n       * `[matchClass]`: When there is a match between the text and\n       * the part to highlight.\n       * `[noMatchClass]`: when there is no match between the text to highlight.\n       * @returns The CSS classes.\n       */\n      const dynamicCSSClasses = computed(() => {\n        const classes = {\n          'x-highlight--has-match': hasMatch.value,\n          'x-highlight-text': hasMatch.value,\n          [props.matchClass]: hasMatch.value\n        };\n        if (props.noMatchClass) {\n          classes[props.noMatchClass] = !hasMatch.value;\n        }\n        return classes;\n      });\n\n      /**\n       * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `default` slot.\n       */\n      function renderDefaultSlot() {\n        const slotProps = {\n          text: props.text,\n          hasMatch: hasMatch.value,\n          ...matchParts.value\n        };\n        return slots.default?.(slotProps)[0];\n      }\n\n      /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { hasMatch, matchParts, dynamicCSSClasses };\n      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: ''\n      };\n    }\n  };\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can\nonly render a single root element.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: 'entran'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"highlight.vue2.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n      v-text=\"matchParts.start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      class=\"x-highlight__text x-highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n      v-text=\"matchParts.match\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n      v-text=\"matchParts.end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { normalizeString } from '../utils'\n\n/**\n * Highlights the given part of the text. The component is smart enough to do matches\n * between special characters like tilde, cedilla, eñe, capital letters...\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Highlight',\n  props: {\n    /** The text to highlight some part of it. */\n    text: {\n      type: String,\n      default: '',\n    },\n    /** The part of the text to be highlighted. */\n    highlight: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the `text` string contains the `highlight` string. */\n    matchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n    noMatchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add to the matching text. */\n    matchingPartClass: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props, { slots }) {\n    /**\n     * Splits the label in three parts based on two indexes.\n     *\n     * @param label - The string that will be divided in three parts.\n     * @param start - The first index that the label will be divided by.\n     * @param end - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     */\n    function splitAt(label: string, start: number, end: number) {\n      return {\n        start: label.substring(0, start),\n        match: label.substring(start, end),\n        end: label.substring(end),\n      }\n    }\n\n    /**\n     * Splits the text to highlight into 3 parts: a starting part, the matching part\n     * and the ending part. If there is no match between the text and the highlight, the `start`\n     * property will contain the whole text.\n     *\n     * @returns An object containing the different parts of the text.\n     */\n    const matchParts = computed(() => {\n      const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight))\n      return matcherIndex !== -1 && props.highlight\n        ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n        : { start: props.text, match: '', end: '' }\n    })\n\n    /**\n     * Checks if the normalized suggestion query matches with the module's query, so it has a\n     * matching part.\n     *\n     * @returns True if there is a match between the text and the highlight strings.\n     */\n    const hasMatch = computed(() => !!matchParts.value.match)\n\n    /**\n     * CSS classes to add depending on the component state.\n     *\n     * @remarks\n     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n     * `[matchClass]`: When there is a match between the text and\n     * the part to highlight.\n     * `[noMatchClass]`: when there is no match between the text to highlight.\n     * @returns The CSS classes.\n     */\n    const dynamicCSSClasses = computed(() => {\n      const classes = {\n        'x-highlight--has-match': hasMatch.value,\n        'x-highlight-text': hasMatch.value,\n        [props.matchClass]: hasMatch.value,\n      }\n      if (props.noMatchClass) {\n        classes[props.noMatchClass] = !hasMatch.value\n      }\n      return classes\n    })\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        text: props.text,\n        hasMatch: hasMatch.value,\n        ...matchParts.value,\n      }\n      return slots.default?.(slotProps)[0]\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { hasMatch, matchParts, dynamicCSSClasses }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script>\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HighlightDemo',\n  components: {\n    Highlight,\n  },\n  data() {\n    return {\n      highlight: '',\n    }\n  },\n}\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can\nonly render a single root element.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script>\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HighlightDemo',\n  components: {\n    Highlight,\n  },\n  data() {\n    return {\n      highlight: 'entran',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -23,7 +23,7 @@ const _hoisted_3 = [
 function _sfc_render(_ctx, _cache) {
   return (openBlock(), createElementBlock("svg", _hoisted_1, [..._hoisted_3]))
 }
-var crossTiny = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+var CrossTinyIcon = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
 
-export { crossTiny as default };
+export { CrossTinyIcon as default };
 //# sourceMappingURL=cross-tiny.vue.js.map

package/js/components/icons/plus.vue.js

@@ -23,7 +23,7 @@ const _hoisted_3 = [
 function _sfc_render(_ctx, _cache) {
   return (openBlock(), createElementBlock("svg", _hoisted_1, [..._hoisted_3]))
 }
-var plus = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+var PlusIcon = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
 
-export { plus as default };
+export { PlusIcon as default };
 //# sourceMappingURL=plus.vue.js.map

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

@@ -1,5 +1,5 @@
 import _sfc_main from './items-list.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["data-test"];
@@ -20,7 +20,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: normalizeClass(["x-items-list__item", item.class]),
             "data-test": item.dataTest
           }, [
-            createCommentVNode("\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      "),
             renderSlot(_ctx.$slots, item.slotName, { item }, () => [
               createTextVNode(
                 toDisplayString(item.id),

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 { computed, defineComponent, PropType } from 'vue';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n  import { animationProp } from '../utils/options-api';\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  export default defineComponent({\n    name: 'ItemsList',\n    props: {\n      /** Animation component that will be used to animate the list. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      },\n      /** List of items. */\n      items: {\n        type: Array as PropType<ListItem[]>,\n        required: true\n      },\n      /** Item's classes. */\n      itemClass: String\n    },\n    setup(props) {\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      const computedItems = computed(() =>\n        props.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`, props.itemClass],\n            slotName: modelName\n          };\n        })\n      );\n\n      return { computedItems };\n    }\n  });\n</script>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_renderSlot","_toDisplayString"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SAFT,IAIY,CAAA,KAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AANJ,IAAA,WAAA,EAAA,YAAA;AAAA,GAAA,EAAA;;iBAUY,IAAO,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,aAAA,EAAA,CAAA,IAAA,KAAA;AACR,UAAA,OAAAL,SAAA,uBAAC,IACE,EAAA;AAAA,YACP,GAAA,EAAA,IAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAAM,cAAA,CAAA,CAAA,oBAAA,EAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAED,YAAA,WAAA,EAAA,IAAA,CAAA,QAAA;AAAA,WAIA,EAAA;AAAA,YAAAC,kBAAA,CAnBN,iGAmByD,CAAA;AAAA,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,IAAA,CAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,MAAA;;AAnBzD,gBAAAC,eAAA,CAAA,IAAA,CAAA,EAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAAA,CAAA;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAF,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"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\">\nimport type { PropType } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../types'\nimport { toKebabCase } from '../utils/string'\n\n/**\n * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n * the `modelName`of the item.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ItemsList',\n  props: {\n    /** Animation component that will be used to animate the list. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** List of items. */\n    items: {\n      type: Array as PropType<ListItem[]>,\n      required: true,\n    },\n    /** Item's classes. */\n    itemClass: String,\n  },\n  setup(props) {\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    const computedItems = computed(() =>\n      props.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`, props.itemClass],\n          slotName: modelName,\n        }\n      }),\n    )\n\n    return { computedItems }\n  },\n})\n</script>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_toDisplayString","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SAFT,IAIY,CAAA,KAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AANJ,IAAA,WAAA,EAAA,YAAA;AAAA,GAAA,EAAA;;iBAUY,IAAO,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,aAAA,EAAA,CAAA,IAAA,KAAA;AACR,UAAA,OAAAL,SAAA,uBAAC,IACE,EAAA;AAAA,YACP,GAAA,EAAA,IAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAAM,cAAA,CAAA,CAAA,oBAAA,EAAA,IAAA,CAAA,KAAA,CAAA,CAAA;YAMD,WAA6D,EAAA,IAAA,CAAA,QAAA;AAAA,WAAA,EAAA;;;AAnBnE,gBAAAC,eAAA,CAAA,IAAA,CAAA,EAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAAA,CAAA;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,6 +1,6 @@
 import { defineComponent, computed } from 'vue';
+import { AnimationProp } from '../types/animation-prop.js';
 import { toKebabCase } from '../utils/string.js';
-import { animationProp } from '../utils/options-api.js';
 
 /**
  * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on
@@ -13,16 +13,16 @@ var _sfc_main = defineComponent({
     props: {
         /** Animation component that will be used to animate the list. */
         animation: {
-            type: animationProp,
-            default: 'ul'
+            type: AnimationProp,
+            default: 'ul',
         },
         /** List of items. */
         items: {
             type: Array,
-            required: true
+            required: true,
         },
         /** Item's classes. */
-        itemClass: String
+        itemClass: String,
     },
     setup(props) {
         /**
@@ -36,11 +36,11 @@ var _sfc_main = defineComponent({
                 ...item,
                 dataTest: `${modelName}s-list-item`,
                 class: [`x-${modelName}s-list-item`, props.itemClass],
-                slotName: modelName
+                slotName: modelName,
             };
         }));
         return { computedItems };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"items-list.vue2.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 { computed, defineComponent, PropType } from 'vue';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n  import { animationProp } from '../utils/options-api';\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  export default defineComponent({\n    name: 'ItemsList',\n    props: {\n      /** Animation component that will be used to animate the list. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      },\n      /** List of items. */\n      items: {\n        type: Array as PropType<ListItem[]>,\n        required: true\n      },\n      /** Item's classes. */\n      itemClass: String\n    },\n    setup(props) {\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      const computedItems = computed(() =>\n        props.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`, props.itemClass],\n            slotName: modelName\n          };\n        })\n      );\n\n      return { computedItems };\n    }\n  });\n</script>\n"],"names":[],"mappings":";;;;AA8BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;;AAED,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAA6B;AACnC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,SAAS,EAAE,MAAK;AACjB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,aAAc,GAAE,QAAQ,CAAC,MAC7B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,IAAK;YACtB,MAAM,SAAU,GAAE,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;YAC7C,OAAO;AACL,gBAAA,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAG,EAAA,SAAS,CAAa,WAAA,CAAA;gBACnC,KAAK,EAAE,CAAC,CAAK,EAAA,EAAA,SAAS,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;AACrD,gBAAA,QAAQ,EAAE,SAAQ;aACnB,CAAA;SACF,CAAA,CACF,CAAA;QAED,OAAO,EAAE,eAAe,CAAA;KAC1B;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"items-list.vue2.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\">\nimport type { PropType } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../types'\nimport { toKebabCase } from '../utils/string'\n\n/**\n * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n * the `modelName`of the item.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ItemsList',\n  props: {\n    /** Animation component that will be used to animate the list. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** List of items. */\n    items: {\n      type: Array as PropType<ListItem[]>,\n      required: true,\n    },\n    /** Item's classes. */\n    itemClass: String,\n  },\n  setup(props) {\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    const computedItems = computed(() =>\n      props.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`, props.itemClass],\n          slotName: modelName,\n        }\n      }),\n    )\n\n    return { computedItems }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;AA+BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAA6B;AACnC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,aAAc,GAAE,QAAQ,CAAC,MAC7B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,IAAK;YACtB,MAAM,SAAQ,GAAI,WAAW,CAAC,IAAI,CAAC,SAAS,CAAA,CAAA;YAC5C,OAAO;AACL,gBAAA,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAG,EAAA,SAAS,CAAa,WAAA,CAAA;gBACnC,KAAK,EAAE,CAAC,CAAK,EAAA,EAAA,SAAS,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;AACrD,gBAAA,QAAQ,EAAE,SAAS;aACrB,CAAA;SACD,CAAC,CACJ,CAAA;QAEA,OAAO,EAAE,aAAc,EAAA,CAAA;KACxB;AACF,CAAA,CAAA;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './fixed-header-and-asides-layout.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, renderSlot, createCommentVNode } from 'vue';
 import './fixed-header-and-asides-layout.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -63,9 +63,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_MainScroll, null, {
     default: withCtx(() => [
       createVNode(_component_Scroll, {
-        onScroll: _ctx.setPosition,
         id: "main-scroll",
-        class: normalizeClass(["x-layout x-layout--fixed-header-and-asides", { "dev-mode": _ctx.devMode }])
+        class: normalizeClass(["x-layout x-layout--fixed-header-and-asides", { "dev-mode": _ctx.devMode }]),
+        onScroll: _ctx.setPosition
       }, {
         default: withCtx(() => [
           createElementVNode(
@@ -78,28 +78,24 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             2
             /* CLASS */
           ),
-          _ctx.devMode || _ctx.$slots["header"] ? (openBlock(), createElementBlock("header", _hoisted_1, [
-            createCommentVNode(" @slot Slot that is be used for insert content into the Header. "),
+          _ctx.devMode || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1, [
             renderSlot(_ctx.$slots, "header", {}, () => [
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_2, "HEADER")) : createCommentVNode("v-if", true)
             ], true)
           ])) : createCommentVNode("v-if", true),
           _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
             createElementVNode("div", _hoisted_4, [
-              createCommentVNode(" @slot Slot that can be used to insert content into below the header. "),
               renderSlot(_ctx.$slots, "sub-header", {}, () => [
                 _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_5, "SUB HEADER")) : createCommentVNode("v-if", true)
               ], true)
             ])
           ])) : createCommentVNode("v-if", true),
-          _ctx.devMode || _ctx.$slots["toolbar"] ? (openBlock(), createElementBlock("section", _hoisted_6, [
+          _ctx.devMode || _ctx.$slots.toolbar ? (openBlock(), createElementBlock("section", _hoisted_6, [
             renderSlot(_ctx.$slots, "toolbar", {}, () => [
-              createCommentVNode(" @slot Slot that can be used to insert content above the main. "),
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_7, "TOOLBAR")) : createCommentVNode("v-if", true)
             ], true)
           ])) : createCommentVNode("v-if", true),
-          _ctx.devMode || _ctx.$slots["main"] ? (openBlock(), createElementBlock("main", _hoisted_8, [
-            createCommentVNode(" @slot Slot that is be used for insert content into the Main. "),
+          _ctx.devMode || _ctx.$slots.main ? (openBlock(), createElementBlock("main", _hoisted_8, [
             renderSlot(_ctx.$slots, "main", {}, () => [
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_9, "MAIN")) : createCommentVNode("v-if", true)
             ], true)
@@ -107,11 +103,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.devMode || _ctx.$slots["left-aside"] ? (openBlock(), createBlock(_component_BaseIdModal, {
             key: "left-aside",
             animation: _ctx.leftAsideAnimation,
-            modalId: "left-aside",
+            "modal-id": "left-aside",
             class: "x-layout__aside x-layout__aside--left"
           }, {
             default: withCtx(() => [
-              createCommentVNode(" @slot Slot that is be used for insert content into the left aside. "),
               renderSlot(_ctx.$slots, "left-aside", {}, () => [
                 _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "LEFT ASIDE")) : createCommentVNode("v-if", true)
               ], true)
@@ -122,11 +117,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.devMode || _ctx.$slots["right-aside"] ? (openBlock(), createBlock(_component_BaseIdModal, {
             key: "right-aside",
             animation: _ctx.rightAsideAnimation,
-            modalId: "right-aside",
+            "modal-id": "right-aside",
             class: "x-layout__aside x-layout__aside--right"
           }, {
             default: withCtx(() => [
-              createCommentVNode(" @slot Slot that is be used for insert content into the right aside. "),
               renderSlot(_ctx.$slots, "right-aside", {}, () => [
                 _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_11, "RIGHT ASIDE")) : createCommentVNode("v-if", true)
               ], true)
@@ -145,7 +139,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["onScroll", "class"])
+      }, 8, ["class", "onScroll"])
     ]),
     _: 3
     /* FORWARDED */

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=\"devMode || $slots['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=\"devMode || $slots['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=\"devMode || $slots['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\n        v-if=\"devMode || $slots['main']\"\n        key=\"main\"\n        class=\"x-layout__main x-list x-list--vertical\"\n      >\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=\"devMode || $slots['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=\"devMode || $slots['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      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\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 { computed, defineComponent, ref } from 'vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FixedHeaderAndAsidesLayout',\n    components: { BaseIdModal, MainScroll, Scroll },\n    props: {\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    },\n    setup() {\n      const scrollPosition = ref(0);\n\n      const rightAsideAnimation = animateTranslate('right');\n      const leftAsideAnimation = animateTranslate('left');\n\n      const setPosition = (position: number) => {\n        scrollPosition.value = position;\n      };\n      const isBackdropVisible = computed(() => scrollPosition.value > 0);\n\n      return {\n        rightAsideAnimation,\n        leftAsideAnimation,\n        setPosition,\n        isBackdropVisible\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\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\n  .x-layout__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  .x-layout__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  .x-layout__toolbar {\n    /* layout */\n    grid-row: toolbar;\n    grid-column: max-width;\n  }\n\n  .x-layout__main {\n    /* layout */\n    grid-row: main;\n    grid-column: max-width;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside.x-modal) {\n    z-index: 3;\n    flex-flow: row nowrap;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside--right.x-modal) {\n    justify-content: flex-end;\n  }\n\n  /* others */\n  .x-layout :deep(.x-layout__aside) {\n    pointer-events: none;\n  }\n  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n    pointer-events: all;\n  }\n\n  .x-layout__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  .x-layout__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  .x-layout__header-backdrop--is-visible {\n    opacity: 1;\n  }\n\n  .x-layout :deep(.x-layout__aside .x-modal__content) {\n    background-color: transparent;\n    height: 100%;\n    width: var(--x-size-width-layout-aside, 300px);\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\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\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":["_resolveComponent","_openBlock","_createBlock","_withCtx","setPosition","_normalizeClass","_createElementVNode","devMode","$slots","_createElementBlock","_createCommentVNode","_renderSlot","leftAsideAnimation","rightAsideAnimation"],"mappings":"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"}
+{"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      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\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=\"devMode || $slots.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=\"devMode || $slots['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=\"devMode || $slots.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=\"devMode || $slots.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=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"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=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"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      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\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\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\n\n/**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n@import url('../../design-system-deprecated/utilities/dev-mode.css');\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\n.x-layout__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.x-layout__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.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__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.x-layout__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.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\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\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\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":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createVNode","_normalizeClass","_createElementVNode","devMode","$slots","_createElementBlock","_renderSlot","_createCommentVNode","leftAsideAnimation","rightAsideAnimation"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed } from 'vue';
-import { animateTranslate } from '../animations/animate-translate/animate-translate.factory.js';
+import _sfc_main$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
 import Scroll from '../../x-modules/scroll/components/scroll.vue.js';
+import { animateTranslate } from '../animations/animate-translate/animate-translate.factory.js';
 import BaseIdModal from '../modals/base-id-modal.vue.js';
-import _sfc_main$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
 
 /**
  * Component for use as Layout to be filled with the rest of the components.
@@ -16,7 +16,7 @@ var _sfc_main = defineComponent({
     components: { BaseIdModal, MainScroll: _sfc_main$1, Scroll },
     props: {
         /** Enables the devMode, which shows the available slots to use with its names. */
-        devMode: Boolean
+        devMode: Boolean,
     },
     setup() {
         const scrollPosition = ref(0);
@@ -30,9 +30,9 @@ var _sfc_main = defineComponent({
             rightAsideAnimation,
             leftAsideAnimation,
             setPosition,
-            isBackdropVisible
+            isBackdropVisible,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue2.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=\"devMode || $slots['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=\"devMode || $slots['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=\"devMode || $slots['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\n        v-if=\"devMode || $slots['main']\"\n        key=\"main\"\n        class=\"x-layout__main x-list x-list--vertical\"\n      >\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=\"devMode || $slots['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=\"devMode || $slots['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      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\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 { computed, defineComponent, ref } from 'vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FixedHeaderAndAsidesLayout',\n    components: { BaseIdModal, MainScroll, Scroll },\n    props: {\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    },\n    setup() {\n      const scrollPosition = ref(0);\n\n      const rightAsideAnimation = animateTranslate('right');\n      const leftAsideAnimation = animateTranslate('left');\n\n      const setPosition = (position: number) => {\n        scrollPosition.value = position;\n      };\n      const isBackdropVisible = computed(() => scrollPosition.value > 0);\n\n      return {\n        rightAsideAnimation,\n        leftAsideAnimation,\n        setPosition,\n        isBackdropVisible\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\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\n  .x-layout__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  .x-layout__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  .x-layout__toolbar {\n    /* layout */\n    grid-row: toolbar;\n    grid-column: max-width;\n  }\n\n  .x-layout__main {\n    /* layout */\n    grid-row: main;\n    grid-column: max-width;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside.x-modal) {\n    z-index: 3;\n    flex-flow: row nowrap;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside--right.x-modal) {\n    justify-content: flex-end;\n  }\n\n  /* others */\n  .x-layout :deep(.x-layout__aside) {\n    pointer-events: none;\n  }\n  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n    pointer-events: all;\n  }\n\n  .x-layout__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  .x-layout__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  .x-layout__header-backdrop--is-visible {\n    opacity: 1;\n  }\n\n  .x-layout :deep(.x-layout__aside .x-modal__content) {\n    background-color: transparent;\n    height: 100%;\n    width: var(--x-size-width-layout-aside, 300px);\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\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\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":["MainScroll"],"mappings":";;;;;;AAsGE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,UAAU,EAAE,EAAE,WAAW,cAAEA,WAAU,EAAE,QAAQ;AAC/C,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE,OAAM;AAChB,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,cAAe,GAAE,GAAG,CAAC,CAAC,CAAC,CAAA;AAE7B,QAAA,MAAM,mBAAoB,GAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;AACrD,QAAA,MAAM,kBAAmB,GAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;AAEnD,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAK;AACxC,YAAA,cAAc,CAAC,KAAI,GAAI,QAAQ,CAAA;AACjC,SAAC,CAAA;AACD,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAI,GAAI,CAAC,CAAC,CAAA;QAElE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAgB;SACjB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue2.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\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=\"devMode || $slots.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=\"devMode || $slots['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=\"devMode || $slots.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=\"devMode || $slots.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=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"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=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"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      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\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\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\n\n/**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n@import url('../../design-system-deprecated/utilities/dev-mode.css');\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\n.x-layout__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.x-layout__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.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__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.x-layout__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.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\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\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\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":["MainScroll"],"mappings":";;;;;;AAkGA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,UAAU,EAAE,EAAE,WAAW,cAAEA,WAAU,EAAE,QAAQ;AAC/C,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,cAAa,GAAI,GAAG,CAAC,CAAC,CAAA,CAAA;AAE5B,QAAA,MAAM,mBAAkB,GAAI,gBAAgB,CAAC,OAAO,CAAA,CAAA;AACpD,QAAA,MAAM,kBAAiB,GAAI,gBAAgB,CAAC,MAAM,CAAA,CAAA;AAElD,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAK;AACxC,YAAA,cAAc,CAAC,KAAM,GAAE,QAAO,CAAA;AAChC,SAAA,CAAA;AACA,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAM,GAAE,CAAC,CAAA,CAAA;QAEjE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAiB;SACnB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
 import injectCss from '../../../tools/inject-css.js';
 
-var css = ".dev-mode .slot-helper{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-d5a25402]{--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout, 1440px))/2);--x-size-margin-layout:max(var(--x-size-min-margin-layout,20px),var(--x-size-margin-max-width));align-content:stretch;display:grid;grid-template-columns:[page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];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];max-height:100%;min-height:100%}.x-layout__header[data-v-d5a25402]{background:var(--x-color-background-layout-header,transparent);border-color:var(--x-size-border-color-layout-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-header,0);grid-column:page;grid-row:header;max-height:var(--x-size-max-height-layout-header,auto);padding:0 var(--x-size-margin-layout);position:sticky;top:-.5px;z-index:2}.x-layout__sub-header[data-v-d5a25402]{background:var(--x-color-background-layout-sub-header,transparent);border-color:var(--x-size-border-color-layout-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-sub-header,0);grid-column:page;grid-row:sub-header;padding:0 var(--x-size-margin-layout)}.x-layout__toolbar[data-v-d5a25402]{grid-column:max-width;grid-row:toolbar}.x-layout__main[data-v-d5a25402]{grid-column:max-width;grid-row:main}.x-layout[data-v-d5a25402] .x-layout__aside.x-modal{flex-flow:row nowrap;z-index:3}.x-layout[data-v-d5a25402] .x-layout__aside--right.x-modal{justify-content:flex-end}.x-layout[data-v-d5a25402] .x-layout__aside{pointer-events:none}.x-layout[data-v-d5a25402] .x-layout__aside>:not(.slot-helper){pointer-events:all}.x-layout__scroll-to-top[data-v-d5a25402]{bottom:var(--x-size-margin-bottom-layout-scroll-to-top,16px);position:fixed;right:var(--x-size-margin-right-layout-scroll-to-top,16px);z-index:1}.x-layout__header-backdrop[data-v-d5a25402]{background-color:var(\n      --x-color-background-layout-header-backdrop,var(--x-color-base-neutral-100,#fff)\n    );grid-column:page;grid-row:page;height:var(--x-size-height-layout-backdrop,40vh);mask:linear-gradient(180deg,rgba(0,0,0,.8),transparent);opacity:0;pointer-events:none;position:sticky;top:-.5px;transition:opacity .2s ease-out;width:100%;z-index:1}.x-layout__header-backdrop--is-visible[data-v-d5a25402]{opacity:1}.x-layout[data-v-d5a25402] .x-layout__aside .x-modal__content{background-color:transparent;height:100%;width:var(--x-size-width-layout-aside,300px)}";
+var css = ".dev-mode .slot-helper{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-d5a25402]{--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout, 1440px))/2);--x-size-margin-layout:max(var(--x-size-min-margin-layout,20px),var(--x-size-margin-max-width));align-content:stretch;display:grid;grid-template-columns:[page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];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];max-height:100%;min-height:100%}.x-layout__header[data-v-d5a25402]{background:var(--x-color-background-layout-header,transparent);border-color:var(--x-size-border-color-layout-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-header,0);grid-column:page;grid-row:header;max-height:var(--x-size-max-height-layout-header,auto);padding:0 var(--x-size-margin-layout);position:sticky;top:-.5px;z-index:2}.x-layout__sub-header[data-v-d5a25402]{background:var(--x-color-background-layout-sub-header,transparent);border-color:var(--x-size-border-color-layout-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-sub-header,0);grid-column:page;grid-row:sub-header;padding:0 var(--x-size-margin-layout)}.x-layout__toolbar[data-v-d5a25402]{grid-column:max-width;grid-row:toolbar}.x-layout__main[data-v-d5a25402]{grid-column:max-width;grid-row:main}.x-layout[data-v-d5a25402] .x-layout__aside.x-modal{flex-flow:row nowrap;z-index:3}.x-layout[data-v-d5a25402] .x-layout__aside--right.x-modal{justify-content:flex-end}.x-layout[data-v-d5a25402] .x-layout__aside{pointer-events:none}.x-layout[data-v-d5a25402] .x-layout__aside>:not(.slot-helper){pointer-events:all}.x-layout__scroll-to-top[data-v-d5a25402]{bottom:var(--x-size-margin-bottom-layout-scroll-to-top,16px);position:fixed;right:var(--x-size-margin-right-layout-scroll-to-top,16px);z-index:1}.x-layout__header-backdrop[data-v-d5a25402]{background-color:var(\n    --x-color-background-layout-header-backdrop,var(--x-color-base-neutral-100,#fff)\n  );grid-column:page;grid-row:page;height:var(--x-size-height-layout-backdrop,40vh);mask:linear-gradient(180deg,rgba(0,0,0,.8),transparent);opacity:0;pointer-events:none;position:sticky;top:-.5px;transition:opacity .2s ease-out;width:100%;z-index:1}.x-layout__header-backdrop--is-visible[data-v-d5a25402]{opacity:1}.x-layout[data-v-d5a25402] .x-layout__aside .x-modal__content{background-color:transparent;height:100%;width:var(--x-size-width-layout-aside,300px)}";
 injectCss(css);
 
 export { css, css as default };

package/js/components/layouts/multi-column-max-width-layout.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './multi-column-max-width-layout.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createCommentVNode, renderSlot, createBlock, withCtx, createVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode, createBlock, withCtx, createVNode } from 'vue';
 import './multi-column-max-width-layout.vue3.js';
 import './multi-column-max-width-layout.vue4.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
@@ -88,19 +88,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [
       createElementVNode("header", _hoisted_1, [
         _ctx.devMode || _ctx.$slots["header-start"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createCommentVNode(" @slot Slot that can be used to insert content into the left part of the header. "),
           renderSlot(_ctx.$slots, "header-start", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_3, "HEADER START")) : createCommentVNode("v-if", true)
           ], true)
         ])) : createCommentVNode("v-if", true),
         _ctx.devMode || _ctx.$slots["header-middle"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createCommentVNode(" @slot Slot that can be used to insert content into the center part of the header. "),
           renderSlot(_ctx.$slots, "header-middle", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_5, "HEADER MIDDLE")) : createCommentVNode("v-if", true)
           ], true)
         ])) : createCommentVNode("v-if", true),
         _ctx.devMode || _ctx.$slots["header-end"] ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          createCommentVNode(" @slot Slot that can be used to insert content into the right part of the header. "),
           renderSlot(_ctx.$slots, "header-end", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_7, "HEADER END")) : createCommentVNode("v-if", true)
           ], true)
@@ -108,7 +105,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_8, [
         createElementVNode("div", _hoisted_9, [
-          createCommentVNode(" @slot Slot that can be used to insert content into below the header. "),
           renderSlot(_ctx.$slots, "sub-header", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "SUB HEADER")) : createCommentVNode("v-if", true)
           ], true)
@@ -117,12 +113,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.devMode || _ctx.$slots["toolbar-aside"] || _ctx.$slots["toolbar-body"] ? (openBlock(), createElementBlock("section", _hoisted_11, [
         createElementVNode("aside", _hoisted_12, [
           renderSlot(_ctx.$slots, "toolbar-aside", {}, () => [
-            createCommentVNode(" @slot Slot that can be used to insert content above the left aside. "),
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_13, "TOOLBAR ASIDE")) : createCommentVNode("v-if", true)
           ], true)
         ]),
         createElementVNode("div", _hoisted_14, [
-          createCommentVNode(" @slot Slot that can be used to insert content above the body. "),
           renderSlot(_ctx.$slots, "toolbar-body", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_15, "TOOLBAR BODY")) : createCommentVNode("v-if", true)
           ], true)
@@ -131,7 +125,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("main", _hoisted_16, [
         _ctx.devMode || _ctx.$slots["main-aside"] ? (openBlock(), createBlock(_component_BaseIdTogglePanel, {
           key: 0,
-          panelId: "aside-panel",
+          "panel-id": "aside-panel",
           animation: _ctx.asideAnimation,
           class: "x-layout__collapse-aside"
         }, {
@@ -142,7 +136,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(() => [
                 createElementVNode("div", _hoisted_17, [
-                  createCommentVNode(" @slot Slot that can be used to insert content into the left side bar. "),
                   renderSlot(_ctx.$slots, "main-aside", {}, () => [
                     _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_18, "MAIN ASIDE")) : createCommentVNode("v-if", true)
                   ], true)
@@ -164,7 +157,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(() => [
                 createElementVNode("section", _hoisted_19, [
-                  createCommentVNode(" @slot Slot that can be used to insert the body content. "),
                   renderSlot(_ctx.$slots, "main-body", {}, () => [
                     _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_20, "MAIN BODY")) : createCommentVNode("v-if", true)
                   ], true)