npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.222 → 6.0.0-alpha.224 - Mend

@empathyco/x-components 6.0.0-alpha.222 → 6.0.0-alpha.224

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 (1969) hide show

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

	@@ -1 +1 @@
1	- {"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 <!-- @slot Slot that can be used to insert content into the left part of the header. -->\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 <!-- @slot Slot that can be used to insert content into the center part of the header. -->\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 <!-- @slot Slot that can be used to insert content into the right part of the header. -->\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 <!-- @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\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 <!-- @slot Slot that can be used to insert content above the left aside. -->\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 <!-- @slot Slot that can be used to insert content above the body. -->\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 <!-- @slot Slot that can be used to insert content into the left side bar. -->\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 <!-- @slot Slot that can be used to insert the body content. -->\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@import url('../../styles/dev-mode.css');\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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"}
1	+ {"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 <!-- @slot Slot that can be used to insert content into the left part of the header. -->\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 <!-- @slot Slot that can be used to insert content into the center part of the header. -->\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 <!-- @slot Slot that can be used to insert content into the right part of the header. -->\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 <!-- @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\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 <!-- @slot Slot that can be used to insert content above the left aside. -->\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 <!-- @slot Slot that can be used to insert content above the body. -->\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 <!-- @slot Slot that can be used to insert content into the left side bar. -->\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 <!-- @slot Slot that can be used to insert the body content. -->\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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"multi-column-max-width-layout.vue2.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 <!-- @slot Slot that can be used to insert content into the left part of the header. -->\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 <!-- @slot Slot that can be used to insert content into the center part of the header. -->\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 <!-- @slot Slot that can be used to insert content into the right part of the header. -->\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 <!-- @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\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 <!-- @slot Slot that can be used to insert content above the left aside. -->\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 <!-- @slot Slot that can be used to insert content above the body. -->\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 <!-- @slot Slot that can be used to insert content into the left side bar. -->\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 <!-- @slot Slot that can be used to insert the body content. -->\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@import url('../../styles/dev-mode.css');\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":["MainScroll"],"mappings":";;;;;;;AA4GA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,2BAA2B;AACjC,IAAA,UAAU,EAAE,EAAE,iBAAiB,cAAEA,WAAU,EAAE,MAAK,EAAG;AACrD,IAAA,KAAK,EAAE;;AAEL,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAM,YAAY;AAC5B,SAAA;;AAED,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"multi-column-max-width-layout.vue2.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 <!-- @slot Slot that can be used to insert content into the left part of the header. -->\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 <!-- @slot Slot that can be used to insert content into the center part of the header. -->\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 <!-- @slot Slot that can be used to insert content into the right part of the header. -->\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 <!-- @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\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 <!-- @slot Slot that can be used to insert content above the left aside. -->\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 <!-- @slot Slot that can be used to insert content above the body. -->\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 <!-- @slot Slot that can be used to insert content into the left side bar. -->\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 <!-- @slot Slot that can be used to insert the body content. -->\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":["MainScroll"],"mappings":";;;;;;;AA4GA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,2BAA2B;AACjC,IAAA,UAAU,EAAE,EAAE,iBAAiB,cAAEA,WAAU,EAAE,MAAK,EAAG;AACrD,IAAA,KAAK,EAAE;;AAEL,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAM,YAAY;AAC5B,SAAA;;AAED,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA,CAAA;;;;"}

package/js/components/layouts/multi-column-max-width-layout.vue4.js CHANGED Viewed

