@empathyco/x-components 6.0.0-alpha.6 → 6.0.0-alpha.61

package/js/components/column-picker/base-column-picker-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onBeforeMount, PropType, ref, watch } from 'vue';\n  import { use$x } from '../../composables/use-$x';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseColumnPickerList',\n    components: { BaseEventButton },\n    props: {\n      /** An array of numbers that represents the number of columns to render. */\n      columns: {\n        type: Array as PropType<number[]>,\n        required: true\n      },\n      /** The value of the selected columns number. */\n      modelValue: Number,\n      /** Class inherited by each button. */\n      buttonClass: String\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      const $x = use$x();\n\n      const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0]);\n      const selectedColumns = ref(providedSelectedColumns.value);\n\n      /**\n       * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n       *\n       * @param column - Column number provided.\n       */\n      function emitColumnsNumberProvided(column: number) {\n        selectedColumns.value = column;\n        $x.emit('ColumnsNumberProvided', column);\n      }\n\n      /**\n       * Emits `update:modelValue` with the column selected.\n       *\n       * @param column - Column number selected.\n       */\n      function emitUpdateModelValue(column: number) {\n        if (props.modelValue !== column) {\n          emit('update:modelValue', column);\n        }\n      }\n\n      watch(providedSelectedColumns, emitColumnsNumberProvided);\n      watch(selectedColumns, emitUpdateModelValue);\n\n      $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column));\n\n      /**\n       * Synchronizes the columns number before mounting the component. If the real number of selected\n       * columns equals the provided columns, it emits the event to sync it with every other component.\n       * If it is not equal it means that the user has already selected a number of columns, so we emit\n       * a `update:modelValue` event so developers can sync the provided value.\n       */\n      onBeforeMount(() => {\n        if (selectedColumns.value === providedSelectedColumns.value) {\n          emitColumnsNumberProvided(selectedColumns.value);\n        } else {\n          emitUpdateModelValue(selectedColumns.value);\n        }\n      });\n\n      /**\n       * Maps the column to an object containing: the `column` and `CSS classes`.\n       *\n       * @returns An array of objects containing the column number and CSS classes.\n       */\n      const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n        props.columns.map(column => ({\n          column,\n          cssClasses: [\n            `x-column-picker-list__button--${column}-cols`,\n            { 'x-selected': selectedColumns.value === column }\n          ],\n          isSelected: selectedColumns.value === column,\n          events: {\n            UserClickedColumnPicker: column,\n            ColumnsNumberProvided: column\n          }\n        }))\n      );\n\n      return { columnsWithCssClasses };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList,\n      ChevronRightIcon\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item. The event payload is the number of columns\n  that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_Fragment","_renderList","buttonClass","_withCtx","_createCommentVNode","_renderSlot","_mergeProps","columnsWithCssClasses"],"mappings":";;;;MACmD,UAAU,GAAA;AAAA,EAAqB,KAAK,EAAA,qCAAA;AAAA,EAAA,WAAA,EAAA,oBAAA;;;;qCAArFA,gBA+BM,CAAA,iBAAA,CAAA,CAAA;AAhCR,EAAA,OAAAC,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,KAAAD,SAAA,CAMM,IAkBkB,CAAA,EAAAC,kBAAA;AAAA,MAAAC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,qBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,EAAA,KAAA,KAAA;eAjBhBH,SAPR,EAAA,EAAAC,kBAAA;AAAA,UAOcC,QAAA;AAAA,UAAuC,EAAA,GAAA,EAAA,MAAA,EAAA;AAAA,UACpCE;AAAAA,YAAAA,WAAAA,CACA,0BAAuB,EAAA;AAAA,cAC/B,sBAAc,CAAmB,uCAAA,EAAA,CAAA,IAAA,CAAA,WAAA,EAAA,UAAA,CAAA,CAAA,CAAA;AAAA,cACjC,WAAQ,EAAA,sBAAA;AAAA,cACR,gBAAU,UAAW,CAAA,QAAA,EAAA;AAAA,cACtB,MAAA;AAAA,cAAA,YAAA,EAAA,CAAA,EAAA,MAAA,CAAA,QAAA,CAAA;AAbR,cAAA,IAAA,EAAA,UAAA;AAAA,aAAA,EAAA;uBAqBQC,OAEO,CAAA,MAAA;AAAA,gBAAAC,kBAAA,CAvBf,wVAsBmB,CAAA;AAAA,gBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAtBnB,iBAAA,CAAA;AAAA,eAAA,CAAA;AA0BM,cAAA,CAAA,EAAA,CAAA;AAAA;AAAA,aAIY,EAAA,IAAA,EAAUC,CAAqB,OAAO,EAAA,cAAA,EAAA,QAAA,EAAA,YAAA,CAAA,CAAA;AAAA,YAAAH,kBAAA,CAA4B,qKA9BpF,CAAA;AAAA,YAAA,KAAA,KAAA,IAAA,CAAA,qBAAA,CAAA,MAAA,GAAA,CAAA,GAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,GAAAD,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onBeforeMount, PropType, ref, watch } from 'vue';\n  import { use$x } from '../../composables/use-$x';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseColumnPickerList',\n    components: { BaseEventButton },\n    props: {\n      /** An array of numbers that represents the number of columns to render. */\n      columns: {\n        type: Array as PropType<number[]>,\n        required: true\n      },\n      /** The value of the selected columns number. */\n      modelValue: Number,\n      /** Class inherited by each button. */\n      buttonClass: String\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      const $x = use$x();\n\n      const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0]);\n      const selectedColumns = ref(providedSelectedColumns.value);\n\n      /**\n       * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n       *\n       * @param column - Column number provided.\n       */\n      function emitColumnsNumberProvided(column: number) {\n        selectedColumns.value = column;\n        $x.emit('ColumnsNumberProvided', column);\n      }\n\n      /**\n       * Emits `update:modelValue` with the column selected.\n       *\n       * @param column - Column number selected.\n       */\n      function emitUpdateModelValue(column: number) {\n        if (props.modelValue !== column) {\n          emit('update:modelValue', column);\n        }\n      }\n\n      watch(providedSelectedColumns, emitColumnsNumberProvided);\n      watch(selectedColumns, emitUpdateModelValue);\n\n      $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column));\n\n      /**\n       * Synchronizes the columns number before mounting the component. If the real number of selected\n       * columns equals the provided columns, it emits the event to sync it with every other component.\n       * If it is not equal it means that the user has already selected a number of columns, so we emit\n       * a `update:modelValue` event so developers can sync the provided value.\n       */\n      onBeforeMount(() => {\n        if (selectedColumns.value === providedSelectedColumns.value) {\n          emitColumnsNumberProvided(selectedColumns.value);\n        } else {\n          emitUpdateModelValue(selectedColumns.value);\n        }\n      });\n\n      /**\n       * Maps the column to an object containing: the `column` and `CSS classes`.\n       *\n       * @returns An array of objects containing the column number and CSS classes.\n       */\n      const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n        props.columns.map(column => ({\n          column,\n          cssClasses: [\n            `x-column-picker-list__button--${column}-cols`,\n            { 'x-selected': selectedColumns.value === column }\n          ],\n          isSelected: selectedColumns.value === column,\n          events: {\n            UserClickedColumnPicker: column,\n            ColumnsNumberProvided: column\n          }\n        }))\n      );\n\n      return { columnsWithCssClasses };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList,\n      ChevronRightIcon\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item. The event payload is the number of columns\n  that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_Fragment","_renderList","buttonClass","_withCtx","_renderSlot","_mergeProps","_createCommentVNode"],"mappings":";;;;MACmD,UAAU,GAAA;AAAA,EAAqB,KAAK,EAAA,qCAAA;AAAA,EAAA,WAAA,EAAA,oBAAA;;;;qCAArFA,gBA+BM,CAAA,iBAAA,CAAA,CAAA;AAhCR,EAAA,OAAAC,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,KAAAD,SAAA,CAMM,IAkBkB,CAAA,EAAAC,kBAAA;AAAA,MAAAC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,qBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,EAAA,KAAA,KAAA;eAjBhBH,SAPR,EAAA,EAAAC,kBAAA;AAAA,UAOcC,QAAA;AAAA,UAAuC,EAAA,GAAA,EAAA,MAAA,EAAA;AAAA,UACpCE;AAAAA,YAAAA,WAAAA,CACA,0BAAuB,EAAA;AAAA,cAC/B,sBAAc,CAAmB,uCAAA,EAAA,CAAA,IAAA,CAAA,WAAA,EAAA,UAAA,CAAA,CAAA,CAAA;AAAA,cACjC,WAAQ,EAAA,sBAAA;AAAA,cACR,gBAAU,UAAW,CAAA,QAAA,EAAA;AAAA,cACtB,MAAA;AAAA,cAAA,YAAA,EAAA,CAAA,EAAA,MAAA,CAAA,QAAA,CAAA;AAbR,cAAA,IAAA,EAAA,UAAA;AAAA,aAAA,EAAA;AAAA,cAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,gBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,iBAAA,CAAA;AAAA,eAAA,CAAA;AA8BkB,cAAA,CAAA,EAAA,CAAA;AAAA;AAAA,aAAA,EAAA,IAAA,EAAkE,CA9BpF,OAAA,EAAA,cAAA,EAAA,QAAA,EAAA,YAAA,CAAA,CAAA;AAAA,YAAA,KAAA,KAAA,IAAA,CAAA,qBAAA,CAAA,MAAA,GAAA,CAAA,GAAAD,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,GAAAE,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;"}

