npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.93 → 6.0.0-alpha.95 - Mend

@empathyco/x-components 6.0.0-alpha.93 → 6.0.0-alpha.95

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

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('../../design-system-deprecated/utilities/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__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 has the following 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 has also the following `Design Tokens` to configure it:\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</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@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__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 has the following 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 has also the following `Design Tokens` to configure it:\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</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/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('../../design-system-deprecated/utilities/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"],"names":["_resolveComponent","devMode","$slots","_createElementBlock","_renderSlot","_openBlock","_createCommentVNode","_createVNode","_withCtx","asideAnimation"],"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@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"],"names":["_resolveComponent","devMode","$slots","_createElementBlock","_renderSlot","_openBlock","_createCommentVNode","_createVNode","_withCtx","asideAnimation"],"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('../../~~design-system-deprecated~~/~~utilities/~~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"],"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@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"],"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/result/result-variant-selector.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"result-variant-selector.vue.js","sources":["../../../../src/components/result/result-variant-selector.vue"],"sourcesContent":["<template>\n <ul v-if=\"result && variants\" class=\"x-result-variant-selector__list\" data-test=\"variants-list\">\n <li\n v-for=\"(variant, index) in variants\"\n :key=\"index\"\n class=\"x-result-variant-selector__item\"\n :class=\"{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }\"\n data-test=\"variant-item\"\n >\n <!--\n @slot Variant item\n @binding {ResultVariant} variant - The variant item\n @binding {boolean} isSelected - Indicates if the variant is selected\n @binding {() => void} selectVariant - Callback to select the variant\n -->\n <slot\n name=\"variant\"\n :variant=\"variant\"\n :is-selected=\"variantIsSelected(variant)\"\n :select-variant=\"() => selectVariant(variant)\"\n >\n <button data-test=\"variant-button\" class=\"x-button\" @click=\"selectVariant(variant)\">\n <!--\n @slot Variant content\n @binding {ResultVariant} variant - The variant item\n @binding {boolean} isSelected - Indicates if the variant is selected\n -->\n <slot name=\"variant-content\" :variant=\"variant\" :is-selected=\"variantIsSelected(variant)\">\n {{ variant }}\n </slot>\n </button>\n </slot>\n </li>\n </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { Result, ResultVariant } from '@empathyco/x-types'\nimport type { Ref } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n RESULT_WITH_VARIANTS_KEY,\n SELECT_RESULT_VARIANT_KEY,\n SELECTED_VARIANTS_KEY,\n} from '../decorators/injection.consts'\n\n/*\n Component to show and select the available variants of a product for a given nest level.\n * TODO: Add logger warning on mount when result is not injected.\n \n @public\n /\nexport default defineComponent({\n name: 'ResultVariantSelector',\n props: {\n /* The nest level of the variants to be rendered. /\n level: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n /\n Callback to be called when a variant is selected.\n \n @public\n * @returns The 'selectResultVariant' injection key.\n /\n const selectResultVariant = inject<(variant: ResultVariant, level?: number) => void>(\n SELECT_RESULT_VARIANT_KEY as string,\n )\n\n /* The original result, used to retrieve the available variants for the level. /\n const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string)\n\n /* Array containing the selected variants. /\n const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string)\n\n /\n It retrieves the available variants from the result.\n \n @returns - The variants of the result for the current level.\n /\n const variants = computed<ResultVariant[] \| undefined>(() => {\n if (props.level === 0) {\n return result!.value?.variants\n }\n return selectedVariants!.value[props.level - 1]?.variants\n })\n\n /\n Gets the selected variant of the current level.\n \n @returns - The selected variant.\n /\n const selectedVariant = computed<ResultVariant \| undefined>(() =>\n variants.value?.find(variant => variant === selectedVariants!.value[props.level]),\n )\n\n /\n Calls the provided method to select a variant.\n \n @param variant - Variant to select.\n /\n const selectVariant = (variant: ResultVariant) => {\n selectResultVariant!(variant, props.level)\n }\n\n /\n Checks if a variant is selected.\n \n @param variant - Variant to check.\n * @returns True if the variant is selected, false if not.\n /\n const variantIsSelected = (variant: ResultVariant) => {\n return selectedVariant.value === variant\n }\n\n /\n Render function to execute the `default` slot, binding `slotsProps` and getting only the\n * first `vNode` to avoid Fragments and Text root nodes.\n * If there are no result or variants, nothing is rendered.\n \n @remarks `slotProps` must be values without Vue reactivity and located inside the\n * render-function to update the binding data properly.\n \n @returns The root `vNode` of the `default` slot or empty string if there are\n * no result or variants.\n /\n function renderDefaultSlot() {\n const slotProps = {\n variants: variants.value,\n selectedVariant: selectedVariant.value,\n selectVariant,\n }\n return result && variants.value ? slots.default?.(slotProps)[0] : ''\n }\n\n / Hack to render through a render-function, the `default` slot or, in its absence,\n the component itself. It is the alternative for the NoElement antipattern. /\n const componentProps = { result, variants, variantIsSelected, selectVariant }\n return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-variant-selector__list {\n display: flex;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the `ResultVariantSelector` component is rendered.\n\nTake into account that this component must* be a child of a `ResultVariantsProvider` component.\n\nAlso, the component is intended to be used overwriting the content with the slots.\n\nBy default it will render a list of buttons containing the available variants.\n\nThis component only has a required `level` prop, that indicates the level of the variants to be\nrendered.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <h1>Select color</h1>\n <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\" />\n\n <h1>Select size</h1>\n <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\" />\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n variants: [\n {\n name: 'red XL',\n },\n {\n name: 'red L',\n },\n ],\n },\n {\n name: 'blue',\n variants: [\n {\n name: 'blue S',\n },\n {\n name: 'blue M',\n },\n {\n name: 'blue L',\n },\n ],\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with the default slot\n\nIn this example the default slot is used to customize the list.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector :level=\"0\" #default=\"{ variants, selectedVariant, selectVariant }\">\n <div>\n <p v-if=\"selectedVariant\">Selected variant: {{ selectedVariant.name }}</p>\n <ul class=\"x-flex\">\n <li v-for=\"(variant, index) in variants\" :key=\"index\">\n <button @click=\"selectVariant(variant)\">{{ variant.name }}</button>\n </li>\n </ul>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with variant-slot\n\nIn this example the variant-slot is used to customize the variant item.\n\nThe variant will be rendered inside a list.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector :level=\"0\" #variant=\"{ variant, isSelected, selectVariant }\">\n <div>\n <button @click=\"selectVariant\">\n {{ variant.name }}\n <span v-if=\"isSelected\">SELECTED!</span>\n </button>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with variant-content slot\n\nIn this example the variant-content slot is used to customize the content of the default variant\nbutton.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector #variant-content=\"{ variant, isSelected }\">\n <div>\n {{ variant.name }}\n <span v-if=\"isSelected\">SELECTED!</span>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","variantIsSelected","_createElementVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;;;MACgC,UAAM,GAAA;AAAA,EAAkC,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,iCAAA;;;;AAAtE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAgCK,QAhCL,KAgCK,EAAA,QAAA,EAAA;6BA/BH,QA8BK,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,IAAA,EAAA,UAAA,EAAA;AAAA,KAAAD,SAAA,CA5BG,IAAK,CAAA,EAAAC,kBAAA;AAAA,MAAAC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,QAAA,EAAA,CAAA,OAAA,EAAA,KAAA,KAAA;eACNH,SALX,EAAA,EAAAC,kBAAA;AAAA,UAKY,IAAA;AAAA,UAAA;AAAA,YAEN,GAAA,EAAA,KAAA;AAAA,YAAA,KAAA,EAAAG,cAAA,CAAA,CAAA,iCAAA,EAAA,EAAA,8CAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,EAAA,CAAA,CAAA;YAQA,WAgBO,EAAA,cAAA;AAAA,WAAA;;AAbO,YAAAC,UAAA,CAAA,IAAA,CAAEC,MAAiB,EAAA,SAAA,EAAA;AAAA,cAC9B,OAAA;AAAA,cAYI,UAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,OAAA,CAAA;AAAA,cAVL,aASS,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;AAAA,aATD,EAAA,MAAA;AAAA,cAA2CC,kBAAA,CAAA,QAAA,EAAA;AAAA,gBAAE,WAAK,EAAA,gBAAA;AAAA,gBAAA,KAAA,EAAA,UAAA;gBAMxD,OAEO,EAAA,CAAA,MAAA,KAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;AAAA,eAAA,EAAA;AAFqD,gBAAAF,UAAA,CAAA,IAAA,CAAEC,MAAyB,EAAA,iBAAA,EAAA;AAAA,kBAAA,OAAA;AA3BjG,kBAAA,UAAA,EAAA,IAAA,CAAA,iBAAA,CA4Be,OAAO,CAAA;AAAA,iBAAA,EAAA,MAAA;;AA5BtB,oBAAAE,eAAA,CAAA,OAAA,CAAA;AAAA,oBAAA,CAAA;AAAA;AAAA,mBAAA;AAAA,iBAAA,EAAA,IAAA,CAAA;;;;;;;AAAA,OAAA,CAAA;AAAA,MAAA,GAAA;AAAA;AAAA,KAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"result-variant-selector.vue.js","sources":["../../../../src/components/result/result-variant-selector.vue"],"sourcesContent":["<template>\n <ul v-if=\"result && variants\" class=\"x-result-variant-selector__list\" data-test=\"variants-list\">\n <li\n v-for=\"(variant, index) in variants\"\n :key=\"index\"\n class=\"x-result-variant-selector__item\"\n :class=\"{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }\"\n data-test=\"variant-item\"\n >\n <!--\n @slot Variant item\n @binding {ResultVariant} variant - The variant item\n @binding {boolean} isSelected - Indicates if the variant is selected\n @binding {() => void} selectVariant - Callback to select the variant\n -->\n <slot\n name=\"variant\"\n :variant=\"variant\"\n :is-selected=\"variantIsSelected(variant)\"\n :select-variant=\"() => selectVariant(variant)\"\n >\n <button data-test=\"variant-button\" class=\"x-button\" @click=\"selectVariant(variant)\">\n <!--\n @slot Variant content\n @binding {ResultVariant} variant - The variant item\n @binding {boolean} isSelected - Indicates if the variant is selected\n -->\n <slot name=\"variant-content\" :variant=\"variant\" :is-selected=\"variantIsSelected(variant)\">\n {{ variant }}\n </slot>\n </button>\n </slot>\n </li>\n </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { Result, ResultVariant } from '@empathyco/x-types'\nimport type { Ref } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n RESULT_WITH_VARIANTS_KEY,\n SELECT_RESULT_VARIANT_KEY,\n SELECTED_VARIANTS_KEY,\n} from '../decorators/injection.consts'\n\n/*\n Component to show and select the available variants of a product for a given nest level.\n * TODO: Log warning on mount when result is not injected.\n \n @public\n /\nexport default defineComponent({\n name: 'ResultVariantSelector',\n props: {\n /* The nest level of the variants to be rendered. /\n level: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n /\n Callback to be called when a variant is selected.\n \n @public\n * @returns The 'selectResultVariant' injection key.\n /\n const selectResultVariant = inject<(variant: ResultVariant, level?: number) => void>(\n SELECT_RESULT_VARIANT_KEY as string,\n )\n\n /* The original result, used to retrieve the available variants for the level. /\n const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string)\n\n /* Array containing the selected variants. /\n const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string)\n\n /\n It retrieves the available variants from the result.\n \n @returns - The variants of the result for the current level.\n /\n const variants = computed<ResultVariant[] \| undefined>(() => {\n if (props.level === 0) {\n return result!.value?.variants\n }\n return selectedVariants!.value[props.level - 1]?.variants\n })\n\n /\n Gets the selected variant of the current level.\n \n @returns - The selected variant.\n /\n const selectedVariant = computed<ResultVariant \| undefined>(() =>\n variants.value?.find(variant => variant === selectedVariants!.value[props.level]),\n )\n\n /\n Calls the provided method to select a variant.\n \n @param variant - Variant to select.\n /\n const selectVariant = (variant: ResultVariant) => {\n selectResultVariant!(variant, props.level)\n }\n\n /\n Checks if a variant is selected.\n \n @param variant - Variant to check.\n * @returns True if the variant is selected, false if not.\n /\n const variantIsSelected = (variant: ResultVariant) => {\n return selectedVariant.value === variant\n }\n\n /\n Render function to execute the `default` slot, binding `slotsProps` and getting only the\n * first `vNode` to avoid Fragments and Text root nodes.\n * If there are no result or variants, nothing is rendered.\n \n @remarks `slotProps` must be values without Vue reactivity and located inside the\n * render-function to update the binding data properly.\n \n @returns The root `vNode` of the `default` slot or empty string if there are\n * no result or variants.\n /\n function renderDefaultSlot() {\n const slotProps = {\n variants: variants.value,\n selectedVariant: selectedVariant.value,\n selectVariant,\n }\n return result && variants.value ? slots.default?.(slotProps)[0] : ''\n }\n\n / Hack to render through a render-function, the `default` slot or, in its absence,\n the component itself. It is the alternative for the NoElement antipattern. /\n const componentProps = { result, variants, variantIsSelected, selectVariant }\n return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-variant-selector__list {\n display: flex;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the `ResultVariantSelector` component is rendered.\n\nTake into account that this component must* be a child of a `ResultVariantsProvider` component.\n\nAlso, the component is intended to be used overwriting the content with the slots.\n\nBy default it will render a list of buttons containing the available variants.\n\nThis component only has a required `level` prop, that indicates the level of the variants to be\nrendered.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <h1>Select color</h1>\n <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\" />\n\n <h1>Select size</h1>\n <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\" />\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n variants: [\n {\n name: 'red XL',\n },\n {\n name: 'red L',\n },\n ],\n },\n {\n name: 'blue',\n variants: [\n {\n name: 'blue S',\n },\n {\n name: 'blue M',\n },\n {\n name: 'blue L',\n },\n ],\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with the default slot\n\nIn this example the default slot is used to customize the list.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector :level=\"0\" #default=\"{ variants, selectedVariant, selectVariant }\">\n <div>\n <p v-if=\"selectedVariant\">Selected variant: {{ selectedVariant.name }}</p>\n <ul class=\"x-flex\">\n <li v-for=\"(variant, index) in variants\" :key=\"index\">\n <button @click=\"selectVariant(variant)\">{{ variant.name }}</button>\n </li>\n </ul>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with variant-slot\n\nIn this example the variant-slot is used to customize the variant item.\n\nThe variant will be rendered inside a list.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector :level=\"0\" #variant=\"{ variant, isSelected, selectVariant }\">\n <div>\n <button @click=\"selectVariant\">\n {{ variant.name }}\n <span v-if=\"isSelected\">SELECTED!</span>\n </button>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with variant-content slot\n\nIn this example the variant-content slot is used to customize the content of the default variant\nbutton.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector #variant-content=\"{ variant, isSelected }\">\n <div>\n {{ variant.name }}\n <span v-if=\"isSelected\">SELECTED!</span>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","variantIsSelected","_createElementVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;;;MACgC,UAAM,GAAA;AAAA,EAAkC,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,iCAAA;;;;AAAtE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAgCK,QAhCL,KAgCK,EAAA,QAAA,EAAA;6BA/BH,QA8BK,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,IAAA,EAAA,UAAA,EAAA;AAAA,KAAAD,SAAA,CA5BG,IAAK,CAAA,EAAAC,kBAAA;AAAA,MAAAC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,QAAA,EAAA,CAAA,OAAA,EAAA,KAAA,KAAA;eACNH,SALX,EAAA,EAAAC,kBAAA;AAAA,UAKY,IAAA;AAAA,UAAA;AAAA,YAEN,GAAA,EAAA,KAAA;AAAA,YAAA,KAAA,EAAAG,cAAA,CAAA,CAAA,iCAAA,EAAA,EAAA,8CAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,EAAA,CAAA,CAAA;YAQA,WAgBO,EAAA,cAAA;AAAA,WAAA;;AAbO,YAAAC,UAAA,CAAA,IAAA,CAAEC,MAAiB,EAAA,SAAA,EAAA;AAAA,cAC9B,OAAA;AAAA,cAYI,UAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,OAAA,CAAA;AAAA,cAVL,aASS,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;AAAA,aATD,EAAA,MAAA;AAAA,cAA2CC,kBAAA,CAAA,QAAA,EAAA;AAAA,gBAAE,WAAK,EAAA,gBAAA;AAAA,gBAAA,KAAA,EAAA,UAAA;gBAMxD,OAEO,EAAA,CAAA,MAAA,KAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;AAAA,eAAA,EAAA;AAFqD,gBAAAF,UAAA,CAAA,IAAA,CAAEC,MAAyB,EAAA,iBAAA,EAAA;AAAA,kBAAA,OAAA;AA3BjG,kBAAA,UAAA,EAAA,IAAA,CAAA,iBAAA,CA4Be,OAAO,CAAA;AAAA,iBAAA,EAAA,MAAA;;AA5BtB,oBAAAE,eAAA,CAAA,OAAA,CAAA;AAAA,oBAAA,CAAA;AAAA;AAAA,mBAAA;AAAA,iBAAA,EAAA,IAAA,CAAA;;;;;;;AAAA,OAAA,CAAA;AAAA,MAAA,GAAA;AAAA;AAAA,KAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/components/result/result-variant-selector.vue2.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { SELECT_RESULT_VARIANT_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_
 /**
  * Component to show and select the available variants of a product for a given nest level.
- * TODO: Add logger warning on mount when result is not injected.
+ * TODO: Log warning on mount when result is not injected.
  *
  * @public
  */

package/js/components/result/result-variant-selector.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"result-variant-selector.vue2.js","sources":["../../../../src/components/result/result-variant-selector.vue"],"sourcesContent":["<template>\n <ul v-if=\"result && variants\" class=\"x-result-variant-selector__list\" data-test=\"variants-list\">\n <li\n v-for=\"(variant, index) in variants\"\n :key=\"index\"\n class=\"x-result-variant-selector__item\"\n :class=\"{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }\"\n data-test=\"variant-item\"\n >\n <!--\n @slot Variant item\n @binding {ResultVariant} variant - The variant item\n @binding {boolean} isSelected - Indicates if the variant is selected\n @binding {() => void} selectVariant - Callback to select the variant\n -->\n <slot\n name=\"variant\"\n :variant=\"variant\"\n :is-selected=\"variantIsSelected(variant)\"\n :select-variant=\"() => selectVariant(variant)\"\n >\n <button data-test=\"variant-button\" class=\"x-button\" @click=\"selectVariant(variant)\">\n <!--\n @slot Variant content\n @binding {ResultVariant} variant - The variant item\n @binding {boolean} isSelected - Indicates if the variant is selected\n -->\n <slot name=\"variant-content\" :variant=\"variant\" :is-selected=\"variantIsSelected(variant)\">\n {{ variant }}\n </slot>\n </button>\n </slot>\n </li>\n </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { Result, ResultVariant } from '@empathyco/x-types'\nimport type { Ref } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n RESULT_WITH_VARIANTS_KEY,\n SELECT_RESULT_VARIANT_KEY,\n SELECTED_VARIANTS_KEY,\n} from '../decorators/injection.consts'\n\n/*\n Component to show and select the available variants of a product for a given nest level.\n * TODO: Add logger warning on mount when result is not injected.\n \n @public\n /\nexport default defineComponent({\n name: 'ResultVariantSelector',\n props: {\n /* The nest level of the variants to be rendered. /\n level: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n /\n Callback to be called when a variant is selected.\n \n @public\n * @returns The 'selectResultVariant' injection key.\n /\n const selectResultVariant = inject<(variant: ResultVariant, level?: number) => void>(\n SELECT_RESULT_VARIANT_KEY as string,\n )\n\n /* The original result, used to retrieve the available variants for the level. /\n const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string)\n\n /* Array containing the selected variants. /\n const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string)\n\n /\n It retrieves the available variants from the result.\n \n @returns - The variants of the result for the current level.\n /\n const variants = computed<ResultVariant[] \| undefined>(() => {\n if (props.level === 0) {\n return result!.value?.variants\n }\n return selectedVariants!.value[props.level - 1]?.variants\n })\n\n /\n Gets the selected variant of the current level.\n \n @returns - The selected variant.\n /\n const selectedVariant = computed<ResultVariant \| undefined>(() =>\n variants.value?.find(variant => variant === selectedVariants!.value[props.level]),\n )\n\n /\n Calls the provided method to select a variant.\n \n @param variant - Variant to select.\n /\n const selectVariant = (variant: ResultVariant) => {\n selectResultVariant!(variant, props.level)\n }\n\n /\n Checks if a variant is selected.\n \n @param variant - Variant to check.\n * @returns True if the variant is selected, false if not.\n /\n const variantIsSelected = (variant: ResultVariant) => {\n return selectedVariant.value === variant\n }\n\n /\n Render function to execute the `default` slot, binding `slotsProps` and getting only the\n * first `vNode` to avoid Fragments and Text root nodes.\n * If there are no result or variants, nothing is rendered.\n \n @remarks `slotProps` must be values without Vue reactivity and located inside the\n * render-function to update the binding data properly.\n \n @returns The root `vNode` of the `default` slot or empty string if there are\n * no result or variants.\n /\n function renderDefaultSlot() {\n const slotProps = {\n variants: variants.value,\n selectedVariant: selectedVariant.value,\n selectVariant,\n }\n return result && variants.value ? slots.default?.(slotProps)[0] : ''\n }\n\n / Hack to render through a render-function, the `default` slot or, in its absence,\n the component itself. It is the alternative for the NoElement antipattern. /\n const componentProps = { result, variants, variantIsSelected, selectVariant }\n return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-variant-selector__list {\n display: flex;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the `ResultVariantSelector` component is rendered.\n\nTake into account that this component must* be a child of a `ResultVariantsProvider` component.\n\nAlso, the component is intended to be used overwriting the content with the slots.\n\nBy default it will render a list of buttons containing the available variants.\n\nThis component only has a required `level` prop, that indicates the level of the variants to be\nrendered.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <h1>Select color</h1>\n <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\" />\n\n <h1>Select size</h1>\n <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\" />\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n variants: [\n {\n name: 'red XL',\n },\n {\n name: 'red L',\n },\n ],\n },\n {\n name: 'blue',\n variants: [\n {\n name: 'blue S',\n },\n {\n name: 'blue M',\n },\n {\n name: 'blue L',\n },\n ],\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with the default slot\n\nIn this example the default slot is used to customize the list.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector :level=\"0\" #default=\"{ variants, selectedVariant, selectVariant }\">\n <div>\n <p v-if=\"selectedVariant\">Selected variant: {{ selectedVariant.name }}</p>\n <ul class=\"x-flex\">\n <li v-for=\"(variant, index) in variants\" :key=\"index\">\n <button @click=\"selectVariant(variant)\">{{ variant.name }}</button>\n </li>\n </ul>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with variant-slot\n\nIn this example the variant-slot is used to customize the variant item.\n\nThe variant will be rendered inside a list.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector :level=\"0\" #variant=\"{ variant, isSelected, selectVariant }\">\n <div>\n <button @click=\"selectVariant\">\n {{ variant.name }}\n <span v-if=\"isSelected\">SELECTED!</span>\n </button>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with variant-content slot\n\nIn this example the variant-content slot is used to customize the content of the default variant\nbutton.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector #variant-content=\"{ variant, isSelected }\">\n <div>\n {{ variant.name }}\n <span v-if=\"isSelected\">SELECTED!</span>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AA8CA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,MAAM,CAChC,yBAAmC,CACrC,CAAA;;AAGA,QAAA,MAAM,MAAK,GAAI,MAAM,CAAc,wBAAkC,CAAA,CAAA;;AAGrE,QAAA,MAAM,gBAAe,GAAI,MAAM,CAAuB,qBAA+B,CAAA,CAAA;AAErF;;;;AAIE;AACF,QAAA,MAAM,QAAO,GAAI,QAAQ,CAA8B,MAAM;AAC3D,YAAA,IAAI,KAAK,CAAC,KAAI,KAAM,CAAC,EAAE;AACrB,gBAAA,OAAO,MAAO,CAAC,KAAK,EAAE,QAAO,CAAA;AAC/B,aAAA;AACA,YAAA,OAAO,gBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAO,CAAA;AAC1D,SAAC,CAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAA4B,MAC1D,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,OAAM,IAAK,OAAQ,KAAI,gBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CACnF,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,aAAc,GAAE,CAAC,OAAsB,KAAK;AAChD,YAAA,mBAAoB,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAA,CAAA;AAC3C,SAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,iBAAgB,GAAI,CAAC,OAAsB,KAAK;AACpD,YAAA,OAAO,eAAe,CAAC,KAAI,KAAM,OAAM,CAAA;AACzC,SAAA,CAAA;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,iBAAiB,GAAA;AACxB,YAAA,MAAM,YAAY;gBAChB,QAAQ,EAAE,QAAQ,CAAC,KAAK;gBACxB,eAAe,EAAE,eAAe,CAAC,KAAK;gBACtC,aAAa;aACf,CAAA;YACA,OAAO,MAAK,IAAK,QAAQ,CAAC,KAAI,GAAI,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAE,GAAE,EAAC,CAAA;SACrE;AAEA;AAC+E;QAC/E,MAAM,cAAe,GAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,EAAE,aAAc,EAAA,CAAA;AAC5E,QAAA,QAAQ,KAAK,CAAC,OAAM,GAAI,iBAAkB,GAAE,cAAc,EAAyB;KACpF;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"result-variant-selector.vue2.js","sources":["../../../../src/components/result/result-variant-selector.vue"],"sourcesContent":["<template>\n <ul v-if=\"result && variants\" class=\"x-result-variant-selector__list\" data-test=\"variants-list\">\n <li\n v-for=\"(variant, index) in variants\"\n :key=\"index\"\n class=\"x-result-variant-selector__item\"\n :class=\"{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }\"\n data-test=\"variant-item\"\n >\n <!--\n @slot Variant item\n @binding {ResultVariant} variant - The variant item\n @binding {boolean} isSelected - Indicates if the variant is selected\n @binding {() => void} selectVariant - Callback to select the variant\n -->\n <slot\n name=\"variant\"\n :variant=\"variant\"\n :is-selected=\"variantIsSelected(variant)\"\n :select-variant=\"() => selectVariant(variant)\"\n >\n <button data-test=\"variant-button\" class=\"x-button\" @click=\"selectVariant(variant)\">\n <!--\n @slot Variant content\n @binding {ResultVariant} variant - The variant item\n @binding {boolean} isSelected - Indicates if the variant is selected\n -->\n <slot name=\"variant-content\" :variant=\"variant\" :is-selected=\"variantIsSelected(variant)\">\n {{ variant }}\n </slot>\n </button>\n </slot>\n </li>\n </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { Result, ResultVariant } from '@empathyco/x-types'\nimport type { Ref } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n RESULT_WITH_VARIANTS_KEY,\n SELECT_RESULT_VARIANT_KEY,\n SELECTED_VARIANTS_KEY,\n} from '../decorators/injection.consts'\n\n/*\n Component to show and select the available variants of a product for a given nest level.\n * TODO: Log warning on mount when result is not injected.\n \n @public\n /\nexport default defineComponent({\n name: 'ResultVariantSelector',\n props: {\n /* The nest level of the variants to be rendered. /\n level: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n /\n Callback to be called when a variant is selected.\n \n @public\n * @returns The 'selectResultVariant' injection key.\n /\n const selectResultVariant = inject<(variant: ResultVariant, level?: number) => void>(\n SELECT_RESULT_VARIANT_KEY as string,\n )\n\n /* The original result, used to retrieve the available variants for the level. /\n const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string)\n\n /* Array containing the selected variants. /\n const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string)\n\n /\n It retrieves the available variants from the result.\n \n @returns - The variants of the result for the current level.\n /\n const variants = computed<ResultVariant[] \| undefined>(() => {\n if (props.level === 0) {\n return result!.value?.variants\n }\n return selectedVariants!.value[props.level - 1]?.variants\n })\n\n /\n Gets the selected variant of the current level.\n \n @returns - The selected variant.\n /\n const selectedVariant = computed<ResultVariant \| undefined>(() =>\n variants.value?.find(variant => variant === selectedVariants!.value[props.level]),\n )\n\n /\n Calls the provided method to select a variant.\n \n @param variant - Variant to select.\n /\n const selectVariant = (variant: ResultVariant) => {\n selectResultVariant!(variant, props.level)\n }\n\n /\n Checks if a variant is selected.\n \n @param variant - Variant to check.\n * @returns True if the variant is selected, false if not.\n /\n const variantIsSelected = (variant: ResultVariant) => {\n return selectedVariant.value === variant\n }\n\n /\n Render function to execute the `default` slot, binding `slotsProps` and getting only the\n * first `vNode` to avoid Fragments and Text root nodes.\n * If there are no result or variants, nothing is rendered.\n \n @remarks `slotProps` must be values without Vue reactivity and located inside the\n * render-function to update the binding data properly.\n \n @returns The root `vNode` of the `default` slot or empty string if there are\n * no result or variants.\n /\n function renderDefaultSlot() {\n const slotProps = {\n variants: variants.value,\n selectedVariant: selectedVariant.value,\n selectVariant,\n }\n return result && variants.value ? slots.default?.(slotProps)[0] : ''\n }\n\n / Hack to render through a render-function, the `default` slot or, in its absence,\n the component itself. It is the alternative for the NoElement antipattern. /\n const componentProps = { result, variants, variantIsSelected, selectVariant }\n return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-variant-selector__list {\n display: flex;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the `ResultVariantSelector` component is rendered.\n\nTake into account that this component must* be a child of a `ResultVariantsProvider` component.\n\nAlso, the component is intended to be used overwriting the content with the slots.\n\nBy default it will render a list of buttons containing the available variants.\n\nThis component only has a required `level` prop, that indicates the level of the variants to be\nrendered.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <h1>Select color</h1>\n <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\" />\n\n <h1>Select size</h1>\n <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\" />\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n variants: [\n {\n name: 'red XL',\n },\n {\n name: 'red L',\n },\n ],\n },\n {\n name: 'blue',\n variants: [\n {\n name: 'blue S',\n },\n {\n name: 'blue M',\n },\n {\n name: 'blue L',\n },\n ],\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with the default slot\n\nIn this example the default slot is used to customize the list.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector :level=\"0\" #default=\"{ variants, selectedVariant, selectVariant }\">\n <div>\n <p v-if=\"selectedVariant\">Selected variant: {{ selectedVariant.name }}</p>\n <ul class=\"x-flex\">\n <li v-for=\"(variant, index) in variants\" :key=\"index\">\n <button @click=\"selectVariant(variant)\">{{ variant.name }}</button>\n </li>\n </ul>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with variant-slot\n\nIn this example the variant-slot is used to customize the variant item.\n\nThe variant will be rendered inside a list.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector :level=\"0\" #variant=\"{ variant, isSelected, selectVariant }\">\n <div>\n <button @click=\"selectVariant\">\n {{ variant.name }}\n <span v-if=\"isSelected\">SELECTED!</span>\n </button>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n\n### Play with variant-content slot\n\nIn this example the variant-content slot is used to customize the content of the default variant\nbutton.\n\n```vue\n<template>\n <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n <p>Result name: {{ result.name }}</p>\n\n <ResultVariantSelector #variant-content=\"{ variant, isSelected }\">\n <div>\n {{ variant.name }}\n <span v-if=\"isSelected\">SELECTED!</span>\n </div>\n </ResultVariantSelector>\n </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n name: 'ResultVariantSelectorDemo',\n components: {\n ResultVariantsProvider,\n ResultVariantSelector,\n },\n data() {\n return {\n result: {\n id: 'jacket',\n modelName: 'Result',\n type: 'Product',\n isWishlisted: false,\n identifier: { value: 'jacket' },\n images: [],\n name: 'jacket',\n price: { hasDiscount: false, originalValue: 10, value: 10 },\n url: '/products/jacket',\n variants: [\n {\n name: 'red',\n },\n {\n name: 'blue',\n },\n ],\n },\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AA8CA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,MAAM,CAChC,yBAAmC,CACrC,CAAA;;AAGA,QAAA,MAAM,MAAK,GAAI,MAAM,CAAc,wBAAkC,CAAA,CAAA;;AAGrE,QAAA,MAAM,gBAAe,GAAI,MAAM,CAAuB,qBAA+B,CAAA,CAAA;AAErF;;;;AAIE;AACF,QAAA,MAAM,QAAO,GAAI,QAAQ,CAA8B,MAAM;AAC3D,YAAA,IAAI,KAAK,CAAC,KAAI,KAAM,CAAC,EAAE;AACrB,gBAAA,OAAO,MAAO,CAAC,KAAK,EAAE,QAAO,CAAA;AAC/B,aAAA;AACA,YAAA,OAAO,gBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAO,CAAA;AAC1D,SAAC,CAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAA4B,MAC1D,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,OAAM,IAAK,OAAQ,KAAI,gBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CACnF,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,aAAc,GAAE,CAAC,OAAsB,KAAK;AAChD,YAAA,mBAAoB,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAA,CAAA;AAC3C,SAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,iBAAgB,GAAI,CAAC,OAAsB,KAAK;AACpD,YAAA,OAAO,eAAe,CAAC,KAAI,KAAM,OAAM,CAAA;AACzC,SAAA,CAAA;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,iBAAiB,GAAA;AACxB,YAAA,MAAM,YAAY;gBAChB,QAAQ,EAAE,QAAQ,CAAC,KAAK;gBACxB,eAAe,EAAE,eAAe,CAAC,KAAK;gBACtC,aAAa;aACf,CAAA;YACA,OAAO,MAAK,IAAK,QAAQ,CAAC,KAAI,GAAI,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAE,GAAE,EAAC,CAAA;SACrE;AAEA;AAC+E;QAC/E,MAAM,cAAe,GAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,EAAE,aAAc,EAAA,CAAA;AAC5E,QAAA,QAAQ,KAAK,CAAC,OAAM,GAAI,iBAAkB,GAAE,cAAc,EAAyB;KACpF;AACF,CAAA,CAAA;;;;"}

package/js/components/scroll/use-scroll.js CHANGED Viewed

@@ -120,7 +120,6 @@ function useScroll(props, { emit }, scrollEl) {
         // eslint-disable-next-line ts/no-floating-promises
         nextTick().then(() => {
             if (!scrollEl.value) {
-                // TODO Replace with Empathy's logger
                 console.warn('[useScroll]', 'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.');
             }
             else {

package/js/components/scroll/use-scroll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-scroll.js","sources":["../../../../src/components/scroll/use-scroll.ts"],"sourcesContent":["import type { Ref, SetupContext } from 'vue'\nimport type { XEvent } from '../../wiring/events.types'\nimport type { ScrollDirection } from './scroll.types'\nimport { isArray } from '@empathyco/x-utils'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport { throttle } from '../../utils/throttle'\n\n/*\n Composable to share Scroll logic.\n \n @param props - Composable props.\n * @param context - Component setup context.\n * @param scrollEl - The scrolling container reference.\n * @returns A throttled version of the function to store the scroll data.\n * @public\n /\nexport function useScroll(\n props: {\n /\n Distance to the end of the scroll that when reached will emit the\n * `scroll:about-to-end` event.\n \n @public\n /\n distanceToBottom: number\n /\n Positive vertical distance to still consider that the element is the first one visible.\n * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n * will still be considered the first one.\n /\n firstElementThresholdPx: number\n /\n Time duration to ignore the subsequent scroll events after an emission.\n * Higher values will decrease events precision but can prevent performance issues.\n \n @public\n /\n throttleMs: number\n /\n If true (default), sets the scroll position to the top when certain events are emitted.\n \n @public\n /\n resetOnChange: boolean\n /\n List of events that should reset the scroll when emitted.\n \n @public\n /\n resetOn: XEvent \| XEvent[]\n },\n { emit }: SetupContext<any>,\n scrollEl: Ref<HTMLElement \| undefined>,\n) {\n /\n Property for getting the client height of scroll.\n \n @internal\n /\n const clientHeight = ref(0)\n\n /\n Property for getting the current position of scroll.\n \n @internal\n /\n const currentPosition = ref(0)\n\n /\n Property for getting the previous position of scroll.\n \n @internal\n /\n const previousPosition = ref(0)\n\n /\n Property for getting the scroll height.\n \n @internal\n /\n const scrollHeight = ref(0)\n /\n Flag to know if the property clientHeight is changing or gets the final value.\n \n @internal\n /\n const isClientHeightChanging = ref(false)\n\n /\n Property for setting the direction of scroll.\n \n @internal\n /\n const scrollDirection: Ref<ScrollDirection> = ref('UP')\n\n /\n Restores the clientHeight flag when clientHeight property stops changing.\n * Also sets a new previous position, before update the current one.\n \n @internal\n /\n const restoreClientHeightFlag = (): void => {\n isClientHeightChanging.value = false\n previousPosition.value = currentPosition.value\n }\n\n const throtteledCall = throttle(restoreClientHeightFlag, 100)\n\n /\n Updates scroll related properties.\n \n @internal\n /\n const storeScrollData = () => {\n if (scrollEl.value) {\n scrollHeight.value = scrollEl.value.scrollHeight\n clientHeight.value = scrollEl.value.clientHeight\n currentPosition.value = scrollEl.value.scrollTop\n }\n }\n\n /\n Throttled version of the function that stores the DOM scroll related properties.\n * The duration of the throttle is configured through the `throttleMs` prop passed as parameter.\n \n @returns A throttled version of the function to store the scroll data.\n * @internal\n /\n const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs))\n\n /\n Returns end position of scroll.\n \n @returns A number for knowing end position of scroll.\n * @internal\n /\n const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value)\n\n /\n Returns distance missing to endPosition position.\n \n @returns A number for knowing the distance missing to endPosition position.\n * @internal\n /\n const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value)\n\n /\n Returns `true` when there is no more content to scroll.\n \n @returns A boolean for knowing if the user scrolls to the end.\n * @internal\n /\n const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value)\n\n /\n Returns `true` when the scroll is at the initial position.\n \n @returns A boolean for knowing if the user scrolls to the start.\n * @internal\n /\n const hasScrollReachedStart = computed(() => currentPosition.value === 0)\n\n /\n Returns `true` when the amount of pixels scrolled is greater than\n * the `distanceToBottom` prop passed as parameter.\n \n @returns A boolean for knowing if the user is about to reaching to the end.\n * @internal\n /\n const hasScrollAlmostReachedEnd = computed(\n () => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value,\n )\n\n onMounted(() => {\n // eslint-disable-next-line ts/no-floating-promises\n nextTick().then(() => {\n if (!scrollEl.value) {\n // TODO Replace with Empathy's logger\n\n console.warn(\n '[useScroll]',\n\n 'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.',\n )\n } else {\n storeScrollData()\n }\n })\n })\n\n /\n Change the isClientHeightChanging flag when the property clientHeight is changing and\n * calls throttleledCall method.\n \n @internal\n /\n watch(\n clientHeight,\n () => {\n isClientHeightChanging.value = true\n\n throtteledCall()\n },\n { immediate: true },\n )\n\n /\n Emits the `scroll` event.\n \n @param _newScrollPosition - The new position of scroll.\n * @param oldScrollPosition - The old position of scroll.\n * @internal\n /\n watch(currentPosition, (_newScrollPosition: number, oldScrollPosition: number) => {\n emit('scroll', currentPosition.value)\n previousPosition.value = oldScrollPosition\n })\n\n /\n Sets direction of scroll based in {@link ScrollDirection} when the current position\n * has changed.\n \n @internal\n /\n watch(currentPosition, () => {\n if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) {\n scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP'\n }\n })\n\n /\n Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n \n @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n * @internal\n /\n watch(hasScrollReachedStart, (isScrollAtStart: boolean) => {\n emit('scroll:at-start', isScrollAtStart)\n })\n\n /\n Sets direction of scroll based in {@link ScrollDirection} when the current position\n * has changed.\n \n @internal\n /\n watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd: boolean) => {\n emit('scroll:almost-at-end', isScrollAlmostAtEnd)\n })\n\n /\n Emits the 'scroll:at-end' event when the user reaches the end.\n \n @param isScrollAtEnd - For knowing if the user reaches at end.\n * @internal\n /\n watch(hasScrollReachedEnd, (isScrollAtEnd: boolean) => {\n emit('scroll:at-end', isScrollAtEnd)\n })\n\n /\n Emits the `scroll:direction-change` event when the scrolling direction has changed.\n \n @param direction - The new direction of scroll.\n * @internal\n /\n watch(scrollDirection, (direction: ScrollDirection) => {\n if (!isClientHeightChanging.value) {\n emit('scroll:direction-change', direction)\n }\n })\n\n /\n Resets the scroll position.\n \n @internal\n */\n const $x = use$x()\n const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn]\n resetOnEvents.forEach(event =>\n // eslint-disable-next-line ts/no-misused-promises\n $x.on(event, false).subscribe(async () =>\n nextTick().then(() => {\n if (props.resetOnChange) {\n scrollEl.value?.scrollTo({ top: 0 })\n }\n }),\n ),\n )\n\n return { throttledStoreScrollData }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"use-scroll.js","sources":["../../../../src/components/scroll/use-scroll.ts"],"sourcesContent":["import type { Ref, SetupContext } from 'vue'\nimport type { XEvent } from '../../wiring/events.types'\nimport type { ScrollDirection } from './scroll.types'\nimport { isArray } from '@empathyco/x-utils'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport { throttle } from '../../utils/throttle'\n\n/*\n Composable to share Scroll logic.\n \n @param props - Composable props.\n * @param context - Component setup context.\n * @param scrollEl - The scrolling container reference.\n * @returns A throttled version of the function to store the scroll data.\n * @public\n /\nexport function useScroll(\n props: {\n /\n Distance to the end of the scroll that when reached will emit the\n * `scroll:about-to-end` event.\n \n @public\n /\n distanceToBottom: number\n /\n Positive vertical distance to still consider that the element is the first one visible.\n * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n * will still be considered the first one.\n /\n firstElementThresholdPx: number\n /\n Time duration to ignore the subsequent scroll events after an emission.\n * Higher values will decrease events precision but can prevent performance issues.\n \n @public\n /\n throttleMs: number\n /\n If true (default), sets the scroll position to the top when certain events are emitted.\n \n @public\n /\n resetOnChange: boolean\n /\n List of events that should reset the scroll when emitted.\n \n @public\n /\n resetOn: XEvent \| XEvent[]\n },\n { emit }: SetupContext<any>,\n scrollEl: Ref<HTMLElement \| undefined>,\n) {\n /\n Property for getting the client height of scroll.\n \n @internal\n /\n const clientHeight = ref(0)\n\n /\n Property for getting the current position of scroll.\n \n @internal\n /\n const currentPosition = ref(0)\n\n /\n Property for getting the previous position of scroll.\n \n @internal\n /\n const previousPosition = ref(0)\n\n /\n Property for getting the scroll height.\n \n @internal\n /\n const scrollHeight = ref(0)\n /\n Flag to know if the property clientHeight is changing or gets the final value.\n \n @internal\n /\n const isClientHeightChanging = ref(false)\n\n /\n Property for setting the direction of scroll.\n \n @internal\n /\n const scrollDirection: Ref<ScrollDirection> = ref('UP')\n\n /\n Restores the clientHeight flag when clientHeight property stops changing.\n * Also sets a new previous position, before update the current one.\n \n @internal\n /\n const restoreClientHeightFlag = (): void => {\n isClientHeightChanging.value = false\n previousPosition.value = currentPosition.value\n }\n\n const throtteledCall = throttle(restoreClientHeightFlag, 100)\n\n /\n Updates scroll related properties.\n \n @internal\n /\n const storeScrollData = () => {\n if (scrollEl.value) {\n scrollHeight.value = scrollEl.value.scrollHeight\n clientHeight.value = scrollEl.value.clientHeight\n currentPosition.value = scrollEl.value.scrollTop\n }\n }\n\n /\n Throttled version of the function that stores the DOM scroll related properties.\n * The duration of the throttle is configured through the `throttleMs` prop passed as parameter.\n \n @returns A throttled version of the function to store the scroll data.\n * @internal\n /\n const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs))\n\n /\n Returns end position of scroll.\n \n @returns A number for knowing end position of scroll.\n * @internal\n /\n const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value)\n\n /\n Returns distance missing to endPosition position.\n \n @returns A number for knowing the distance missing to endPosition position.\n * @internal\n /\n const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value)\n\n /\n Returns `true` when there is no more content to scroll.\n \n @returns A boolean for knowing if the user scrolls to the end.\n * @internal\n /\n const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value)\n\n /\n Returns `true` when the scroll is at the initial position.\n \n @returns A boolean for knowing if the user scrolls to the start.\n * @internal\n /\n const hasScrollReachedStart = computed(() => currentPosition.value === 0)\n\n /\n Returns `true` when the amount of pixels scrolled is greater than\n * the `distanceToBottom` prop passed as parameter.\n \n @returns A boolean for knowing if the user is about to reaching to the end.\n * @internal\n /\n const hasScrollAlmostReachedEnd = computed(\n () => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value,\n )\n\n onMounted(() => {\n // eslint-disable-next-line ts/no-floating-promises\n nextTick().then(() => {\n if (!scrollEl.value) {\n console.warn(\n '[useScroll]',\n 'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.',\n )\n } else {\n storeScrollData()\n }\n })\n })\n\n /\n Change the isClientHeightChanging flag when the property clientHeight is changing and\n * calls throttleledCall method.\n \n @internal\n /\n watch(\n clientHeight,\n () => {\n isClientHeightChanging.value = true\n\n throtteledCall()\n },\n { immediate: true },\n )\n\n /\n Emits the `scroll` event.\n \n @param _newScrollPosition - The new position of scroll.\n * @param oldScrollPosition - The old position of scroll.\n * @internal\n /\n watch(currentPosition, (_newScrollPosition: number, oldScrollPosition: number) => {\n emit('scroll', currentPosition.value)\n previousPosition.value = oldScrollPosition\n })\n\n /\n Sets direction of scroll based in {@link ScrollDirection} when the current position\n * has changed.\n \n @internal\n /\n watch(currentPosition, () => {\n if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) {\n scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP'\n }\n })\n\n /\n Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n \n @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n * @internal\n /\n watch(hasScrollReachedStart, (isScrollAtStart: boolean) => {\n emit('scroll:at-start', isScrollAtStart)\n })\n\n /\n Sets direction of scroll based in {@link ScrollDirection} when the current position\n * has changed.\n \n @internal\n /\n watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd: boolean) => {\n emit('scroll:almost-at-end', isScrollAlmostAtEnd)\n })\n\n /\n Emits the 'scroll:at-end' event when the user reaches the end.\n \n @param isScrollAtEnd - For knowing if the user reaches at end.\n * @internal\n /\n watch(hasScrollReachedEnd, (isScrollAtEnd: boolean) => {\n emit('scroll:at-end', isScrollAtEnd)\n })\n\n /\n Emits the `scroll:direction-change` event when the scrolling direction has changed.\n \n @param direction - The new direction of scroll.\n * @internal\n /\n watch(scrollDirection, (direction: ScrollDirection) => {\n if (!isClientHeightChanging.value) {\n emit('scroll:direction-change', direction)\n }\n })\n\n /\n Resets the scroll position.\n \n @internal\n */\n const $x = use$x()\n const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn]\n resetOnEvents.forEach(event =>\n // eslint-disable-next-line ts/no-misused-promises\n $x.on(event, false).subscribe(async () =>\n nextTick().then(() => {\n if (props.resetOnChange) {\n scrollEl.value?.scrollTo({ top: 0 })\n }\n }),\n ),\n )\n\n return { throttledStoreScrollData }\n}\n"],"names":[],"mappings":"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"}

package/js/store/utils/fetch-and-save-action.utils.js CHANGED Viewed

@@ -9,9 +9,7 @@ import { cancellablePromise, CancelSymbol } from '../../utils/cancellable-promis
  * @public
  * @returns An action to fetch and save some data, and an action to cancel the last request.
  */
-function createFetchAndSaveActions({ fetch, onSuccess,
-// TODO add logger
-onError = console.error, onCancel, }) {
+function createFetchAndSaveActions({ fetch, onSuccess, onError = console.error, onCancel, }) {
     let cancelPreviousRequest;
     /**
      * Called asynchronously after a response has been received.

package/js/store/utils/fetch-and-save-action.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fetch-and-save-action.utils.js","sources":["../../../../src/store/utils/fetch-and-save-action.utils.ts"],"sourcesContent":["import type { XActionContext } from '../actions.types'\nimport type { StatusMutations, StatusState } from './status-store.utils'\nimport { cancellablePromise, CancelSymbol } from '../../utils/cancellable-promise'\n\n/*\n Utility to create an action that requests and save some data asynchronously, with the\n * option to cancel the request at any moment. This factory provides with the standard flow\n * for requesting, cancelling, handling errors for a module, while also taking care of its status.\n \n @param hooks - The {@link FetchAndSaveHooks} hooks to create the action.\n * @public\n * @returns An action to fetch and save some data, and an action to cancel the last request.\n /\nexport function createFetchAndSaveActions<\n // Using `object` type to ensure no actions/getters can be used.\n Context extends XActionContext<StatusState, object, StatusMutations, object>,\n Request,\n Response,\n>({\n fetch,\n onSuccess,\n ~~// TODO add logger\n~~ onError = console.error,\n onCancel,\n}: FetchAndSaveHooks<Context, Request, Response>): FetchAndSaveActions<Context, Request> {\n let cancelPreviousRequest: undefined \| (() => void)\n\n /\n Called asynchronously after a response has been received.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @param response - The fetch response.\n * @returns A Promise that resolves after handling the response.\n /\n async function handleResponse(context: Context, response: Response): Promise<void> {\n return Promise.resolve(onSuccess(context, response)).then(() => {\n context.commit('setStatus', 'success')\n })\n }\n\n /\n Called immediately after a request has been cancelled.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n /\n function handleCancel(context: Context): void {\n cancelPreviousRequest = undefined\n context.commit('setStatus', 'success')\n onCancel?.()\n }\n\n /\n Called asynchronously whenever an error happens in the fetch and save flow.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @param error - The error information.\n /\n function handleError(context: Context, error: unknown): void {\n if (error !== CancelSymbol) {\n context.commit('setStatus', 'error')\n onError(error)\n }\n }\n\n /* @see FetchAndSaveActions.fetchAndSave /\n async function fetchAndSave(context: Context, request: Request): Promise<void> {\n cancelPrevious()\n context.commit('setStatus', 'loading')\n const { promise, cancel } = cancellablePromise(fetch(context, request), () => {\n handleCancel(context)\n })\n\n cancelPreviousRequest = cancel\n return promise\n .then(async response => handleResponse(context, response))\n .catch(error => handleError(context, error))\n }\n\n /* @see FetchAndSaveActions.cancelPrevious /\n function cancelPrevious(): void {\n cancelPreviousRequest?.()\n }\n\n return {\n fetchAndSave,\n cancelPrevious,\n }\n}\n\n/\n Options to use with the {@link createFetchAndSaveActions} factory.\n \n @public\n /\nexport interface FetchAndSaveHooks<\n // Using `object` type to ensure no actions/getters can be used.\n Context extends XActionContext<StatusState, object, StatusMutations, object>,\n Request,\n Response,\n> {\n /\n Retrieves and returns asynchronously some data.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @param request - The request object used for fetching.\n * @returns A Promise resolved with the response of the fetch request.\n /\n fetch: (context: Context, request: Request) => Promise<Response>\n /\n Asynchronous callback executed when the {@link FetchAndSaveHooks.fetch} is\n * performed successfully.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @param response - The data returned by {@link FetchAndSaveHooks.fetch}.\n /\n onSuccess: (context: Context, response: Response) => void\n /\n Asynchronous callback executed when either the {@link FetchAndSaveHooks.fetch}\n * or {@link FetchAndSaveHooks.onSuccess} methods fail.\n \n @param error - The error that triggered this callback.\n /\n onError?: (error: unknown) => void\n /\n Synchronous callback executed when the request is cancelled. This can happen mainly for two\n * reasons:\n * - The {@link FetchAndSaveActions.cancelPrevious} action is dispatched.\n * - A new {@link FetchAndSaveActions.fetchAndSave} is dispatched before the previous one was\n * resolved.\n /\n onCancel?: () => void\n}\n\n/\n Actions returned from the {@link createFetchAndSaveActions}.\n \n @public\n /\nexport interface FetchAndSaveActions<\n // Using `object` type to ensure no actions/getters can be used.\n Context extends XActionContext<StatusState, object, StatusMutations, object>,\n Request,\n> {\n /\n Action that requests and saves the response.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @returns A promise that resolves after saving the response.\n /\n fetchAndSave: (context: Context, request: Request) => void \| Promise<void>\n /\n Action that cancels the previous request call if it stills in progress.\n */\n cancelPrevious: () => void\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;AAQG;~~SACa~~,yBAAyB,CAKvC,EACA,KAAK,EACL,SAAS~~;AACT;AACA~~,OAAO,GAAG,OAAO,CAAC,KAAK,EACvB,QAAQ,GACsC,EAAA;AAC9C,IAAA,IAAI,qBAA+C,CAAA;AAEnD;;;;;;;AAOG;AACH,IAAA,eAAe,cAAc,CAAC,OAAgB,EAAE,QAAkB,EAAA;AAChE,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAK;AAC7D,YAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AACxC,SAAC,CAAC,CAAA;KACH;AAED;;;;;AAKG;IACH,SAAS,YAAY,CAAC,OAAgB,EAAA;QACpC,qBAAqB,GAAG,SAAS,CAAA;AACjC,QAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;QACtC,QAAQ,IAAI,CAAA;KACb;AAED;;;;;;AAMG;AACH,IAAA,SAAS,WAAW,CAAC,OAAgB,EAAE,KAAc,EAAA;QACnD,IAAI,KAAK,KAAK,YAAY,EAAE;AAC1B,YAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAA;YACpC,OAAO,CAAC,KAAK,CAAC,CAAA;AACf,SAAA;KACF;;AAGD,IAAA,eAAe,YAAY,CAAC,OAAgB,EAAE,OAAgB,EAAA;AAC5D,QAAA,cAAc,EAAE,CAAA;AAChB,QAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AACtC,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,MAAK;YAC3E,YAAY,CAAC,OAAO,CAAC,CAAA;AACvB,SAAC,CAAC,CAAA;QAEF,qBAAqB,GAAG,MAAM,CAAA;AAC9B,QAAA,OAAO,OAAO;AACX,aAAA,IAAI,CAAC,OAAM,QAAQ,KAAI,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AACzD,aAAA,KAAK,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;KAC/C;;AAGD,IAAA,SAAS,cAAc,GAAA;QACrB,qBAAqB,IAAI,CAAA;KAC1B;IAED,OAAO;QACL,YAAY;QACZ,cAAc;KACf,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"fetch-and-save-action.utils.js","sources":["../../../../src/store/utils/fetch-and-save-action.utils.ts"],"sourcesContent":["import type { XActionContext } from '../actions.types'\nimport type { StatusMutations, StatusState } from './status-store.utils'\nimport { cancellablePromise, CancelSymbol } from '../../utils/cancellable-promise'\n\n/*\n Utility to create an action that requests and save some data asynchronously, with the\n * option to cancel the request at any moment. This factory provides with the standard flow\n * for requesting, cancelling, handling errors for a module, while also taking care of its status.\n \n @param hooks - The {@link FetchAndSaveHooks} hooks to create the action.\n * @public\n * @returns An action to fetch and save some data, and an action to cancel the last request.\n /\nexport function createFetchAndSaveActions<\n // Using `object` type to ensure no actions/getters can be used.\n Context extends XActionContext<StatusState, object, StatusMutations, object>,\n Request,\n Response,\n>({\n fetch,\n onSuccess,\n onError = console.error,\n onCancel,\n}: FetchAndSaveHooks<Context, Request, Response>): FetchAndSaveActions<Context, Request> {\n let cancelPreviousRequest: undefined \| (() => void)\n\n /\n Called asynchronously after a response has been received.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @param response - The fetch response.\n * @returns A Promise that resolves after handling the response.\n /\n async function handleResponse(context: Context, response: Response): Promise<void> {\n return Promise.resolve(onSuccess(context, response)).then(() => {\n context.commit('setStatus', 'success')\n })\n }\n\n /\n Called immediately after a request has been cancelled.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n /\n function handleCancel(context: Context): void {\n cancelPreviousRequest = undefined\n context.commit('setStatus', 'success')\n onCancel?.()\n }\n\n /\n Called asynchronously whenever an error happens in the fetch and save flow.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @param error - The error information.\n /\n function handleError(context: Context, error: unknown): void {\n if (error !== CancelSymbol) {\n context.commit('setStatus', 'error')\n onError(error)\n }\n }\n\n /* @see FetchAndSaveActions.fetchAndSave /\n async function fetchAndSave(context: Context, request: Request): Promise<void> {\n cancelPrevious()\n context.commit('setStatus', 'loading')\n const { promise, cancel } = cancellablePromise(fetch(context, request), () => {\n handleCancel(context)\n })\n\n cancelPreviousRequest = cancel\n return promise\n .then(async response => handleResponse(context, response))\n .catch(error => handleError(context, error))\n }\n\n /* @see FetchAndSaveActions.cancelPrevious /\n function cancelPrevious(): void {\n cancelPreviousRequest?.()\n }\n\n return {\n fetchAndSave,\n cancelPrevious,\n }\n}\n\n/\n Options to use with the {@link createFetchAndSaveActions} factory.\n \n @public\n /\nexport interface FetchAndSaveHooks<\n // Using `object` type to ensure no actions/getters can be used.\n Context extends XActionContext<StatusState, object, StatusMutations, object>,\n Request,\n Response,\n> {\n /\n Retrieves and returns asynchronously some data.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @param request - The request object used for fetching.\n * @returns A Promise resolved with the response of the fetch request.\n /\n fetch: (context: Context, request: Request) => Promise<Response>\n /\n Asynchronous callback executed when the {@link FetchAndSaveHooks.fetch} is\n * performed successfully.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @param response - The data returned by {@link FetchAndSaveHooks.fetch}.\n /\n onSuccess: (context: Context, response: Response) => void\n /\n Asynchronous callback executed when either the {@link FetchAndSaveHooks.fetch}\n * or {@link FetchAndSaveHooks.onSuccess} methods fail.\n \n @param error - The error that triggered this callback.\n /\n onError?: (error: unknown) => void\n /\n Synchronous callback executed when the request is cancelled. This can happen mainly for two\n * reasons:\n * - The {@link FetchAndSaveActions.cancelPrevious} action is dispatched.\n * - A new {@link FetchAndSaveActions.fetchAndSave} is dispatched before the previous one was\n * resolved.\n /\n onCancel?: () => void\n}\n\n/\n Actions returned from the {@link createFetchAndSaveActions}.\n \n @public\n /\nexport interface FetchAndSaveActions<\n // Using `object` type to ensure no actions/getters can be used.\n Context extends XActionContext<StatusState, object, StatusMutations, object>,\n Request,\n> {\n /\n Action that requests and saves the response.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the\n * actions, provided by Vuex.\n * @returns A promise that resolves after saving the response.\n /\n fetchAndSave: (context: Context, request: Request) => void \| Promise<void>\n /\n Action that cancels the previous request call if it stills in progress.\n */\n cancelPrevious: () => void\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;AAQG;AACa,SAAA,yBAAyB,CAKvC,EACA,KAAK,EACL,SAAS,EACT,OAAO,GAAG,OAAO,CAAC,KAAK,EACvB,QAAQ,GACsC,EAAA;AAC9C,IAAA,IAAI,qBAA+C,CAAA;AAEnD;;;;;;;AAOG;AACH,IAAA,eAAe,cAAc,CAAC,OAAgB,EAAE,QAAkB,EAAA;AAChE,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAK;AAC7D,YAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AACxC,SAAC,CAAC,CAAA;KACH;AAED;;;;;AAKG;IACH,SAAS,YAAY,CAAC,OAAgB,EAAA;QACpC,qBAAqB,GAAG,SAAS,CAAA;AACjC,QAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;QACtC,QAAQ,IAAI,CAAA;KACb;AAED;;;;;;AAMG;AACH,IAAA,SAAS,WAAW,CAAC,OAAgB,EAAE,KAAc,EAAA;QACnD,IAAI,KAAK,KAAK,YAAY,EAAE;AAC1B,YAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAA;YACpC,OAAO,CAAC,KAAK,CAAC,CAAA;AACf,SAAA;KACF;;AAGD,IAAA,eAAe,YAAY,CAAC,OAAgB,EAAE,OAAgB,EAAA;AAC5D,QAAA,cAAc,EAAE,CAAA;AAChB,QAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AACtC,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,MAAK;YAC3E,YAAY,CAAC,OAAO,CAAC,CAAA;AACvB,SAAC,CAAC,CAAA;QAEF,qBAAqB,GAAG,MAAM,CAAA;AAC9B,QAAA,OAAO,OAAO;AACX,aAAA,IAAI,CAAC,OAAM,QAAQ,KAAI,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AACzD,aAAA,KAAK,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;KAC/C;;AAGD,IAAA,SAAS,cAAc,GAAA;QACrB,qBAAqB,IAAI,CAAA;KAC1B;IAED,OAAO;QACL,YAAY;QACZ,cAAc;KACf,CAAA;AACH;;;;"}

package/js/x-modules/facets/composables/use-filters-injection.js CHANGED Viewed

@@ -26,7 +26,6 @@ function useFiltersInjection(props) {
     const propOrInjectedFilters = computed(() => {
         return (props.filters ??
             injectedFilters?.value ??
-            //TODO: add here logger
             console.warn('It is necessary to pass a prop or inject the list of filters'));
     });
     /**

package/js/x-modules/facets/composables/use-filters-injection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-filters-injection.js","sources":["../../../../../src/x-modules/facets/composables/use-filters-injection.ts"],"sourcesContent":["import type { Filter, HierarchicalFilter } from '@empathyco/x-types'\nimport type { Ref } from 'vue'\nimport { isHierarchicalFilter } from '@empathyco/x-types'\nimport { computed, inject } from 'vue'\nimport { isArrayEmpty } from '../../../utils/array'\n\n/*\n Composable to share filters injection logic.\n \n @param props - Composable props.\n * @returns An array of filters.\n * @public\n /\nexport function useFiltersInjection(props: {\n /* The list of filters to be rendered as slots. /\n filters?: Filter[]\n /\n This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n /\n parentId?: Filter['id']\n}) {\n /*\n The injected filters array.\n \n @public\n /\n const injectedFilters = inject<Ref<Filter[]> \| undefined>('filters', undefined)\n\n /\n An array of filters formed by those that are passed through prop or injected.\n \n @returns An array of filters.\n \n @internal\n /\n const propOrInjectedFilters = computed((): void \| Filter[] => {\n return (\n props.filters ??\n injectedFilters?.value ??\n ~~//TODO: add here logger\n\n~~ console.warn('It is necessary to pass a prop or inject the list of filters')\n )\n })\n\n /\n In the case that the filters are {@link @empathyco/x-types#HierarchicalFilter}, this method\n * removes from the filter list passed as a param, the filters that are not part of the level of\n * the hierarchy, depending on the value of the `parentId` prop. In case this prop is undefined,\n * then only the first level of filters hierarchy are returned. In the case the prop `parentId` is\n * defined, then only the filters with the same `parentId` are returned.\n \n @param filters - The list of the filters to apply the filter.\n * @returns The list of the filters filtered by parentId.\n * @internal\n /\n const filterByParentId = (filters: Filter[]): Filter[] => {\n if (!isArrayEmpty(filters) && isHierarchicalFilter(filters[0])) {\n return (filters as HierarchicalFilter[]).filter(\n filter => filter.parentId === (props.parentId ?? null),\n )\n } else {\n return filters\n }\n }\n\n /\n The prop or injected filters array, filtered by parentId if they are\n * {@link @empathyco/x-types#HierarchicalFilter}.\n \n @returns An array of filters.\n \n @internal\n */\n return computed<Filter[]>(() => filterByParentId(propOrInjectedFilters.value as Filter[]))\n}\n"],"names":[],"mappings":";;;;AAMA;;;;;;AAMG;AACG,SAAU,mBAAmB,CAAC,KAQnC,EAAA;AACC;;;;AAIG;IACH,MAAM,eAAe,GAAG,MAAM,CAA4B,SAAS,EAAE,SAAS,CAAC,CAAA;AAE/E;;;;;;AAMG;AACH,IAAA,MAAM,qBAAqB,GAAG,QAAQ,CAAC,MAAsB;QAC3D,QACE,KAAK,CAAC,OAAO;AACb,YAAA,eAAe,EAAE,KAAK~~;;AAGtB~~,YAAA,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC,EAC7E;AACH,KAAC,CAAC,CAAA;AAEF;;;;;;;;;;AAUG;AACH,IAAA,MAAM,gBAAgB,GAAG,CAAC,OAAiB,KAAc;AACvD,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;YAC9D,OAAQ,OAAgC,CAAC,MAAM,CAC7C,MAAM,IAAI,MAAM,CAAC,QAAQ,MAAM,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,CACvD,CAAA;AACF,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,OAAO,CAAA;AACf,SAAA;AACH,KAAC,CAAA;AAED;;;;;;;AAOG;AACH,IAAA,OAAO,QAAQ,CAAW,MAAM,gBAAgB,CAAC,qBAAqB,CAAC,KAAiB,CAAC,CAAC,CAAA;AAC5F;;;;"}
1	+ {"version":3,"file":"use-filters-injection.js","sources":["../../../../../src/x-modules/facets/composables/use-filters-injection.ts"],"sourcesContent":["import type { Filter, HierarchicalFilter } from '@empathyco/x-types'\nimport type { Ref } from 'vue'\nimport { isHierarchicalFilter } from '@empathyco/x-types'\nimport { computed, inject } from 'vue'\nimport { isArrayEmpty } from '../../../utils/array'\n\n/*\n Composable to share filters injection logic.\n \n @param props - Composable props.\n * @returns An array of filters.\n * @public\n /\nexport function useFiltersInjection(props: {\n /* The list of filters to be rendered as slots. /\n filters?: Filter[]\n /\n This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n /\n parentId?: Filter['id']\n}) {\n /*\n The injected filters array.\n \n @public\n /\n const injectedFilters = inject<Ref<Filter[]> \| undefined>('filters', undefined)\n\n /\n An array of filters formed by those that are passed through prop or injected.\n \n @returns An array of filters.\n \n @internal\n /\n const propOrInjectedFilters = computed((): void \| Filter[] => {\n return (\n props.filters ??\n injectedFilters?.value ??\n console.warn('It is necessary to pass a prop or inject the list of filters')\n )\n })\n\n /\n In the case that the filters are {@link @empathyco/x-types#HierarchicalFilter}, this method\n * removes from the filter list passed as a param, the filters that are not part of the level of\n * the hierarchy, depending on the value of the `parentId` prop. In case this prop is undefined,\n * then only the first level of filters hierarchy are returned. In the case the prop `parentId` is\n * defined, then only the filters with the same `parentId` are returned.\n \n @param filters - The list of the filters to apply the filter.\n * @returns The list of the filters filtered by parentId.\n * @internal\n /\n const filterByParentId = (filters: Filter[]): Filter[] => {\n if (!isArrayEmpty(filters) && isHierarchicalFilter(filters[0])) {\n return (filters as HierarchicalFilter[]).filter(\n filter => filter.parentId === (props.parentId ?? null),\n )\n } else {\n return filters\n }\n }\n\n /\n The prop or injected filters array, filtered by parentId if they are\n * {@link @empathyco/x-types#HierarchicalFilter}.\n \n @returns An array of filters.\n \n @internal\n */\n return computed<Filter[]>(() => filterByParentId(propOrInjectedFilters.value as Filter[]))\n}\n"],"names":[],"mappings":";;;;AAMA;;;;;;AAMG;AACG,SAAU,mBAAmB,CAAC,KAQnC,EAAA;AACC;;;;AAIG;IACH,MAAM,eAAe,GAAG,MAAM,CAA4B,SAAS,EAAE,SAAS,CAAC,CAAA;AAE/E;;;;;;AAMG;AACH,IAAA,MAAM,qBAAqB,GAAG,QAAQ,CAAC,MAAsB;QAC3D,QACE,KAAK,CAAC,OAAO;AACb,YAAA,eAAe,EAAE,KAAK;AACtB,YAAA,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC,EAC7E;AACH,KAAC,CAAC,CAAA;AAEF;;;;;;;;;;AAUG;AACH,IAAA,MAAM,gBAAgB,GAAG,CAAC,OAAiB,KAAc;AACvD,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;YAC9D,OAAQ,OAAgC,CAAC,MAAM,CAC7C,MAAM,IAAI,MAAM,CAAC,QAAQ,MAAM,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,CACvD,CAAA;AACF,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,OAAO,CAAA;AACf,SAAA;AACH,KAAC,CAAA;AAED;;;;;;;AAOG;AACH,IAAA,OAAO,QAAQ,CAAW,MAAM,gBAAgB,CAAC,qBAAqB,CAAC,KAAiB,CAAC,CAAC,CAAA;AAC5F;;;;"}

package/js/x-modules/tagging/service/external-tagging.service.js CHANGED Viewed

@@ -134,7 +134,6 @@ class DefaultExternalTaggingService {
      */
     showWarningMessage() {
         if (this.storageKey !== 'url') {
-            //TODO: add here logger
             console.warn('No product id was provided but the storage was not configured to use the url');
         }
     }
@@ -162,7 +161,6 @@ class DefaultExternalTaggingService {
             // eslint-disable-next-line unused-imports/no-unused-vars
         }
         catch (_error) {
-            //TODO: add here logger
             console.warn(`There was a problem with url ${url}`);
             return url;
         }