@@ -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-5319aaa7]{--x-size-gap-default:var(--x-size-column-gap-layout-columns,20px);--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout-columns, 1440px))/2);--x-size-margin-layout-columns:max(var(--x-size-min-margin-layout-columns,20px),var(--x-size-margin-max-width));--x-number-columns-header-middle:calc(var(--x-number-columns-layout-columns, 5) - 2);--x-number-columns-sub-header-content:var(--x-number-columns-header-middle);--x-number-columns-toolbar-body:calc(var(--x-number-columns-layout-columns, 5) - 1);align-content:stretch;display:grid;grid-template-columns:[page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end 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 [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];max-height:100%}.x-layout__header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-header,transparent);border-color:var(--x-color-border-layout-columns-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:header;grid-template-columns:[header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle),1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-header,0);margin-top:var(--x-size-margin-top-layout-columns-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-header,0);padding-top:var(--x-size-padding-top-layout-columns-header,0)}.x-layout__header-start[data-v-5319aaa7]{grid-column:start-content}.x-layout__header-start.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-start,flex start);flex-flow:var(--x-flow-layout-columns-header-start,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-start,flex start)}.x-layout__header-middle[data-v-5319aaa7]{grid-column:middle-content}.x-layout__header-middle.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-middle,flex start);flex-flow:var(--x-flow-layout-columns-header-middle,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-middle,center)}.x-layout__header-end[data-v-5319aaa7]{grid-column:end-content}.x-layout__header-end.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-end,flex-start);flex-flow:var(--x-flow-layout-columns-header-end,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-end,flex-end)}.x-layout__sub-header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-sub-header,transparent);border-color:var(--x-color-border-layout-columns-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-sub-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:sub-header;grid-template-columns:[sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content),1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-sub-header,0);margin-top:var(--x-size-margin-top-layout-columns-sub-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-sub-header),0;padding-top:var(--x-size-padding-top-layout-columns-sub-header,0)}.x-layout__sub-header-content[data-v-5319aaa7]{grid-column:sub-header-content}.x-layout__sub-header-content.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-sub-header,flex-start);flex-flow:var(--x-flow-layout-columns-sub-header,row nowrap);justify-content:var(--x-size-justify-layout-columns-sub-header,flex-start)}.x-layout__toolbar[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-toolbar,transparent);border-color:var(--x-color-border-layout-columns-toolbar,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-toolbar,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:toolbar;grid-template-columns:[toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body),1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-toolbar,0);margin-top:var(--x-size-margin-top-layout-columns-toolbar,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-toolbar,0);padding-top:var(--x-size-padding-top-layout-columns-toolbar,0)}.x-layout__toolbar-aside[data-v-5319aaa7]{grid-column:toolbar-aside}.x-layout__toolbar-aside.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-aside,center);flex-flow:var(--x-flow-layout-columns-toolbar-aside,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-aside,flex-start)}.x-layout__toolbar-body[data-v-5319aaa7]{grid-column:toolbar-body}.x-layout__toolbar-body.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-body,center);flex-flow:var(--x-flow-layout-columns-toolbar-body,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-body,flex-end)}.x-layout__main[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-main,transparent);border-color:var(--x-color-border-layout-columns-main,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-main,0);display:flex;flex-flow:row nowrap;grid-column:page;grid-row:main;justify-content:stretch;margin-bottom:var(--x-size-margin-bottom-layout-columns-main,0);margin-top:var(--x-size-margin-top-layout-columns-main,0);min-height:0;padding-bottom:var(--x-size-padding-bottom-layout-columns-main,0);padding-left:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));padding-top:var(--x-size-padding-top-layout-columns-main,0)}.x-layout__collapse-aside[data-v-5319aaa7]{width:calc((100% - var(--x-size-gap-default)*(var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns))/var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default))}.x-layout__aside-scroll[data-v-5319aaa7]{height:100%;margin-right:var(--x-size-gap-default)}.x-layout__body-scroll[data-v-5319aaa7]{flex:1 1 auto;padding-right:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);width:0}.x-layout__body-scroll.x-scroll[data-v-5319aaa7]{overflow-y:scroll}.x-layout__main-body[data-v-5319aaa7]{overflow-x:hidden}.x-layout__scroll-to-top[data-v-5319aaa7]{display:flex;grid-area:scroll-to-top;justify-content:flex-end;pointer-events:none;width:100%;z-index:1}[dir=ltr] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-left:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}[dir=rtl] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-right:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]{flex:1 0 auto;padding-bottom:var(--x-size-margin-bottom-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]>*{pointer-events:all}";
+var css = ".dev-mode .slot-helper[data-v-5319aaa7]{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-5319aaa7]{--x-size-gap-default:var(--x-size-column-gap-layout-columns,20px);--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout-columns, 1440px))/2);--x-size-margin-layout-columns:max(var(--x-size-min-margin-layout-columns,20px),var(--x-size-margin-max-width));--x-number-columns-header-middle:calc(var(--x-number-columns-layout-columns, 5) - 2);--x-number-columns-sub-header-content:var(--x-number-columns-header-middle);--x-number-columns-toolbar-body:calc(var(--x-number-columns-layout-columns, 5) - 1);align-content:stretch;display:grid;grid-template-columns:[page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end 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 [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];max-height:100%}.x-layout__header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-header,transparent);border-color:var(--x-color-border-layout-columns-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:header;grid-template-columns:[header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle),1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-header,0);margin-top:var(--x-size-margin-top-layout-columns-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-header,0);padding-top:var(--x-size-padding-top-layout-columns-header,0)}.x-layout__header-start[data-v-5319aaa7]{grid-column:start-content}.x-layout__header-start.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-start,flex start);flex-flow:var(--x-flow-layout-columns-header-start,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-start,flex start)}.x-layout__header-middle[data-v-5319aaa7]{grid-column:middle-content}.x-layout__header-middle.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-middle,flex start);flex-flow:var(--x-flow-layout-columns-header-middle,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-middle,center)}.x-layout__header-end[data-v-5319aaa7]{grid-column:end-content}.x-layout__header-end.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-end,flex-start);flex-flow:var(--x-flow-layout-columns-header-end,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-end,flex-end)}.x-layout__sub-header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-sub-header,transparent);border-color:var(--x-color-border-layout-columns-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-sub-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:sub-header;grid-template-columns:[sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content),1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-sub-header,0);margin-top:var(--x-size-margin-top-layout-columns-sub-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-sub-header),0;padding-top:var(--x-size-padding-top-layout-columns-sub-header,0)}.x-layout__sub-header-content[data-v-5319aaa7]{grid-column:sub-header-content}.x-layout__sub-header-content.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-sub-header,flex-start);flex-flow:var(--x-flow-layout-columns-sub-header,row nowrap);justify-content:var(--x-size-justify-layout-columns-sub-header,flex-start)}.x-layout__toolbar[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-toolbar,transparent);border-color:var(--x-color-border-layout-columns-toolbar,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-toolbar,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:toolbar;grid-template-columns:[toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body),1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-toolbar,0);margin-top:var(--x-size-margin-top-layout-columns-toolbar,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-toolbar,0);padding-top:var(--x-size-padding-top-layout-columns-toolbar,0)}.x-layout__toolbar-aside[data-v-5319aaa7]{grid-column:toolbar-aside}.x-layout__toolbar-aside.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-aside,center);flex-flow:var(--x-flow-layout-columns-toolbar-aside,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-aside,flex-start)}.x-layout__toolbar-body[data-v-5319aaa7]{grid-column:toolbar-body}.x-layout__toolbar-body.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-body,center);flex-flow:var(--x-flow-layout-columns-toolbar-body,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-body,flex-end)}.x-layout__main[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-main,transparent);border-color:var(--x-color-border-layout-columns-main,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-main,0);display:flex;flex-flow:row nowrap;grid-column:page;grid-row:main;justify-content:stretch;margin-bottom:var(--x-size-margin-bottom-layout-columns-main,0);margin-top:var(--x-size-margin-top-layout-columns-main,0);min-height:0;padding-bottom:var(--x-size-padding-bottom-layout-columns-main,0);padding-left:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));padding-top:var(--x-size-padding-top-layout-columns-main,0)}.x-layout__collapse-aside[data-v-5319aaa7]{width:calc((100% - var(--x-size-gap-default)*(var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns))/var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default))}.x-layout__aside-scroll[data-v-5319aaa7]{height:100%;margin-right:var(--x-size-gap-default)}.x-layout__body-scroll[data-v-5319aaa7]{flex:1 1 auto;padding-right:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);width:0}.x-layout__body-scroll.x-scroll[data-v-5319aaa7]{overflow-y:scroll}.x-layout__main-body[data-v-5319aaa7]{overflow-x:hidden}.x-layout__scroll-to-top[data-v-5319aaa7]{display:flex;grid-area:scroll-to-top;justify-content:flex-end;pointer-events:none;width:100%;z-index:1}[dir=ltr] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-left:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}[dir=rtl] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-right:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]{flex:1 0 auto;padding-bottom:var(--x-size-margin-bottom-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]>*{pointer-events:all}";
 injectCss(css);
 export { css };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n <header v-if=\"devMode \|\| $slots.header\" class=\"x-layout__header x-list x-list--horizontal\">\n <!-- @slot Slot that is used to insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div\n v-if=\"devMode \|\| $slots['sub-header']\"\n class=\"x-layout__sub-header x-list x-list--horizontal\"\n >\n <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n\n <div v-if=\"devMode \|\| $slots.toolbar\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n <slot name=\"toolbar\">\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </div>\n\n <div v-if=\"devMode \|\| $slots.predictive\" class=\"x-layout__predictive x-list x-list--vertical\">\n <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n <slot name=\"predictive\">\n <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n </slot>\n </BaseScroll>\n </div>\n\n <main v-if=\"devMode \|\| $slots.main\" class=\"x-layout__main\">\n <MainScroll>\n <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n <!-- @slot Slot that can be used to insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </Scroll>\n </MainScroll>\n </main>\n\n <div v-if=\"devMode \|\| $slots.floating\" class=\"x-layout__floating x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Floating. -->\n <slot name=\"floating\">\n <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n </slot>\n </div>\n\n <footer v-if=\"devMode \|\| $slots.footer\" class=\"x-layout__footer x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Footer. -->\n <slot name=\"footer\">\n <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n </slot>\n </footer>\n\n <BaseIdModal\n v-if=\"devMode \|\| $slots.aside\"\n :animation=\"asideAnimation\"\n modal-id=\"aside-modal\"\n class=\"x-layout__aside\"\n >\n <!-- @slot Slot that can be used to insert content into the Aside. -->\n <slot name=\"aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <slot name=\"extra-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n </slot>\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 { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\nimport BaseScroll from '../scroll/base-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 /\nexport default defineComponent({\n name: 'SingleColumnLayout',\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll },\n props: {\n /* The animation used for the Main Aside. /\n asideAnimation: {\n type: AnimationProp,\n default: () => animateTranslate('right'),\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\" scoped>\n@import url('../../styles/dev-mode.css');\n\n.x-layout {\n display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [floating-start]\n auto\n [main-end floating-end footer-start]\n auto\n [footer-end page-end];\n\n grid-template-columns: 1fr;\n}\n\n.x-layout > {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n\n.x-layout__header {\n grid-row: header;\n z-index: 1;\n}\n\n.x-layout__sub-header {\n grid-row: sub-header;\n z-index: 1;\n}\n\n.x-layout__toolbar {\n grid-row: toolbar;\n z-index: 1;\n}\n\n.x-layout__predictive {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n}\n\n.x-layout__main {\n grid-row: main;\n flex-flow: column nowrap;\n}\n\n.x-layout__floating {\n grid-row: floating;\n z-index: 1;\n}\n\n.x-layout__footer {\n grid-row: footer;\n}\n\n.x-layout__aside {\n grid-row: page;\n z-index: 3;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n width: 100%;\n height: 100%;\n margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n}\n\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n pointer-events: all;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component provides a single-column layout with fixed headers and collapsible fixed asides:\n\n### Layout Schema\n\n\| header \|\n\| ----------- \|\n\| sub-header \|\n\| toolbar \|\n\| predictive \|\n\| main \|\n\| floating \|\n\| footer \|\n\| aside \|\n\| extra-aside \|\n\n## Design Tokens\n\nThe component exposes the following `Design Tokens` for configuration:\n\n\| Token \| Default Value \| Description \|\n\| ----------------------------------------- \| ------------- \| ----------------------------------- \|\n\| --x-size-margin-left-layout-single-column \| 0 \| The left margin for the aside modal \|\n\n## Example\n\n```vue\n<template>\n <SingleColumnLayout>\n <template #header>Header content</template>\n <template #sub-header>Sub-header content</template>\n <template #toolbar>Toolbar content</template>\n <template #predictive>Predictive content</template>\n <template #main>Main content</template>\n <template #floating>Floating content</template>\n <template #footer>Footer content</template>\n <template #aside>Aside content</template>\n <template #extra-aside>Extra aside content</template>\n </SingleColumnLayout>\n</template>\n\n<script setup>\nimport SingleColumnLayout from '@empathyco/x-components/js/components/layouts/single-column-layout.vue'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createVNode","_withCtx","_createBlock"],"mappings":"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"}
