npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.240 → 6.0.0-alpha.241 - Mend

@empathyco/x-components 6.0.0-alpha.240 → 6.0.0-alpha.241

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

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

@@ -1,151 +0,0 @@
-import _sfc_main from './fixed-header-and-asides-layout.vue2.js';
-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';
-const _hoisted_1 = {
-  key: "header",
-  class: "x-layout__header x-list x-list--horizontal"
-};
-const _hoisted_2 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_3 = {
-  key: "sub-header",
-  class: "x-layout__sub-header"
-};
-const _hoisted_4 = { class: "x-layout__sub-header-content" };
-const _hoisted_5 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_6 = {
-  key: "toolbar",
-  class: "x-layout__toolbar"
-};
-const _hoisted_7 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_8 = {
-  key: "main",
-  class: "x-layout__main x-list x-list--vertical"
-};
-const _hoisted_9 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_10 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_11 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_12 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_13 = {
-  key: "scroll-to-top",
-  class: "x-layout__scroll-to-top"
-};
-const _hoisted_14 = {
-  key: 0,
-  class: "slot-helper"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_BaseIdModal = resolveComponent("BaseIdModal");
-  const _component_Scroll = resolveComponent("Scroll");
-  const _component_MainScroll = resolveComponent("MainScroll");
-  return openBlock(), createBlock(_component_MainScroll, null, {
-    default: withCtx(() => [
-      createVNode(_component_Scroll, {
-        id: "main-scroll",
-        class: normalizeClass(["x-layout x-layout--fixed-header-and-asides", { "dev-mode": _ctx.devMode }]),
-        onScroll: _ctx.setPosition
-      }, {
-        default: withCtx(() => [
-          createElementVNode(
-            "div",
-            {
-              key: "header-backdrop",
-              class: normalizeClass(["x-layout__header-backdrop", { "x-layout__header-backdrop--is-visible": _ctx.isBackdropVisible }])
-            },
-            null,
-            2
-            /* CLASS */
-          ),
-          _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, [
-              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, [
-            renderSlot(_ctx.$slots, "toolbar", {}, () => [
-              _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, [
-            renderSlot(_ctx.$slots, "main", {}, () => [
-              _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_9, "MAIN")) : createCommentVNode("v-if", true)
-            ], true)
-          ])) : createCommentVNode("v-if", true),
-          _ctx.devMode || _ctx.$slots["left-aside"] ? (openBlock(), createBlock(_component_BaseIdModal, {
-            key: "left-aside",
-            animation: _ctx.leftAsideAnimation,
-            "modal-id": "left-aside",
-            class: "x-layout__aside x-layout__aside--left"
-          }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "left-aside", {}, () => [
-                _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "LEFT ASIDE")) : createCommentVNode("v-if", true)
-              ], true)
-            ]),
-            _: 3
-            /* FORWARDED */
-          }, 8, ["animation"])) : createCommentVNode("v-if", true),
-          _ctx.devMode || _ctx.$slots["right-aside"] ? (openBlock(), createBlock(_component_BaseIdModal, {
-            key: "right-aside",
-            animation: _ctx.rightAsideAnimation,
-            "modal-id": "right-aside",
-            class: "x-layout__aside x-layout__aside--right"
-          }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "right-aside", {}, () => [
-                _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_11, "RIGHT ASIDE")) : createCommentVNode("v-if", true)
-              ], true)
-            ]),
-            _: 3
-            /* FORWARDED */
-          }, 8, ["animation"])) : createCommentVNode("v-if", true),
-          renderSlot(_ctx.$slots, "extra-aside", {}, () => [
-            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_12, "EXTRA ASIDE")) : createCommentVNode("v-if", true)
-          ], true),
-          _ctx.devMode || _ctx.$slots["scroll-to-top"] ? (openBlock(), createElementBlock("div", _hoisted_13, [
-            renderSlot(_ctx.$slots, "scroll-to-top", {}, () => [
-              _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_14, "SCROLL TO TOP")) : createCommentVNode("v-if", true)
-            ], true)
-          ])) : createCommentVNode("v-if", true)
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["class", "onScroll"])
-    ]),
-    _: 3
-    /* FORWARDED */
-  });
-}
-var fixedHeaderAndAsidesLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d5a25402"]]);
-export { fixedHeaderAndAsidesLayout as default };
-//# sourceMappingURL=fixed-header-and-asides-layout.vue.js.map

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

@@ -1 +0,0 @@