package/js/components/display-click-provider.vue.js

@@ -0,0 +1,74 @@
+import { defineComponent, computed, provide } from 'vue';
+import '../composables/create-use-device.js';
+import { use$x } from '../composables/use-_x.js';
+import '@vue/devtools-api';
+import '../plugins/devtools/timeline.devtools.js';
+import '@empathyco/x-utils';
+import 'rxjs/operators';
+import 'rxjs';
+import '../plugins/devtools/colors.utils.js';
+import '../plugins/x-bus.js';
+import '../plugins/x-plugin.js';
+import 'vuex';
+import '@vueuse/core';
+
+// eslint-disable-next-line no-duplicate-imports
+var _sfc_main = defineComponent({
+    name: 'DisplayClickProvider',
+    props: {
+        resultFeature: {
+            type: String,
+            required: true
+        },
+        ignoreResultClickEvent: {
+            type: Boolean,
+            default: false
+        },
+        toolingDisplayTagging: {
+            type: Object,
+            required: false,
+            default: undefined
+        },
+        toolingAdd2CartTagging: {
+            type: Object,
+            required: false,
+            default: undefined
+        },
+        queryTagging: {
+            type: Object,
+            required: false,
+            default: undefined
+        }
+    },
+    setup(props, { slots }) {
+        const x = use$x();
+        const displayClickMetadata = computed(() => ({
+            displayOriginalQuery: x.query.search,
+            feature: props.resultFeature,
+            queryTagging: props.queryTagging,
+            toolingTagging: props.toolingDisplayTagging,
+            toolingAdd2CartTagging: props.toolingAdd2CartTagging
+        }));
+        provide('resultAddToCartExtraEvents', ['UserClickedARelatedPromptAdd2Cart']);
+        provide('resultAddToCartExtraEventsMetadata', {
+            toolingAdd2CartTagging: props.toolingAdd2CartTagging
+        });
+        provide('resultClickExtraEvents', [
+            'UserClickedARelatedPromptResult',
+            'UserClickedADisplayResult'
+        ]);
+        provide('resultLinkMetadataPerEvent', {
+            UserClickedARelatedPromptResult: displayClickMetadata.value,
+            UserClickedADisplayResult: displayClickMetadata.value,
+            ...(props.ignoreResultClickEvent && {
+                UserClickedAResult: {
+                    ignoreInModules: ['tagging']
+                }
+            })
+        });
+        return () => slots.default?.()[0] ?? '';
+    }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=display-click-provider.vue.js.map

package/js/components/display-click-provider.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-click-provider.vue.js","sources":["../../../src/components/display-click-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n  import type { TaggingRequest } from '@empathyco/x-types';\n  import type { PropType } from 'vue';\n  // eslint-disable-next-line no-duplicate-imports\n  import { computed, defineComponent, provide } from 'vue';\n  import { use$x } from '../composables/index';\n  import { DisplayWireMetadata } from '../wiring/index';\n  import type { ResultFeature } from '../types/index';\n\n  export default defineComponent({\n    name: 'DisplayClickProvider',\n    props: {\n      resultFeature: {\n        type: String as PropType<ResultFeature>,\n        required: true\n      },\n      ignoreResultClickEvent: {\n        type: Boolean,\n        default: false\n      },\n      toolingDisplayTagging: {\n        type: Object as PropType<TaggingRequest>,\n        required: false,\n        default: undefined\n      },\n      toolingAdd2CartTagging: {\n        type: Object as PropType<TaggingRequest>,\n        required: false,\n        default: undefined\n      },\n      queryTagging: {\n        type: Object as PropType<TaggingRequest>,\n        required: false,\n        default: undefined\n      }\n    },\n    setup(props, { slots }) {\n      const x = use$x();\n\n      const displayClickMetadata = computed<Partial<DisplayWireMetadata>>(() => ({\n        displayOriginalQuery: x.query.search,\n        feature: props.resultFeature,\n        queryTagging: props.queryTagging,\n        toolingTagging: props.toolingDisplayTagging,\n        toolingAdd2CartTagging: props.toolingAdd2CartTagging\n      }));\n\n      provide('resultAddToCartExtraEvents', ['UserClickedARelatedPromptAdd2Cart']);\n      provide('resultAddToCartExtraEventsMetadata', {\n        toolingAdd2CartTagging: props.toolingAdd2CartTagging\n      });\n\n      provide('resultClickExtraEvents', [\n        'UserClickedARelatedPromptResult',\n        'UserClickedADisplayResult'\n      ]);\n      provide('resultLinkMetadataPerEvent', {\n        UserClickedARelatedPromptResult: displayClickMetadata.value,\n        UserClickedADisplayResult: displayClickMetadata.value,\n        ...(props.ignoreResultClickEvent && {\n          UserClickedAResult: {\n            ignoreInModules: ['tagging']\n          }\n        })\n      });\n\n      return () => slots.default?.()[0] ?? '';\n    }\n  });\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAGE;AAMA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AAClB,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AAClB,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AACnB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,CAAE,GAAE,KAAK,EAAE,CAAA;AAEjB,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAA+B,OAAO;AACzE,YAAA,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YACpC,OAAO,EAAE,KAAK,CAAC,aAAa;YAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,cAAc,EAAE,KAAK,CAAC,qBAAqB;YAC3C,sBAAsB,EAAE,KAAK,CAAC,sBAAqB;AACpD,SAAA,CAAC,CAAC,CAAA;AAEH,QAAA,OAAO,CAAC,4BAA4B,EAAE,CAAC,mCAAmC,CAAC,CAAC,CAAA;QAC5E,OAAO,CAAC,oCAAoC,EAAE;YAC5C,sBAAsB,EAAE,KAAK,CAAC,sBAAqB;AACpD,SAAA,CAAC,CAAA;QAEF,OAAO,CAAC,wBAAwB,EAAE;YAChC,iCAAiC;YACjC,2BAA0B;AAC3B,SAAA,CAAC,CAAA;QACF,OAAO,CAAC,4BAA4B,EAAE;YACpC,+BAA+B,EAAE,oBAAoB,CAAC,KAAK;YAC3D,yBAAyB,EAAE,oBAAoB,CAAC,KAAK;AACrD,YAAA,IAAI,KAAK,CAAC,sBAAqB,IAAK;AAClC,gBAAA,kBAAkB,EAAE;oBAClB,eAAe,EAAE,CAAC,SAAS,CAAA;AAC7B,iBAAA;aACD;AACF,SAAA,CAAC,CAAA;AAEF,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACzC;AACD,CAAA,CAAC;;;;"}

package/js/components/display-click-provider.vue2.js

@@ -0,0 +1,6 @@
+import _sfc_main from './display-click-provider.vue.js';
+
+
+
+export { _sfc_main as default };
+//# sourceMappingURL=display-click-provider.vue2.js.map

package/js/components/display-click-provider.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-click-provider.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/components/filters/labels/base-rating-filter-label.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-rating-filter-label.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11,11 +11,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     max: _ctx.max
   }, {
     "filled-icon": withCtx(() => [
-      createCommentVNode("\n       @slot Filled icon content\n     "),
       renderSlot(_ctx.$slots, "rating-icon-filled")
     ]),
     "empty-icon": withCtx(() => [
-      createCommentVNode("\n       @slot Empty icon content\n     "),
       renderSlot(_ctx.$slots, "rating-icon-empty")
     ]),
     _: 3

package/js/components/filters/labels/base-rating-filter-label.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-rating-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseRating from '../../base-rating.vue';\n\n  /**\n   * Renders a label for a rating filter, allowing to override the elements used to paint\n   * the rating.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      BaseRating\n    },\n    props: {\n      /**\n       * The filter data to render.\n       *\n       * @public\n       */\n      filter: {\n        type: Object as PropType<BooleanFilter>,\n        required: true\n      },\n      /**\n       * Maximum number of elements to paint.\n       *\n       * @public\n       */\n      max: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * Converts the label string into a number.\n       *\n       * @returns The label as number or 0 if it is not a valid number.\n       *\n       * @internal\n       */\n      const value = computed<number>(() => {\n        const x = parseFloat(props.filter.label) ?? 0;\n        return Number.isNaN(x) ? 0 : x;\n      });\n\n      return {\n        value\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","value","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;gCACEA,gBAaa,CAAA,YAAA,CAAA,CAAA;AAb6B,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,KAAOC,EAAAA,uBAAAA;AAAAA,IAAQ,WAAQ,EAAA,cAAA;AAAA,IAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAC9E,IAAA,GAAA,EAAA,IAAA,CAAA,GAAA;AAAA,GAAA,EAAA;AAIyB,IAAA,aAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,2CAAA,CAAA;AAEzB,MAAAC,UAAA,CAAU,IAGjB,CAAA,MAAA,EAAA,oBAAA,CAAA;AAAA,KAAA,CAAA;AAC+B,IAAA,YAAA,EAAAF,OAAA,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,0CAAA,CAAA;AAZvC,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,mBAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-rating-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseRating from '../../base-rating.vue';\n\n  /**\n   * Renders a label for a rating filter, allowing to override the elements used to paint\n   * the rating.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      BaseRating\n    },\n    props: {\n      /**\n       * The filter data to render.\n       *\n       * @public\n       */\n      filter: {\n        type: Object as PropType<BooleanFilter>,\n        required: true\n      },\n      /**\n       * Maximum number of elements to paint.\n       *\n       * @public\n       */\n      max: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * Converts the label string into a number.\n       *\n       * @returns The label as number or 0 if it is not a valid number.\n       *\n       * @internal\n       */\n      const value = computed<number>(() => {\n        const x = parseFloat(props.filter.label) ?? 0;\n        return Number.isNaN(x) ? 0 : x;\n      });\n\n      return {\n        value\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","value","_renderSlot"],"mappings":";;;;;gCACEA,gBAaa,CAAA,YAAA,CAAA,CAAA;AAb6B,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,KAAOC,EAAAA,uBAAAA;AAAAA,IAAQ,WAAQ,EAAA,cAAA;AAAA,IAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAC9E,IAAA,GAAA,EAAA,IAAA,CAAA,GAAA;AAAA,GAAA,EAAA;;AAMA,MAAAC,UAAA,CAAU,IAIc,CAAA,MAAA,EAAA,oBAAA,CAAA;AAAA,KAAA,CAAA;;AAZvC,MAAAA,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,mBAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"items-list.vue.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n  import { animationProp } from '../utils/options-api';\n\n  /**\n   * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n   * the `modelName`of the item.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ItemsList',\n    props: {\n      /** Animation component that will be used to animate the list. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      },\n      /** List of items. */\n      items: {\n        type: Array as PropType<ListItem[]>,\n        required: true\n      },\n      /** Item's classes. */\n      itemClass: String\n    },\n    setup(props) {\n      /**\n       * The list of the items with additional properties.\n       *\n       * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n       */\n      const computedItems = computed(() =>\n        props.items.map(item => {\n          const modelName = toKebabCase(item.modelName);\n          return {\n            ...item,\n            dataTest: `${modelName}s-list-item`,\n            class: [`x-${modelName}s-list-item`, props.itemClass],\n            slotName: modelName\n          };\n        })\n      );\n\n      return { computedItems };\n    }\n  });\n</script>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_renderSlot","_toDisplayString"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SAFT,IAIY,CAAA,KAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AANJ,IAAA,WAAA,EAAA,YAAA;AAAA,GAAA,EAAA;;iBAUY,IAAO,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,aAAA,EAAA,CAAA,IAAA,KAAA;AACR,UAAA,OAAAL,SAAA,uBAAC,IACE,EAAA;AAAA,YACP,GAAA,EAAA,IAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAAM,cAAA,CAAA,CAAA,oBAAA,EAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAED,YAAA,WAAA,EAAA,IAAA,CAAA,QAAA;AAAA,WAIA,EAAA;AAAA,YAAAC,kBAAA,CAnBN,iGAmByD,CAAA;AAAA,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,IAAA,CAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,MAAA;;AAnBzD,gBAAAC,eAAA,CAAA,IAAA,CAAA,EAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAAA,CAAA;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAF,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"items-list.vue.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n  import { AnimationProp } from '../types';\n\n  /**\n   * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n   * the `modelName`of the item.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ItemsList',\n    props: {\n      /** Animation component that will be used to animate the list. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /** List of items. */\n      items: {\n        type: Array as PropType<ListItem[]>,\n        required: true\n      },\n      /** Item's classes. */\n      itemClass: String\n    },\n    setup(props) {\n      /**\n       * The list of the items with additional properties.\n       *\n       * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n       */\n      const computedItems = computed(() =>\n        props.items.map(item => {\n          const modelName = toKebabCase(item.modelName);\n          return {\n            ...item,\n            dataTest: `${modelName}s-list-item`,\n            class: [`x-${modelName}s-list-item`, props.itemClass],\n            slotName: modelName\n          };\n        })\n      );\n\n      return { computedItems };\n    }\n  });\n</script>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_toDisplayString","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SAFT,IAIY,CAAA,KAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AANJ,IAAA,WAAA,EAAA,YAAA;AAAA,GAAA,EAAA;;iBAUY,IAAO,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,aAAA,EAAA,CAAA,IAAA,KAAA;AACR,UAAA,OAAAL,SAAA,uBAAC,IACE,EAAA;AAAA,YACP,GAAA,EAAA,IAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAAM,cAAA,CAAA,CAAA,oBAAA,EAAA,IAAA,CAAA,KAAA,CAAA,CAAA;YAMD,WAA6D,EAAA,IAAA,CAAA,QAAA;AAAA,WAAA,EAAA;;;AAnBnE,gBAAAC,eAAA,CAAA,IAAA,CAAA,EAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAAA,CAAA;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,6 +1,6 @@
 import { defineComponent, computed } from 'vue';
 import { toKebabCase } from '../utils/string.js';
-import { animationProp } from '../utils/options-api.js';
+import { AnimationProp } from '../types/animation-prop.js';
 
 /**
  * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on
@@ -13,7 +13,7 @@ var _sfc_main = defineComponent({
     props: {
         /** Animation component that will be used to animate the list. */
         animation: {
-            type: animationProp,
+            type: AnimationProp,
             default: 'ul'
         },
         /** List of items. */

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

@@ -1 +1 @@
-{"version":3,"file":"items-list.vue2.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n  import { animationProp } from '../utils/options-api';\n\n  /**\n   * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n   * the `modelName`of the item.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ItemsList',\n    props: {\n      /** Animation component that will be used to animate the list. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      },\n      /** List of items. */\n      items: {\n        type: Array as PropType<ListItem[]>,\n        required: true\n      },\n      /** Item's classes. */\n      itemClass: String\n    },\n    setup(props) {\n      /**\n       * The list of the items with additional properties.\n       *\n       * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n       */\n      const computedItems = computed(() =>\n        props.items.map(item => {\n          const modelName = toKebabCase(item.modelName);\n          return {\n            ...item,\n            dataTest: `${modelName}s-list-item`,\n            class: [`x-${modelName}s-list-item`, props.itemClass],\n            slotName: modelName\n          };\n        })\n      );\n\n      return { computedItems };\n    }\n  });\n</script>\n"],"names":[],"mappings":";;;;AA8BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;;AAED,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAA6B;AACnC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,SAAS,EAAE,MAAK;AACjB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,aAAc,GAAE,QAAQ,CAAC,MAC7B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,IAAK;YACtB,MAAM,SAAU,GAAE,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;YAC7C,OAAO;AACL,gBAAA,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAG,EAAA,SAAS,CAAa,WAAA,CAAA;gBACnC,KAAK,EAAE,CAAC,CAAK,EAAA,EAAA,SAAS,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;AACrD,gBAAA,QAAQ,EAAE,SAAQ;aACnB,CAAA;SACF,CAAA,CACF,CAAA;QAED,OAAO,EAAE,eAAe,CAAA;KAC1B;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"items-list.vue2.js","sources":["../../../src/components/items-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"items.length\"\n    tag=\"ul\"\n    class=\"x-items-list\"\n    data-test=\"items-list\"\n  >\n    <li\n      v-for=\"item in computedItems\"\n      :key=\"item.id\"\n      class=\"x-items-list__item\"\n      :class=\"item.class\"\n      :data-test=\"item.dataTest\"\n    >\n      <!--\n        @slot Custom item to render.\n          @binding {ListItem} item - Item data.\n      -->\n      <slot :item=\"item\" :name=\"item.slotName\">{{ item.id }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { ListItem } from '../utils/types';\n  import { toKebabCase } from '../utils/string';\n  import { AnimationProp } from '../types';\n\n  /**\n   * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on\n   * the `modelName`of the item.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ItemsList',\n    props: {\n      /** Animation component that will be used to animate the list. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /** List of items. */\n      items: {\n        type: Array as PropType<ListItem[]>,\n        required: true\n      },\n      /** Item's classes. */\n      itemClass: String\n    },\n    setup(props) {\n      /**\n       * The list of the items with additional properties.\n       *\n       * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.\n       */\n      const computedItems = computed(() =>\n        props.items.map(item => {\n          const modelName = toKebabCase(item.modelName);\n          return {\n            ...item,\n            dataTest: `${modelName}s-list-item`,\n            class: [`x-${modelName}s-list-item`, props.itemClass],\n            slotName: modelName\n          };\n        })\n      );\n\n      return { computedItems };\n    }\n  });\n</script>\n"],"names":[],"mappings":";;;;AA8BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;;AAED,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAA6B;AACnC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,SAAS,EAAE,MAAK;AACjB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,aAAc,GAAE,QAAQ,CAAC,MAC7B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,IAAK;YACtB,MAAM,SAAU,GAAE,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;YAC7C,OAAO;AACL,gBAAA,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAG,EAAA,SAAS,CAAa,WAAA,CAAA;gBACnC,KAAK,EAAE,CAAC,CAAK,EAAA,EAAA,SAAS,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;AACrD,gBAAA,QAAQ,EAAE,SAAQ;aACnB,CAAA;SACF,CAAA,CACF,CAAA;QAED,OAAO,EAAE,eAAe,CAAA;KAC1B;AACD,CAAA,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './fixed-header-and-asides-layout.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, renderSlot, createCommentVNode } from 'vue';
 import './fixed-header-and-asides-layout.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -79,14 +79,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             /* CLASS */
           ),
           _ctx.devMode || _ctx.$slots["header"] ? (openBlock(), createElementBlock("header", _hoisted_1, [
-            createCommentVNode(" @slot Slot that is be used for insert content into the Header. "),
             renderSlot(_ctx.$slots, "header", {}, () => [
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_2, "HEADER")) : createCommentVNode("v-if", true)
             ], true)
           ])) : createCommentVNode("v-if", true),
           _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
             createElementVNode("div", _hoisted_4, [
-              createCommentVNode(" @slot Slot that can be used to insert content into below the header. "),
               renderSlot(_ctx.$slots, "sub-header", {}, () => [
                 _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_5, "SUB HEADER")) : createCommentVNode("v-if", true)
               ], true)