1	+ {"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n <header v-if=\"devMode \|\| $slots.header\" class=\"x-layout__header x-list x-list--horizontal\">\n <!-- @slot Slot that is used to insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div\n v-if=\"devMode \|\| $slots['sub-header']\"\n class=\"x-layout__sub-header x-list x-list--horizontal\"\n >\n <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n\n <div v-if=\"devMode \|\| $slots.toolbar\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n <slot name=\"toolbar\">\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </div>\n\n <div v-if=\"devMode \|\| $slots.predictive\" class=\"x-layout__predictive x-list x-list--vertical\">\n <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n <slot name=\"predictive\">\n <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n </slot>\n </BaseScroll>\n </div>\n\n <main v-if=\"devMode \|\| $slots.main\" class=\"x-layout__main\">\n <MainScroll>\n <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n <!-- @slot Slot that can be used to insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </Scroll>\n </MainScroll>\n </main>\n\n <div v-if=\"devMode \|\| $slots.floating\" class=\"x-layout__floating x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Floating. -->\n <slot name=\"floating\">\n <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n </slot>\n </div>\n\n <footer v-if=\"devMode \|\| $slots.footer\" class=\"x-layout__footer x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Footer. -->\n <slot name=\"footer\">\n <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n </slot>\n </footer>\n\n <BaseIdModal\n v-if=\"devMode \|\| $slots.aside\"\n :animation=\"asideAnimation\"\n modal-id=\"aside-modal\"\n class=\"x-layout__aside\"\n >\n <!-- @slot Slot that can be used to insert content into the Aside. -->\n <slot name=\"aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <slot name=\"extra-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n </slot>\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 { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\nimport BaseScroll from '../scroll/base-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 /\nexport default defineComponent({\n name: 'SingleColumnLayout',\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll },\n props: {\n /* The animation used for the Main Aside. /\n asideAnimation: {\n type: AnimationProp,\n default: () => animateTranslate('right'),\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\" 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 display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [floating-start]\n auto\n [main-end floating-end footer-start]\n auto\n [footer-end page-end];\n\n grid-template-columns: 1fr;\n}\n\n.x-layout > {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n\n.x-layout__header {\n grid-row: header;\n z-index: 1;\n}\n\n.x-layout__sub-header {\n grid-row: sub-header;\n z-index: 1;\n}\n\n.x-layout__toolbar {\n grid-row: toolbar;\n z-index: 1;\n}\n\n.x-layout__predictive {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n}\n\n.x-layout__main {\n grid-row: main;\n flex-flow: column nowrap;\n}\n\n.x-layout__floating {\n grid-row: floating;\n z-index: 1;\n}\n\n.x-layout__footer {\n grid-row: footer;\n}\n\n.x-layout__aside {\n grid-row: page;\n z-index: 3;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n width: 100%;\n height: 100%;\n margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n}\n\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n pointer-events: all;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component provides a single-column layout with fixed headers and collapsible fixed asides:\n\n### Layout Schema\n\n\| header \|\n\| ----------- \|\n\| sub-header \|\n\| toolbar \|\n\| predictive \|\n\| main \|\n\| floating \|\n\| footer \|\n\| aside \|\n\| extra-aside \|\n\n## Design Tokens\n\nThe component exposes the following `Design Tokens` for configuration:\n\n\| Token \| Default Value \| Description \|\n\| ----------------------------------------- \| ------------- \| ----------------------------------- \|\n\| --x-size-margin-left-layout-single-column \| 0 \| The left margin for the aside modal \|\n\n## Example\n\n```vue\n<template>\n <SingleColumnLayout>\n <template #header>Header content</template>\n <template #sub-header>Sub-header content</template>\n <template #toolbar>Toolbar content</template>\n <template #predictive>Predictive content</template>\n <template #main>Main content</template>\n <template #floating>Floating content</template>\n <template #footer>Footer content</template>\n <template #aside>Aside content</template>\n <template #extra-aside>Extra aside content</template>\n </SingleColumnLayout>\n</template>\n\n<script setup>\nimport SingleColumnLayout from '@empathyco/x-components/js/components/layouts/single-column-layout.vue'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createVNode","_withCtx","_createBlock"],"mappings":"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"}