- {"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 \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 \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 \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 \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 \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 \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, h, 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.vue'\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 = h(AnimateTranslate, { animationOrigin: 'right' })\n const leftAsideAnimation = h(AnimateTranslate, { animationOrigin: '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.dev-mode .slot-helper {\n font-family: inherit;\n color: grey;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n border: dashed 1px grey;\n border-radius: 10px;\n}\n\n.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 provides a multi-column 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 exposes the following `Design Tokens` for configuration:\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\n## Example\n\n```vue\n<template>\n <FixedHeaderAndAsidesLayout>\n <template #header>Header content</template>\n <template #sub-header>Sub-header content</template>\n <template #toolbar>Toolbar content</template>\n <template #main>Main content</template>\n <template #left-aside>Left aside content</template>\n <template #right-aside>Right aside content</template>\n <template #extra-aside>Extra aside content</template>\n <template #scroll-to-top>Scroll to top content</template>\n </FixedHeaderAndAsidesLayout>\n</template>\n\n<script setup>\nimport FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_createVNode","_normalizeClass","_createElementVNode","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode"],"mappings":"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"}

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

@@ -1,40 +0,0 @@
-import { defineComponent, ref, h, computed } from 'vue';
-import _sfc_main$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
-import Scroll from '../../x-modules/scroll/components/scroll.vue.js';
-import _sfc_main$2 from '../animations/animate-translate.vue.js';
-import '../animations/animate-translate.vue2.js';
-import BaseIdModal from '../modals/base-id-modal.vue.js';
-/**
- * Component for use as Layout to be filled with the rest of the components.
- *
- * @deprecated - The layout has been deprecated in favor of using new XDS layout.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'FixedHeaderAndAsidesLayout',
-    components: { BaseIdModal, MainScroll: _sfc_main$1, Scroll },
-    props: {
-        /** Enables the devMode, which shows the available slots to use with its names. */
-        devMode: Boolean,
-    },
-    setup() {
-        const scrollPosition = ref(0);
-        const rightAsideAnimation = h(_sfc_main$2, { animationOrigin: 'right' });
-        const leftAsideAnimation = h(_sfc_main$2, { animationOrigin: 'left' });
-        const setPosition = (position) => {
-            scrollPosition.value = position;
-        };
-        const isBackdropVisible = computed(() => scrollPosition.value > 0);
-        return {
-            rightAsideAnimation,
-            leftAsideAnimation,
-            setPosition,
-            isBackdropVisible,
-        };
-    },
-});
-export { _sfc_main as default };
-//# sourceMappingURL=fixed-header-and-asides-layout.vue2.js.map

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

@@ -1 +0,0 @@

- {"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 \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 \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 \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 \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 \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 \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, h, 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.vue'\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 = h(AnimateTranslate, { animationOrigin: 'right' })\n const leftAsideAnimation = h(AnimateTranslate, { animationOrigin: '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.dev-mode .slot-helper {\n font-family: inherit;\n color: grey;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n border: dashed 1px grey;\n border-radius: 10px;\n}\n\n.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 provides a multi-column 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 exposes the following `Design Tokens` for configuration:\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\n## Example\n\n```vue\n<template>\n <FixedHeaderAndAsidesLayout>\n <template #header>Header content</template>\n <template #sub-header>Sub-header content</template>\n <template #toolbar>Toolbar content</template>\n <template #main>Main content</template>\n <template #left-aside>Left aside content</template>\n <template #right-aside>Right aside content</template>\n <template #extra-aside>Extra aside content</template>\n <template #scroll-to-top>Scroll to top content</template>\n </FixedHeaderAndAsidesLayout>\n</template>\n\n<script setup>\nimport FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'\n</script>\n```\n</docs>\n"],"names":["MainScroll","AnimateTranslate"],"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;AAE5B,QAAA,MAAM,mBAAkB,GAAI,CAAC,CAACC,WAAgB,EAAE,EAAE,eAAe,EAAE,SAAS,CAAA;AAC5E,QAAA,MAAM,kBAAiB,GAAI,CAAC,CAACA,WAAgB,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAA;AAE1E,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAG;AACtC,YAAA,cAAc,CAAC,KAAI,GAAI,QAAO;AAChC,QAAA,CAAA;AACA,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAI,GAAI,CAAC,CAAA;QAEjE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAiB;SACnB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,7 +0,0 @@
-import injectCss from '../../../tools/inject-css.js';
-var css = ".dev-mode .slot-helper[data-v-d5a25402]{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 };
-//# sourceMappingURL=fixed-header-and-asides-layout.vue3.js.map

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

	@@ -1 +0,0 @@