@@ -94,12 +92,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])) : createCommentVNode("v-if", true),
           _ctx.devMode || _ctx.$slots["toolbar"] ? (openBlock(), createElementBlock("section", _hoisted_6, [
             renderSlot(_ctx.$slots, "toolbar", {}, () => [
-              createCommentVNode(" @slot Slot that can be used to insert content above the main. "),
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_7, "TOOLBAR")) : createCommentVNode("v-if", true)
             ], true)
           ])) : createCommentVNode("v-if", true),
           _ctx.devMode || _ctx.$slots["main"] ? (openBlock(), createElementBlock("main", _hoisted_8, [
-            createCommentVNode(" @slot Slot that is be used for insert content into the Main. "),
             renderSlot(_ctx.$slots, "main", {}, () => [
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_9, "MAIN")) : createCommentVNode("v-if", true)
             ], true)
@@ -111,7 +107,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-layout__aside x-layout__aside--left"
           }, {
             default: withCtx(() => [
-              createCommentVNode(" @slot Slot that is be used for insert content into the left aside. "),
               renderSlot(_ctx.$slots, "left-aside", {}, () => [
                 _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "LEFT ASIDE")) : createCommentVNode("v-if", true)
               ], true)
@@ -126,7 +121,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-layout__aside x-layout__aside--right"
           }, {
             default: withCtx(() => [
-              createCommentVNode(" @slot Slot that is be used for insert content into the right aside. "),
               renderSlot(_ctx.$slots, "right-aside", {}, () => [
                 _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_11, "RIGHT ASIDE")) : createCommentVNode("v-if", true)
               ], true)

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

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      @scroll=\"setPosition\"\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots['header']\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"devMode || $slots['sub-header']\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"devMode || $slots['toolbar']\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main\n        v-if=\"devMode || $slots['main']\"\n        key=\"main\"\n        class=\"x-layout__main x-list x-list--vertical\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modalId=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modalId=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, ref } from 'vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FixedHeaderAndAsidesLayout',\n    components: { BaseIdModal, MainScroll, Scroll },\n    props: {\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    },\n    setup() {\n      const scrollPosition = ref(0);\n\n      const rightAsideAnimation = animateTranslate('right');\n      const leftAsideAnimation = animateTranslate('left');\n\n      const setPosition = (position: number) => {\n        scrollPosition.value = position;\n      };\n      const isBackdropVisible = computed(() => scrollPosition.value > 0);\n\n      return {\n        rightAsideAnimation,\n        leftAsideAnimation,\n        setPosition,\n        isBackdropVisible\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n  .x-layout {\n    /* custom properties */\n    display: grid;\n    align-content: stretch;\n    min-height: 100%;\n\n    /* layout */\n    max-height: 100%;\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n    --x-size-margin-layout: max(\n      var(--x-size-min-margin-layout, 20px),\n      var(--x-size-margin-max-width)\n    );\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [main-end page-end];\n\n    grid-template-columns:\n      [page-start]\n      var(--x-size-margin-layout)\n      [max-width-start]\n      1fr\n      [max-width-end]\n      var(--x-size-margin-layout)\n      [page-end];\n  }\n\n  .x-layout__header {\n    /* layout */\n    position: sticky;\n    top: -0.5px;\n    z-index: 2;\n    grid-row: header;\n    grid-column: page;\n    max-height: var(--x-size-max-height-layout-header, auto);\n    padding: 0 var(--x-size-margin-layout);\n\n    /* color */\n    background: var(--x-color-background-layout-header, transparent);\n    border-color: var(--x-size-border-color-layout-header, transparent);\n\n    /* border */\n    border-width: var(--x-size-border-width-layout-header, 0);\n    border-style: solid;\n  }\n\n  .x-layout__sub-header {\n    /* layout */\n    grid-row: sub-header;\n    grid-column: page;\n    padding: 0 var(--x-size-margin-layout);\n\n    /* color */\n    background: var(--x-color-background-layout-sub-header, transparent);\n    border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n    /* border */\n    border-width: var(--x-size-border-width-layout-sub-header, 0);\n    border-style: solid;\n  }\n\n  .x-layout__toolbar {\n    /* layout */\n    grid-row: toolbar;\n    grid-column: max-width;\n  }\n\n  .x-layout__main {\n    /* layout */\n    grid-row: main;\n    grid-column: max-width;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside.x-modal) {\n    z-index: 3;\n    flex-flow: row nowrap;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside--right.x-modal) {\n    justify-content: flex-end;\n  }\n\n  /* others */\n  .x-layout :deep(.x-layout__aside) {\n    pointer-events: none;\n  }\n  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n    pointer-events: all;\n  }\n\n  .x-layout__scroll-to-top {\n    position: fixed;\n    z-index: 1;\n    bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n    right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n  }\n\n  .x-layout__header-backdrop {\n    /* layout */\n    grid-row: page;\n    grid-column: page;\n    position: sticky;\n    top: -0.5px;\n    z-index: 1;\n    height: var(--x-size-height-layout-backdrop, 40vh);\n    width: 100%;\n    pointer-events: none;\n\n    /* color */\n    background-color: var(\n      --x-color-background-layout-header-backdrop,\n      var(--x-color-base-neutral-100, white)\n    );\n    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n    /* transition */\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n  }\n  .x-layout__header-backdrop--is-visible {\n    opacity: 1;\n  }\n\n  .x-layout :deep(.x-layout__aside .x-modal__content) {\n    background-color: transparent;\n    height: 100%;\n    width: var(--x-size-width-layout-aside, 300px);\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","setPosition","_normalizeClass","_createElementVNode","devMode","$slots","_createElementBlock","_createCommentVNode","_renderSlot","leftAsideAnimation","rightAsideAnimation"],"mappings":"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"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      @scroll=\"setPosition\"\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots['header']\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Header. -->\n        <slot name=\"header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n        </slot>\n      </header>\n\n      <div v-if=\"devMode || $slots['sub-header']\" key=\"sub-header\" class=\"x-layout__sub-header\">\n        <div class=\"x-layout__sub-header-content\">\n          <!-- @slot Slot that can be used to insert content into below the header. -->\n          <slot name=\"sub-header\">\n            <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n          </slot>\n        </div>\n      </div>\n\n      <section v-if=\"devMode || $slots['toolbar']\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main\n        v-if=\"devMode || $slots['main']\"\n        key=\"main\"\n        class=\"x-layout__main x-list x-list--vertical\"\n      >\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modalId=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modalId=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <slot name=\"extra-aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n      </slot>\n\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, ref } from 'vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FixedHeaderAndAsidesLayout',\n    components: { BaseIdModal, MainScroll, Scroll },\n    props: {\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    },\n    setup() {\n      const scrollPosition = ref(0);\n\n      const rightAsideAnimation = animateTranslate('right');\n      const leftAsideAnimation = animateTranslate('left');\n\n      const setPosition = (position: number) => {\n        scrollPosition.value = position;\n      };\n      const isBackdropVisible = computed(() => scrollPosition.value > 0);\n\n      return {\n        rightAsideAnimation,\n        leftAsideAnimation,\n        setPosition,\n        isBackdropVisible\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n  .x-layout {\n    /* custom properties */\n    display: grid;\n    align-content: stretch;\n    min-height: 100%;\n\n    /* layout */\n    max-height: 100%;\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n    --x-size-margin-layout: max(\n      var(--x-size-min-margin-layout, 20px),\n      var(--x-size-margin-max-width)\n    );\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [main-end page-end];\n\n    grid-template-columns:\n      [page-start]\n      var(--x-size-margin-layout)\n      [max-width-start]\n      1fr\n      [max-width-end]\n      var(--x-size-margin-layout)\n      [page-end];\n  }\n\n  .x-layout__header {\n    /* layout */\n    position: sticky;\n    top: -0.5px;\n    z-index: 2;\n    grid-row: header;\n    grid-column: page;\n    max-height: var(--x-size-max-height-layout-header, auto);\n    padding: 0 var(--x-size-margin-layout);\n\n    /* color */\n    background: var(--x-color-background-layout-header, transparent);\n    border-color: var(--x-size-border-color-layout-header, transparent);\n\n    /* border */\n    border-width: var(--x-size-border-width-layout-header, 0);\n    border-style: solid;\n  }\n\n  .x-layout__sub-header {\n    /* layout */\n    grid-row: sub-header;\n    grid-column: page;\n    padding: 0 var(--x-size-margin-layout);\n\n    /* color */\n    background: var(--x-color-background-layout-sub-header, transparent);\n    border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n    /* border */\n    border-width: var(--x-size-border-width-layout-sub-header, 0);\n    border-style: solid;\n  }\n\n  .x-layout__toolbar {\n    /* layout */\n    grid-row: toolbar;\n    grid-column: max-width;\n  }\n\n  .x-layout__main {\n    /* layout */\n    grid-row: main;\n    grid-column: max-width;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside.x-modal) {\n    z-index: 3;\n    flex-flow: row nowrap;\n  }\n\n  /* layout */\n  .x-layout :deep(.x-layout__aside--right.x-modal) {\n    justify-content: flex-end;\n  }\n\n  /* others */\n  .x-layout :deep(.x-layout__aside) {\n    pointer-events: none;\n  }\n  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n    pointer-events: all;\n  }\n\n  .x-layout__scroll-to-top {\n    position: fixed;\n    z-index: 1;\n    bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n    right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n  }\n\n  .x-layout__header-backdrop {\n    /* layout */\n    grid-row: page;\n    grid-column: page;\n    position: sticky;\n    top: -0.5px;\n    z-index: 1;\n    height: var(--x-size-height-layout-backdrop, 40vh);\n    width: 100%;\n    pointer-events: none;\n\n    /* color */\n    background-color: var(\n      --x-color-background-layout-header-backdrop,\n      var(--x-color-base-neutral-100, white)\n    );\n    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n    /* transition */\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n  }\n  .x-layout__header-backdrop--is-visible {\n    opacity: 1;\n  }\n\n  .x-layout :deep(.x-layout__aside .x-modal__content) {\n    background-color: transparent;\n    height: 100%;\n    width: var(--x-size-width-layout-aside, 300px);\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                    token                    | default value |\n| :-----------------------------------------: | :-----------: |\n|       --x-size-height-layout-backdrop       |     40vh      |\n|         --x-size-width-layout-aside         |     300px     |\n|         --x-size-min-margin-layout          |     20px      |\n|      --x-size-max-height-layout-header      |     auto      |\n|          --x-size-max-width-layout          |    1440px     |\n| --x-color-background-layout-header-backdrop |     white     |\n|     --x-color-background-layout-header      |  transparent  |\n|     --x-size-border-color-layout-header     |  transparent  |\n|     --x-size-border-width-layout-header     |      0px      |\n|   --x-color-background-layout-sub-header    |  transparent  |\n|   --x-size-border-color-layout-sub-header   |  transparent  |\n|   --x-size-border-width-layout-sub-header   |      0px      |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","setPosition","_normalizeClass","_createElementVNode","devMode","$slots","_createElementBlock","_renderSlot","_createCommentVNode","leftAsideAnimation","rightAsideAnimation"],"mappings":"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"}

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

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