package/js/components/layouts/single-column-layout.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"single-column-layout.vue2.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n <header v-if=\"devMode \|\| $slots.header\" class=\"x-layout__header x-list x-list--horizontal\">\n <!-- @slot Slot that is used to insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div\n v-if=\"devMode \|\| $slots['sub-header']\"\n class=\"x-layout__sub-header x-list x-list--horizontal\"\n >\n <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n\n <div v-if=\"devMode \|\| $slots.toolbar\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n <slot name=\"toolbar\">\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </div>\n\n <div v-if=\"devMode \|\| $slots.predictive\" class=\"x-layout__predictive x-list x-list--vertical\">\n <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n <slot name=\"predictive\">\n <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n </slot>\n </BaseScroll>\n </div>\n\n <main v-if=\"devMode \|\| $slots.main\" class=\"x-layout__main\">\n <MainScroll>\n <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n <!-- @slot Slot that can be used to insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </Scroll>\n </MainScroll>\n </main>\n\n <div v-if=\"devMode \|\| $slots.floating\" class=\"x-layout__floating x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Floating. -->\n <slot name=\"floating\">\n <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n </slot>\n </div>\n\n <footer v-if=\"devMode \|\| $slots.footer\" class=\"x-layout__footer x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Footer. -->\n <slot name=\"footer\">\n <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n </slot>\n </footer>\n\n <BaseIdModal\n v-if=\"devMode \|\| $slots.aside\"\n :animation=\"asideAnimation\"\n modal-id=\"aside-modal\"\n class=\"x-layout__aside\"\n >\n <!-- @slot Slot that can be used to insert content into the Aside. -->\n <slot name=\"aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <slot name=\"extra-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n </slot>\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 { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\nimport BaseScroll from '../scroll/base-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 /\nexport default defineComponent({\n name: 'SingleColumnLayout',\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll },\n props: {\n /* The animation used for the Main Aside. /\n asideAnimation: {\n type: AnimationProp,\n default: () => animateTranslate('right'),\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\" scoped>\n~~@import url('../../styles/~~dev-mode.~~css')~~;\n\n.x-layout {\n display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [floating-start]\n auto\n [main-end floating-end footer-start]\n auto\n [footer-end page-end];\n\n grid-template-columns: 1fr;\n}\n\n.x-layout > {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n\n.x-layout__header {\n grid-row: header;\n z-index: 1;\n}\n\n.x-layout__sub-header {\n grid-row: sub-header;\n z-index: 1;\n}\n\n.x-layout__toolbar {\n grid-row: toolbar;\n z-index: 1;\n}\n\n.x-layout__predictive {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n}\n\n.x-layout__main {\n grid-row: main;\n flex-flow: column nowrap;\n}\n\n.x-layout__floating {\n grid-row: floating;\n z-index: 1;\n}\n\n.x-layout__footer {\n grid-row: footer;\n}\n\n.x-layout__aside {\n grid-row: page;\n z-index: 3;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n width: 100%;\n height: 100%;\n margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n}\n\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n pointer-events: all;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component provides a single-column layout with fixed headers and collapsible fixed asides:\n\n### Layout Schema\n\n\| header \|\n\| ----------- \|\n\| sub-header \|\n\| toolbar \|\n\| predictive \|\n\| main \|\n\| floating \|\n\| footer \|\n\| aside \|\n\| extra-aside \|\n\n## Design Tokens\n\nThe component exposes the following `Design Tokens` for configuration:\n\n\| Token \| Default Value \| Description \|\n\| ----------------------------------------- \| ------------- \| ----------------------------------- \|\n\| --x-size-margin-left-layout-single-column \| 0 \| The left margin for the aside modal \|\n\n## Example\n\n```vue\n<template>\n <SingleColumnLayout>\n <template #header>Header content</template>\n <template #sub-header>Sub-header content</template>\n <template #toolbar>Toolbar content</template>\n <template #predictive>Predictive content</template>\n <template #main>Main content</template>\n <template #floating>Floating content</template>\n <template #footer>Footer content</template>\n <template #aside>Aside content</template>\n <template #extra-aside>Extra aside content</template>\n </SingleColumnLayout>\n</template>\n\n<script setup>\nimport SingleColumnLayout from '@empathyco/x-components/js/components/layouts/single-column-layout.vue'\n</script>\n```\n</docs>\n"],"names":["MainScroll"],"mappings":";;;;;;;;AAuFA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,UAAU,EAAE,EAAE,WAAW,EAAE,UAAU,cAAEA,WAAU,EAAE,MAAK,EAAG;AAC3D,IAAA,KAAK,EAAE;;AAEL,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC;AACzC,SAAA;;AAED,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"single-column-layout.vue2.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n <header v-if=\"devMode \|\| $slots.header\" class=\"x-layout__header x-list x-list--horizontal\">\n <!-- @slot Slot that is used to insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div\n v-if=\"devMode \|\| $slots['sub-header']\"\n class=\"x-layout__sub-header x-list x-list--horizontal\"\n >\n <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n\n <div v-if=\"devMode \|\| $slots.toolbar\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n <slot name=\"toolbar\">\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </div>\n\n <div v-if=\"devMode \|\| $slots.predictive\" class=\"x-layout__predictive x-list x-list--vertical\">\n <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n <slot name=\"predictive\">\n <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n </slot>\n </BaseScroll>\n </div>\n\n <main v-if=\"devMode \|\| $slots.main\" class=\"x-layout__main\">\n <MainScroll>\n <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n <!-- @slot Slot that can be used to insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </Scroll>\n </MainScroll>\n </main>\n\n <div v-if=\"devMode \|\| $slots.floating\" class=\"x-layout__floating x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Floating. -->\n <slot name=\"floating\">\n <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n </slot>\n </div>\n\n <footer v-if=\"devMode \|\| $slots.footer\" class=\"x-layout__footer x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Footer. -->\n <slot name=\"footer\">\n <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n </slot>\n </footer>\n\n <BaseIdModal\n v-if=\"devMode \|\| $slots.aside\"\n :animation=\"asideAnimation\"\n modal-id=\"aside-modal\"\n class=\"x-layout__aside\"\n >\n <!-- @slot Slot that can be used to insert content into the Aside. -->\n <slot name=\"aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <slot name=\"extra-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n </slot>\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 { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\nimport BaseScroll from '../scroll/base-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 /\nexport default defineComponent({\n name: 'SingleColumnLayout',\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll },\n props: {\n /* The animation used for the Main Aside. /\n asideAnimation: {\n type: AnimationProp,\n default: () => animateTranslate('right'),\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\" 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 display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [floating-start]\n auto\n [main-end floating-end footer-start]\n auto\n [footer-end page-end];\n\n grid-template-columns: 1fr;\n}\n\n.x-layout > {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n\n.x-layout__header {\n grid-row: header;\n z-index: 1;\n}\n\n.x-layout__sub-header {\n grid-row: sub-header;\n z-index: 1;\n}\n\n.x-layout__toolbar {\n grid-row: toolbar;\n z-index: 1;\n}\n\n.x-layout__predictive {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n}\n\n.x-layout__main {\n grid-row: main;\n flex-flow: column nowrap;\n}\n\n.x-layout__floating {\n grid-row: floating;\n z-index: 1;\n}\n\n.x-layout__footer {\n grid-row: footer;\n}\n\n.x-layout__aside {\n grid-row: page;\n z-index: 3;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n width: 100%;\n height: 100%;\n margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n}\n\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n pointer-events: all;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component provides a single-column layout with fixed headers and collapsible fixed asides:\n\n### Layout Schema\n\n\| header \|\n\| ----------- \|\n\| sub-header \|\n\| toolbar \|\n\| predictive \|\n\| main \|\n\| floating \|\n\| footer \|\n\| aside \|\n\| extra-aside \|\n\n## Design Tokens\n\nThe component exposes the following `Design Tokens` for configuration:\n\n\| Token \| Default Value \| Description \|\n\| ----------------------------------------- \| ------------- \| ----------------------------------- \|\n\| --x-size-margin-left-layout-single-column \| 0 \| The left margin for the aside modal \|\n\n## Example\n\n```vue\n<template>\n <SingleColumnLayout>\n <template #header>Header content</template>\n <template #sub-header>Sub-header content</template>\n <template #toolbar>Toolbar content</template>\n <template #predictive>Predictive content</template>\n <template #main>Main content</template>\n <template #floating>Floating content</template>\n <template #footer>Footer content</template>\n <template #aside>Aside content</template>\n <template #extra-aside>Extra aside content</template>\n </SingleColumnLayout>\n</template>\n\n<script setup>\nimport SingleColumnLayout from '@empathyco/x-components/js/components/layouts/single-column-layout.vue'\n</script>\n```\n</docs>\n"],"names":["MainScroll"],"mappings":";;;;;;;;AAuFA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,UAAU,EAAE,EAAE,WAAW,EAAE,UAAU,cAAEA,WAAU,EAAE,MAAK,EAAG;AAC3D,IAAA,KAAK,EAAE;;AAEL,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC;AACzC,SAAA;;AAED,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA,CAAA;;;;"}