1	- {"version":3,"file":"fixed-header-and-asides-layout.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,188 +0,0 @@
-import _sfc_main from './multi-column-max-width-layout.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, 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';
-const _hoisted_1 = { class: "x-layout__header" };
-const _hoisted_2 = {
-  key: 0,
-  class: "x-list x-layout__header-start"
-};
-const _hoisted_3 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_4 = {
-  key: 1,
-  class: "x-list x-layout__header-middle"
-};
-const _hoisted_5 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_6 = {
-  key: 2,
-  class: "x-list x-layout__header-end"
-};
-const _hoisted_7 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_8 = {
-  key: 0,
-  class: "x-layout__sub-header"
-};
-const _hoisted_9 = { class: "x-layout__sub-header-content" };
-const _hoisted_10 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_11 = {
-  key: 1,
-  class: "x-layout__toolbar"
-};
-const _hoisted_12 = { class: "x-list x-layout__toolbar-aside" };
-const _hoisted_13 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_14 = { class: "x-list x-layout__toolbar-body" };
-const _hoisted_15 = {
-  key: 0,
-  class: "slot-helper"
-};
-const _hoisted_16 = { class: "x-layout__main" };
-const _hoisted_17 = { class: "x-layout__main-aside x-list x-list--vertical" };
-const _hoisted_18 = {
-  key: 0,
-  class: "slot-helper",
-  style: { "height": "110vh" }
-};
-const _hoisted_19 = { class: "x-layout__main-body x-list x-list--vertical" };
-const _hoisted_20 = {
-  key: 0,
-  class: "slot-helper",
-  style: { "height": "110vh" }
-};
-const _hoisted_21 = {
-  key: 2,
-  class: "x-layout__scroll-to-top"
-};
-const _hoisted_22 = { class: "x-layout__scroll-to-top-content" };
-const _hoisted_23 = {
-  key: 0,
-  class: "slot-helper",
-  style: { "height": "50px" }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Scroll = resolveComponent("Scroll");
-  const _component_BaseIdTogglePanel = resolveComponent("BaseIdTogglePanel");
-  const _component_MainScroll = resolveComponent("MainScroll");
-  return openBlock(), createElementBlock(
-    "div",
-    {
-      class: normalizeClass(["x-layout x-layout--columns", { "dev-mode": _ctx.devMode }]),
-      style: normalizeStyle({ height: _ctx.devMode || _ctx.$slots["main-body"] ? "100%" : "auto" })
-    },
-    [
-      createElementVNode("header", _hoisted_1, [
-        _ctx.devMode || _ctx.$slots["header-start"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          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, [
-          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, [
-          renderSlot(_ctx.$slots, "header-end", {}, () => [
-            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_7, "HEADER END")) : createCommentVNode("v-if", true)
-          ], true)
-        ])) : createCommentVNode("v-if", true)
-      ]),
-      _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_8, [
-        createElementVNode("div", _hoisted_9, [
-          renderSlot(_ctx.$slots, "sub-header", {}, () => [
-            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "SUB HEADER")) : createCommentVNode("v-if", true)
-          ], true)
-        ])
-      ])) : createCommentVNode("v-if", true),
-      _ctx.devMode || _ctx.$slots["toolbar-aside"] || _ctx.$slots["toolbar-body"] ? (openBlock(), createElementBlock("section", _hoisted_11, [
-        createElementVNode("aside", _hoisted_12, [
-          renderSlot(_ctx.$slots, "toolbar-aside", {}, () => [
-            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_13, "TOOLBAR ASIDE")) : createCommentVNode("v-if", true)
-          ], true)
-        ]),
-        createElementVNode("div", _hoisted_14, [
-          renderSlot(_ctx.$slots, "toolbar-body", {}, () => [
-            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_15, "TOOLBAR BODY")) : createCommentVNode("v-if", true)
-          ], true)
-        ])
-      ])) : createCommentVNode("v-if", true),
-      createElementVNode("main", _hoisted_16, [
-        _ctx.devMode || _ctx.$slots["main-aside"] ? (openBlock(), createBlock(_component_BaseIdTogglePanel, {
-          key: 0,
-          "panel-id": "aside-panel",
-          animation: _ctx.asideAnimation,
-          class: "x-layout__collapse-aside"
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_Scroll, {
-              id: "aside-scroll",
-              class: "x-layout__aside-scroll"
-            }, {
-              default: withCtx(() => [
-                createElementVNode("div", _hoisted_17, [
-                  renderSlot(_ctx.$slots, "main-aside", {}, () => [
-                    _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_18, "MAIN ASIDE")) : createCommentVNode("v-if", true)
-                  ], true)
-                ])
-              ]),
-              _: 3
-              /* FORWARDED */
-            })
-          ]),
-          _: 3
-          /* FORWARDED */
-        }, 8, ["animation"])) : createCommentVNode("v-if", true),
-        createVNode(_component_MainScroll, { class: "x-flex x-flex-auto" }, {
-          default: withCtx(() => [
-            _ctx.devMode || _ctx.$slots["main-body"] ? (openBlock(), createBlock(_component_Scroll, {
-              key: 0,
-              id: "main-scroll",
-              class: "x-layout__body-scroll"
-            }, {
-              default: withCtx(() => [
-                createElementVNode("section", _hoisted_19, [
-                  renderSlot(_ctx.$slots, "main-body", {}, () => [
-                    _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_20, "MAIN BODY")) : createCommentVNode("v-if", true)
-                  ], true)
-                ])
-              ]),
-              _: 3
-              /* FORWARDED */
-            })) : createCommentVNode("v-if", true)
-          ]),
-          _: 3
-          /* FORWARDED */
-        })
-      ]),
-      _ctx.devMode || _ctx.$slots["scroll-to-top"] ? (openBlock(), createElementBlock("div", _hoisted_21, [
-        createElementVNode("div", _hoisted_22, [
-          renderSlot(_ctx.$slots, "scroll-to-top", {}, () => [
-            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_23, "SCROLL TO TOP")) : createCommentVNode("v-if", true)
-          ], true)
-        ])
-      ])) : createCommentVNode("v-if", true)
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-var multiColumnMaxWidthLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5319aaa7"]]);
-export { multiColumnMaxWidthLayout as default };
-//# sourceMappingURL=multi-column-max-width-layout.vue.js.map

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