package/js/components/layouts/single-column-layout.vue3.js CHANGED Viewed

@@ -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-9dd00b61]{align-content:stretch;display:grid;grid-template-columns:1fr;grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [floating-start] auto [main-end floating-end footer-start] auto [footer-end page-end];height:100%;justify-content:stretch}.x-layout[data-v-9dd00b61]>*{display:flex;grid-column:1/-1;min-height:0;min-width:0}.x-layout__header[data-v-9dd00b61]{grid-row:header;z-index:1}.x-layout__sub-header[data-v-9dd00b61]{grid-row:sub-header;z-index:1}.x-layout__toolbar[data-v-9dd00b61]{grid-row:toolbar;z-index:1}.x-layout__predictive[data-v-9dd00b61]{flex-flow:column nowrap;grid-row-end:page-end;grid-row-start:header-end;z-index:2}.x-layout__main[data-v-9dd00b61]{flex-flow:column nowrap;grid-row:main}.x-layout__floating[data-v-9dd00b61]{grid-row:floating;z-index:1}.x-layout__footer[data-v-9dd00b61]{grid-row:footer}.x-layout__aside[data-v-9dd00b61]{grid-row:page;z-index:3}[dir=ltr] .x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{margin-left:var(--x-size-margin-left-layout-single-column,0)}[dir=rtl] .x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{margin-right:var(--x-size-margin-left-layout-single-column,0)}.x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{height:100%;width:100%}.x-layout[data-v-9dd00b61] .x-layout__aside>:not(.slot-helper){pointer-events:all}";
+var css = ".dev-mode .slot-helper[data-v-9dd00b61]{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-9dd00b61]{align-content:stretch;display:grid;grid-template-columns:1fr;grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [floating-start] auto [main-end floating-end footer-start] auto [footer-end page-end];height:100%;justify-content:stretch}.x-layout[data-v-9dd00b61]>*{display:flex;grid-column:1/-1;min-height:0;min-width:0}.x-layout__header[data-v-9dd00b61]{grid-row:header;z-index:1}.x-layout__sub-header[data-v-9dd00b61]{grid-row:sub-header;z-index:1}.x-layout__toolbar[data-v-9dd00b61]{grid-row:toolbar;z-index:1}.x-layout__predictive[data-v-9dd00b61]{flex-flow:column nowrap;grid-row-end:page-end;grid-row-start:header-end;z-index:2}.x-layout__main[data-v-9dd00b61]{flex-flow:column nowrap;grid-row:main}.x-layout__floating[data-v-9dd00b61]{grid-row:floating;z-index:1}.x-layout__footer[data-v-9dd00b61]{grid-row:footer}.x-layout__aside[data-v-9dd00b61]{grid-row:page;z-index:3}[dir=ltr] .x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{margin-left:var(--x-size-margin-left-layout-single-column,0)}[dir=rtl] .x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{margin-right:var(--x-size-margin-left-layout-single-column,0)}.x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{height:100%;width:100%}.x-layout[data-v-9dd00b61] .x-layout__aside>:not(.slot-helper){pointer-events:all}";
 injectCss(css);
 export { css };

package/js/components/modals/base-id-modal-close.vue2.js CHANGED Viewed

@@ -2,15 +2,11 @@ import { defineComponent } from 'vue';
 import '../../composables/create-use-device.js';
 import { use$x } from '../../composables/use-_x.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../plugins/devtools/colors.utils.js';
 import '../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../plugins/x-plugin.js';
 import '@vueuse/core';
+import 'rxjs';
 /**
  * Component that allows to close a modal by emitting

package/js/components/modals/base-id-modal-close.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-id-modal-close.vue2.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n <button\n class=\"x-events-modal-id-close-button x-button\"\n data-test=\"close-modal-id\"\n @click=\"closeModal\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/*\n Component that allows to close a modal by emitting\n * {@link XEventsTypes.UserClickedCloseModal}.\n * It allows full customization with the 'closing-element' slot and exposes the 'closeModal'\n * function.\n \n @public\n /\nexport default defineComponent({\n name: 'BaseIdModalClose',\n props: {\n /* The modalId of the modal that will be closed. /\n modalId: {\n type: String,\n required: true,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n /\n Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.\n \n @param event - The event triggering the function.\n * @param event.target - Event target.\n /\n function closeModal({ target }: Event) {\n $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement })\n }\n\n / Hack to render through a render-function, the `closing-element` slot or, in its absence,\n the component itself. It is the alternative for the NoElement antipattern. */\n const innerProps = { closeModal }\n return (\n slots['closing-element'] ? () => slots['closing-element']?.(innerProps)[0] : innerProps\n ) as typeof innerProps\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the modal\n that is going to be closed.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedCloseModal` when clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot inside the button and closes the\nmodal with modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalClose modalId=\"my-modal\">\n <img src=\"./close-button-icon.svg\" />\n </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to close the modal with modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalClose modalId=\"my-modal\">\n <template #closing-element=\"{ closeModal }\">\n <ul>\n <li @click=\"closeModal\">Close here</li>\n <li>Not here</li>\n </ul>\n </template>\n </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;~~AAeA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;AACxB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,SAAS,UAAU,CAAC,EAAE,MAAK,EAAU,EAAA;AACnC,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAuB,CAAA;QACnF;AAEA;AAC+E;AAC/E,QAAA,MAAM,UAAS,GAAI,EAAE,UAAS,EAAE;QAChC,QACE,KAAK,CAAC,iBAAiB,CAAA,GAAI,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,GAAI,UAAS;IAE1F,CAAC;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"base-id-modal-close.vue2.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n <button\n class=\"x-events-modal-id-close-button x-button\"\n data-test=\"close-modal-id\"\n @click=\"closeModal\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/*\n Component that allows to close a modal by emitting\n * {@link XEventsTypes.UserClickedCloseModal}.\n * It allows full customization with the 'closing-element' slot and exposes the 'closeModal'\n * function.\n \n @public\n /\nexport default defineComponent({\n name: 'BaseIdModalClose',\n props: {\n /* The modalId of the modal that will be closed. /\n modalId: {\n type: String,\n required: true,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n /\n Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.\n \n @param event - The event triggering the function.\n * @param event.target - Event target.\n /\n function closeModal({ target }: Event) {\n $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement })\n }\n\n / Hack to render through a render-function, the `closing-element` slot or, in its absence,\n the component itself. It is the alternative for the NoElement antipattern. */\n const innerProps = { closeModal }\n return (\n slots['closing-element'] ? () => slots['closing-element']?.(innerProps)[0] : innerProps\n ) as typeof innerProps\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the modal\n that is going to be closed.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedCloseModal` when clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot inside the button and closes the\nmodal with modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalClose modalId=\"my-modal\">\n <img src=\"./close-button-icon.svg\" />\n </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to close the modal with modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalClose modalId=\"my-modal\">\n <template #closing-element=\"{ closeModal }\">\n <ul>\n <li @click=\"closeModal\">Close here</li>\n <li>Not here</li>\n </ul>\n </template>\n </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AAeA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;AACxB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,SAAS,UAAU,CAAC,EAAE,MAAK,EAAU,EAAA;AACnC,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAuB,CAAA;QACnF;AAEA;AAC+E;AAC/E,QAAA,MAAM,UAAS,GAAI,EAAE,UAAS,EAAE;QAChC,QACE,KAAK,CAAC,iBAAiB,CAAA,GAAI,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,GAAI,UAAS;IAE1F,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/modals/base-id-modal-open.vue2.js CHANGED Viewed