@@ -1 +0,0 @@

- {"version":3,"file":"multi-column-max-width-layout.vue.js","sources":["../../../../src/components/layouts/multi-column-max-width-layout.vue"],"sourcesContent":["<template>\n <div\n class=\"x-layout x-layout--columns\"\n :class=\"{ 'dev-mode': devMode }\"\n :style=\"{ height: devMode || $slots['main-body'] ? '100%' : 'auto' }\"\n >\n <header class=\"x-layout__header\">\n <div v-if=\"devMode || $slots['header-start']\" class=\"x-list x-layout__header-start\">\n \n <slot name=\"header-start\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER START</span>\n </slot>\n </div>\n\n <div v-if=\"devMode || $slots['header-middle']\" class=\"x-list x-layout__header-middle\">\n \n <slot name=\"header-middle\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER MIDDLE</span>\n </slot>\n </div>\n\n <div v-if=\"devMode || $slots['header-end']\" class=\"x-list x-layout__header-end\">\n \n <slot name=\"header-end\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER END</span>\n </slot>\n </div>\n </header>\n\n <div v-if=\"devMode || $slots['sub-header']\" class=\"x-layout__sub-header\">\n <div class=\"x-layout__sub-header-content\">\n \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\n v-if=\"devMode || $slots['toolbar-aside'] || $slots['toolbar-body']\"\n class=\"x-layout__toolbar\"\n >\n <aside class=\"x-list x-layout__toolbar-aside\">\n <slot name=\"toolbar-aside\">\n \n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR ASIDE</span>\n </slot>\n </aside>\n\n <div class=\"x-list x-layout__toolbar-body\">\n \n <slot name=\"toolbar-body\">\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR BODY</span>\n </slot>\n </div>\n </section>\n\n <main class=\"x-layout__main\">\n <BaseIdTogglePanel\n v-if=\"devMode || $slots['main-aside']\"\n panel-id=\"aside-panel\"\n :animation=\"asideAnimation\"\n class=\"x-layout__collapse-aside\"\n >\n <Scroll id=\"aside-scroll\" class=\"x-layout__aside-scroll\">\n <div class=\"x-layout__main-aside x-list x-list--vertical\">\n \n <slot name=\"main-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN ASIDE</span>\n </slot>\n </div>\n </Scroll>\n </BaseIdTogglePanel>\n\n <MainScroll class=\"x-flex x-flex-auto\">\n <Scroll\n v-if=\"devMode || $slots['main-body']\"\n id=\"main-scroll\"\n class=\"x-layout__body-scroll\"\n >\n <section class=\"x-layout__main-body x-list x-list--vertical\">\n \n <slot name=\"main-body\">\n <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN BODY</span>\n </slot>\n </section>\n </Scroll>\n </MainScroll>\n </main>\n\n <div v-if=\"devMode || $slots['scroll-to-top']\" class=\"x-layout__scroll-to-top\">\n <div class=\"x-layout__scroll-to-top-content\">\n <slot name=\"scroll-to-top\">\n <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 50px\">SCROLL TO TOP</span>\n </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport AnimateWidth from '../animations/animate-width.vue'\nimport BaseIdTogglePanel from '../panels/base-id-toggle-panel.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: 'MultiColumnMaxWidthLayout',\n components: { BaseIdTogglePanel, MainScroll, Scroll },\n props: {\n /** The animation used for the Main Aside. */\n asideAnimation: {\n type: AnimationProp,\n default: () => AnimateWidth,\n },\n /** Enables the devMode, which shows the available slots to use with its names. */\n devMode: Boolean,\n },\n})\n</script>\n\n<style lang=\"css\">\n:root {\n /* layout */\n --x-size-min-margin-layout-columns: var(--x-size-base-06);\n --x-size-column-gap-layout-columns: var(--x-size-base-06);\n\n /* spacing */\n\n /* size - header */\n --x-size-padding-top-layout-columns-header: var(--x-size-base-07);\n --x-size-padding-bottom-layout-columns-header: var(--x-size-base-05);\n\n /* size - toolbar */\n --x-size-padding-top-layout-columns-toolbar: var(--x-size-base-05);\n --x-size-padding-bottom-layout-columns-toolbar: var(--x-size-base-03);\n\n /* size- scroll-to-top */\n --x-size-margin-bottom-layout-columns-scroll-to-top: var(--x-size-base-03);\n --x-size-margin-left-layout-columns-scroll-to-top: var(--x-size-base-03);\n\n /* color */\n --x-color-background-layout-columns: var(--x-color-base-neutral-100);\n --x-color-border-layout-columns: var(--x-color-base-neutral-70);\n --x-color-border-layout-columns-header: var(--x-color-border-layout-columns);\n --x-color-border-layout-columns-sub-header: var(--x-color-border-layout-columns);\n --x-color-border-layout-columns-toolbar: var(--x-color-border-layout-columns);\n --x-color-border-layout-columns-main: var(--x-color-border-layout-columns);\n --x-color-border-layout-columns-main-aside: var(--x-color-border-layout-columns);\n --x-color-border-layout-columns-main-body: var(--x-color-border-layout-columns);\n\n /* border */\n --x-size-border-width-layout-columns-header: 0;\n --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n}\n</style>\n\n<style lang=\"css\" scoped>\n.dev-mode .slot-helper {\n font-family: inherit;\n color: grey;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n border: dashed 1px grey;\n border-radius: 10px;\n}\n\n.x-layout {\n /* custom properties */\n --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n --x-size-margin-layout-columns: max(\n var(--x-size-min-margin-layout-columns, 20px),\n var(--x-size-margin-max-width)\n );\n --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n\n /* layout */\n display: grid;\n align-content: stretch;\n max-height: 100%;\n\n grid-template-columns:\n [page-start]\n 1fr\n [scroll-to-top-start]\n calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default))\n [scroll-to-top-end page-end];\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 [scroll-to-top-start]\n auto\n [main-end scroll-to-top-end page-end];\n}\n\n.x-layout__header {\n /* layout */\n grid-column: page;\n grid-row: header;\n display: grid;\n column-gap: var(--x-size-gap-default);\n\n grid-template-columns:\n [header-start]\n var(--x-size-margin-layout-columns)\n [start-content-start]\n 1fr\n [start-content-end middle-content-start]\n repeat(var(--x-number-columns-header-middle), 1fr)\n [middle-content-end end-content-start]\n 1fr\n [end-content-end]\n var(--x-size-margin-layout-columns)\n [header-end];\n\n /* size */\n padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);\n padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);\n margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);\n margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);\n\n /* color */\n background-color: var(--x-color-background-layout-columns-header, transparent);\n border-color: var(--x-color-border-layout-columns-header, transparent);\n\n /* border */\n border-style: solid;\n border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n\n.x-layout__header-start {\n /* layout */\n grid-column: start-content;\n}\n.x-layout__header-start.x-list {\n /* space */\n flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n align-items: var(--x-size-align-layout-columns-header-start, flex start);\n}\n\n.x-layout__header-middle {\n /* layout */\n grid-column: middle-content;\n}\n.x-layout__header-middle.x-list {\n /* space */\n flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n}\n\n.x-layout__header-end {\n /* layout */\n grid-column: end-content;\n}\n.x-layout__header-end.x-list {\n flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n}\n\n.x-layout__sub-header {\n /* layout */\n grid-column: page;\n grid-row: sub-header;\n display: grid;\n column-gap: var(--x-size-gap-default);\n\n grid-template-columns:\n [sub-header-start]\n var(--x-size-margin-layout-columns)\n 1fr\n [sub-header-content-start]\n repeat(var(--x-number-columns-sub-header-content), 1fr)\n [sub-header-content-end]\n 1fr\n var(--x-size-margin-layout-columns)\n [sub-header-end];\n\n /* size */\n padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);\n padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);\n margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n\n /* color */\n background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n\n /* border */\n border-style: solid;\n border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n\n.x-layout__sub-header-content {\n /* layout */\n grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list {\n flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n}\n\n.x-layout__toolbar {\n /* layout */\n grid-column: page;\n grid-row: toolbar;\n display: grid;\n column-gap: var(--x-size-gap-default);\n\n grid-template-columns:\n [toolbar-start]\n var(--x-size-margin-layout-columns)\n [toolbar-aside-start]\n 1fr\n [toolbar-aside-end toolbar-body-start]\n repeat(var(--x-number-columns-toolbar-body), 1fr)\n [toolbar-body-end]\n var(--x-size-margin-layout-columns)\n [toolbar-end];\n\n /* size */\n padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);\n padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);\n margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n\n /* color */\n background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n\n /* border */\n border-style: solid;\n border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n\n.x-layout__toolbar-aside {\n /* layout */\n grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list {\n flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n}\n\n.x-layout__toolbar-body {\n /* layout */\n grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list {\n flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n}\n\n.x-layout__main {\n /* layout */\n grid-column: page;\n grid-row: main;\n min-height: 0;\n display: flex;\n flex-flow: row nowrap;\n justify-content: stretch;\n padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n\n /* size */\n padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);\n padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);\n margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);\n margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);\n\n /* color */\n background-color: var(--x-color-background-layout-columns-main, transparent);\n border-color: var(--x-color-border-layout-columns-main, transparent);\n\n /* border */\n border-style: solid;\n border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n\n.x-layout__collapse-aside {\n width: calc(\n (\n 100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -\n var(--x-size-margin-layout-columns)\n ) /\n var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)\n );\n}\n\n.x-layout__aside-scroll {\n height: 100%;\n margin-right: var(--x-size-gap-default);\n}\n\n.x-layout__body-scroll {\n flex: 1 1 auto;\n width: 0;\n padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n}\n.x-layout__body-scroll.x-scroll {\n overflow-y: scroll;\n}\n\n.x-layout__main-body {\n overflow-x: hidden;\n}\n\n.x-layout__scroll-to-top {\n /* layout */\n grid-area: scroll-to-top;\n justify-content: flex-end;\n width: 100%;\n display: flex;\n z-index: 1;\n pointer-events: none;\n}\n.x-layout__scroll-to-top-content {\n flex: 1 0 auto;\n padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content > * {\n pointer-events: all;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component provides a multi-column layout with fixed headers and collapsible fixed asides:\n\n| header-start | header-middle | header-end |\n| :-----------: | :-----------: | :-----------: |\n| sub-header | | |\n| toolbar-aside | toolbar | |\n| main-aside | main | |\n| | | scroll-to-top |\n\n## Design Tokens\n\nThe component exposes the following `Design Tokens` for configuration:\n\n| token | default value |\n| :-------------------------------------------------: | :-----------: |\n| --x-size-column-gap-layout-columns | 20px |\n| --x-size-padding-top-layout-columns-header | 0px |\n| --x-size-padding-bottom-layout-columns-header | 0px |\n| --x-size-margin-top-layout-columns-header | 0px |\n| --x-size-margin-bottom-layout-columns-header | 0px |\n| --x-color-background-layout-columns-header | transparent |\n| --x-color-border-layout-columns-header | transparent |\n| --x-size-border-width-layout-columns-header | 0px |\n| --x-flow-layout-columns-header-start | row nowrap |\n| --x-size-justify-layout-columns-header-start | flex-start |\n| --x-size-align-layout-columns-header-start | flex-start |\n| --x-flow-layout-columns-header-middle | row nowrap |\n| --x-size-justify-layout-columns-header-middle | center |\n| --x-size-align-layout-columns-header-middle | flex-start |\n| --x-flow-layout-columns-header-end | row nowrap |\n| --x-size-justify-layout-columns-header-end | flex-end |\n| --x-size-align-layout-columns-header-end | flex-end |\n| --x-size-padding-top-layout-columns-sub-header | 0px |\n| --x-size-padding-bottom-layout-columns-sub-header | 0px |\n| --x-size-margin-top-layout-columns-sub-header | 0px |\n| --x-size-margin-bottom-layout-columns-sub-header | 0px |\n| --x-color-background-layout-columns-sub-header | transparent |\n| --x-color-border-layout-columns-sub-header | transparent |\n| --x-size-border-width-layout-columns-sub-header | 0px |\n| --x-flow-layout-columns-sub-header | row nowrap |\n| --x-size-justify-layout-columns-sub-header | flex-start |\n| --x-size-align-layout-columns-sub-header | flex-start |\n| --x-size-padding-top-layout-columns-toolbar | 0px |\n| --x-size-padding-bottom-layout-columns-toolbar | 0px |\n| --x-size-margin-top-layout-columns-toolbar | 0px |\n| --x-size-margin-bottom-layout-columns-toolbar | 0px |\n| --x-color-background-layout-columns-toolbar | transparent |\n| --x-color-border-layout-columns-sub-toolbar | transparent |\n| --x-size-border-width-layout-columns-toolbar | 0px |\n| --x-flow-layout-columns-toolbar-aside | row nowrap |\n| --x-size-justify-layout-columns-toolbar-aside | flex-start |\n| --x-size-align-layout-columns-toolbar-aside | center |\n| --x-flow-layout-columns-toolbar-body | row nowrap |\n| --x-size-justify-layout-columns-toolbar-body | flex-start |\n| --x-size-align-layout-columns-toolbar-body | center |\n| --x-size-padding-top-layout-columns-main | 0px |\n| --x-size-padding-bottom-layout-columns-main | 0px |\n| --x-size-margin-top-layout-columns-main | 0px |\n| --x-size-margin-bottom-layout-columns-main | 0px |\n| --x-color-background-layout-columns-main | transparent |\n| --x-color-border-layout-columns-sub-main | transparent |\n| --x-size-border-width-layout-columns-main | 0px |\n| --x-color-background-layout-columns-main-aside | transparent |\n| --x-color-border-layout-columns-sub-main-aside | transparent |\n| --x-size-border-width-layout-columns-main-aside | 0px |\n| --x-color-background-layout-columns-main-body | transparent |\n| --x-color-border-layout-columns-sub-main-body | transparent |\n| --x-size-border-width-layout-columns-main-body | 0px |\n| --x-size-margin-bottom-layout-columns-scroll-to-top | 10px |\n| --x-size-margin-left-layout-columns-scroll-to-top | 10px |\n\n| token | use |\n| :-------------------------------------------------: | :--------------------------------------: |\n| --x-size-column-gap-layout-columns | The gap between columns |\n| --x-size-padding-top-layout-columns-header | The padding top of the header |\n| --x-size-padding-bottom-layout-columns-header | The padding bottom of the header |\n| --x-size-margin-top-layout-columns-header | The margin top of the header |\n| --x-size-margin-bottom-layout-columns-header | The margin bottom of the header |\n| --x-color-background-layout-columns-header | The background color of the header |\n| --x-color-border-layout-columns-header | The border color of the header |\n| --x-size-border-width-layout-columns-header | The border width of the header |\n| --x-flow-layout-columns-header-start | The flex flow of the start header |\n| --x-size-justify-layout-columns-header-start | The justify content of the start header |\n| --x-size-align-layout-columns-header-start | The align items of the start header |\n| --x-flow-layout-columns-header-middle | The flex flow of the middle header |\n| --x-size-justify-layout-columns-header-middle | The justify content of the middle header |\n| --x-size-align-layout-columns-header-middle | The align items of the middle header |\n| --x-flow-layout-columns-header-end | The flex flow of the end header |\n| --x-size-justify-layout-columns-header-end | The justify content of the end header |\n| --x-size-align-layout-columns-header-end | The align items of the end header |\n| --x-size-padding-top-layout-columns-sub-header | The padding bottom of the sub header |\n| --x-size-padding-bottom-layout-columns-sub-header | The padding top of the sub header |\n| --x-size-margin-top-layout-columns-sub-header | The margin bottom of the sub header |\n| --x-size-margin-bottom-layout-columns-sub-header | The margin top of the sub header |\n| --x-color-background-layout-columns-sub-header | The background color of the sub header |\n| --x-color-border-layout-columns-sub-header | The border color of the sub header |\n| --x-size-border-width-layout-columns-sub-header | The border width of the sub header |\n| --x-flow-layout-columns-sub-header | The flex flow of the sub header |\n| --x-size-justify-layout-columns-sub-header | The justify content of the sub header |\n| --x-size-align-layout-columns-sub-header | The align items of the sub header |\n| --x-size-padding-top-layout-columns-toolbar | The padding top of the toolbar |\n| --x-size-padding-bottom-layout-columns-toolbar | The padding bottom of the toolbar |\n| --x-size-margin-top-layout-columns-toolbar | The margin top of the toolbar |\n| --x-size-margin-bottom-layout-columns-toolbar | The margin bottom of the toolbar |\n| --x-color-background-layout-columns-toolbar | The background color of the toolbar |\n| --x-color-border-layout-columns-sub-toolbar | The border color of the toolbar |\n| --x-size-border-width-layout-columns-toolbar | The border width of the toolbar |\n| --x-flow-layout-columns-toolbar-aside | The flex flow of the toolbar aside |\n| --x-size-justify-layout-columns-toolbar-aside | The justify content of the toolbar aside |\n| --x-size-align-layout-columns-toolbar-aside | The align items of the toolbar aside |\n| --x-flow-layout-columns-toolbar-body | The flex flow of the end toolbar body |\n| --x-size-justify-layout-columns-toolbar-body | Justify content of the end toolbar body |\n| --x-size-align-layout-columns-toolbar-body | The align items of the toolbar body |\n| --x-size-padding-top-layout-columns-main | The padding top of the main |\n| --x-size-padding-bottom-layout-columns-main | The padding bottom of the main |\n| --x-size-margin-top-layout-columns-main | The margin top of the main |\n| --x-size-margin-bottom-layout-columns-main | The margin bottom of the main |\n| --x-color-background-layout-columns-main | The background color of the main |\n| --x-color-border-layout-columns-main | The border color of the main |\n| --x-size-border-width-layout-columns-main | The border width of the main |\n| --x-color-background-layout-columns-main-aside | The background color of the main aside |\n| --x-color-border-layout-columns-main-aside | The border color of the main aside |\n| --x-size-border-width-layout-columns-main-aside | The border width of the sub main aside |\n| --x-color-background-layout-columns-main-body | The background color of the main body |\n| --x-color-border-layout-columns-main-body | The border color of the main body |\n| --x-size-border-width-layout-columns-main-body | The border width of the sub main body |\n| --x-size-margin-bottom-layout-columns-scroll-to-top | The margin bottom of the scroll to top |\n| --x-size-margin-left-layout-columns-scroll-to-top | The margin left of the scroll to top |\n\n## Example\n\n```vue\n<template>\n <MultiColumnMaxWidthLayout>\n <template #header>Header content</template>\n <template #sub-header>Sub-header content</template>\n <template #toolbar>Toolbar content</template>\n <template #main>Main content</template>\n <template #left-aside>Left aside content</template>\n <template #right-aside>Right aside content</template>\n <template #extra-aside>Extra aside content</template>\n </MultiColumnMaxWidthLayout>\n</template>\n\n<script setup>\nimport MultiColumnMaxWidthLayout from '@empathyco/x-components/js/components/layouts/multi-column-max-width-layout.vue'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_renderSlot","_createCommentVNode","_createBlock","_createVNode","_withCtx"],"mappings":"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"}

package/js/components/layouts/multi-column-max-width-layout.vue2.js DELETED Viewed

@@ -1,30 +0,0 @@
-import { defineComponent } from 'vue';
-import { AnimationProp } from '../../types/animation-prop.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 AnimateWidth from '../animations/animate-width.vue.js';
-import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue.js';
-/**
- * Component for use as Layout to be filled with the rest of the Components.
- *
- * @deprecated - The layout has been deprecated in favor of using new XDS layout.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'MultiColumnMaxWidthLayout',
-    components: { BaseIdTogglePanel, MainScroll: _sfc_main$1, Scroll },
-    props: {
-        /** The animation used for the Main Aside. */
-        asideAnimation: {
-            type: AnimationProp,
-            default: () => AnimateWidth,
-        },
-        /** Enables the devMode, which shows the available slots to use with its names. */
-        devMode: Boolean,
-    },
-});
-export { _sfc_main as default };
-//# sourceMappingURL=multi-column-max-width-layout.vue2.js.map