@@ -2,15 +2,11 @@ import { defineComponent } from 'vue';
 import '../../composables/create-use-device.js';
 import { use$x } from '../../composables/use-_x.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../plugins/devtools/colors.utils.js';
 import '../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../plugins/x-plugin.js';
 import '@vueuse/core';
+import 'rxjs';
 /**
  * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}

package/js/components/modals/base-id-modal-open.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-id-modal-open.vue2.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n <button\n class=\"x-events-modal-id-open-button x-button\"\n data-test=\"open-modal-id\"\n @click=\"openModal\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/*\n Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n * exposes the 'openModal' function.\n \n @public\n /\nexport default defineComponent({\n name: 'BaseIdModalOpen',\n props: {\n /* The modalId of the modal that will be opened. /\n modalId: {\n type: String,\n required: true,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n /\n Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n \n @param event - The event triggering the function.\n * @param event.target - Event target.\n /\n function openModal({ target }: Event) {\n $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement })\n }\n\n / Hack to render through a render-function, the `opening-element` slot or, in its absence,\n the component itself. It is the alternative for the NoElement antipattern. */\n const innerProps = { openModal }\n return (\n slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps\n ) as typeof innerProps\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the modal\n that is going to be opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalOpen modalId=\"my-modal\">\n <img src=\"./open-button-icon.svg\" />\n <span>Open</span>\n </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to open the modal with modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalOpen modalId=\"my-modal\">\n <template #opening-element=\"{ openModal }\">\n <ul>\n <li @click=\"openModal\">Open here</li>\n <li>Not here</li>\n </ul>\n </template>\n </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;~~AAeA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,SAAS,SAAS,CAAC,EAAE,MAAK,EAAU,EAAA;AAClC,YAAA,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAuB,CAAA;QAClF;AAEA;AAC+E;AAC/E,QAAA,MAAM,UAAS,GAAI,EAAE,SAAQ,EAAE;QAC/B,QACE,KAAK,CAAC,iBAAiB,CAAA,GAAI,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,GAAI,UAAS;IAE1F,CAAC;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"base-id-modal-open.vue2.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n <button\n class=\"x-events-modal-id-open-button x-button\"\n data-test=\"open-modal-id\"\n @click=\"openModal\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/*\n Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n * exposes the 'openModal' function.\n \n @public\n /\nexport default defineComponent({\n name: 'BaseIdModalOpen',\n props: {\n /* The modalId of the modal that will be opened. /\n modalId: {\n type: String,\n required: true,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n /\n Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n \n @param event - The event triggering the function.\n * @param event.target - Event target.\n /\n function openModal({ target }: Event) {\n $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement })\n }\n\n / Hack to render through a render-function, the `opening-element` slot or, in its absence,\n the component itself. It is the alternative for the NoElement antipattern. */\n const innerProps = { openModal }\n return (\n slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps\n ) as typeof innerProps\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the modal\n that is going to be opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalOpen modalId=\"my-modal\">\n <img src=\"./open-button-icon.svg\" />\n <span>Open</span>\n </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to open the modal with modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalOpen modalId=\"my-modal\">\n <template #opening-element=\"{ openModal }\">\n <ul>\n <li @click=\"openModal\">Open here</li>\n <li>Not here</li>\n </ul>\n </template>\n </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AAeA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,SAAS,SAAS,CAAC,EAAE,MAAK,EAAU,EAAA;AAClC,YAAA,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAuB,CAAA;QAClF;AAEA;AAC+E;AAC/E,QAAA,MAAM,UAAS,GAAI,EAAE,SAAQ,EAAE;QAC/B,QACE,KAAK,CAAC,iBAAiB,CAAA,GAAI,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,GAAI,UAAS;IAE1F,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/modals/base-id-modal.vue2.js CHANGED Viewed

@@ -1,13 +1,8 @@
 import { defineComponent, ref, useTemplateRef } from 'vue';
 import '../../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../plugins/devtools/colors.utils.js';
 import '../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../plugins/x-plugin.js';
 import { useXBus } from '../../composables/use-x-bus.js';
 import '@vueuse/core';