@empathyco/x-components 5.0.0-alpha.7 → 5.0.0-alpha.8

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.8](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.7...@empathyco/x-components@5.0.0-alpha.8) (2024-05-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* `MainScroll` drops the usage of `NoElement` as root element and uses a div instead. This extra div could break the style of an application that relies on `MainScroll` rendering their content directly.
+`MainScrollItem` drops the usage of `NoElement` if no `tag` prop is passed and uses a div as fallback.
+
+### Features
+
+* migrate `MainScroll` and `MainScrollItem` components (#1456) ([b720132](https://github.com/empathyco/x/commit/b7201322bbf1f5696e80e00622d21d653228177c))
+
+
+
 ## [5.0.0-alpha.7](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.6...@empathyco/x-components@5.0.0-alpha.7) (2024-05-06)
 
 

package/design-system/deprecated-full-theme.css

@@ -1,3 +1,4 @@
+
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -32,7 +33,6 @@
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
-
 .x-static {
   position: static !important;
 }
@@ -52,6 +52,7 @@
 .x-sticky {
   position: sticky !important;
 }
+
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -955,6 +956,29 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important;
 }
+.x-line-height--none {
+  line-height: 1 !important;
+}
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
+}
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
+}
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
+}
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
+}
+
+.x-line-height--loose {
+  line-height: 2 !important;
+}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -989,29 +1013,6 @@
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 6 !important;
 }
-.x-line-height--none {
-  line-height: 1 !important;
-}
-
-.x-line-height--tight {
-  line-height: 1.25 !important;
-}
-
-.x-line-height--snug {
-  line-height: 1.375 !important;
-}
-
-.x-line-height--normal {
-  line-height: 1.5 !important;
-}
-
-.x-line-height--relaxed {
-  line-height: 1.625 !important;
-}
-
-.x-line-height--loose {
-  line-height: 2 !important;
-}
 .x-font-weight--light {
   font-weight: var(--x-number-font-weight-base-light) !important;
 }
@@ -3389,6 +3390,9 @@
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
+.x-text--secondary {
+  --x-color-text-default: var(--x-color-text-secondary);
+}
 .x-text--light.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-light);
 }
@@ -3561,9 +3565,6 @@
 .x-text--bold.x-small {
   --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
 }
-:root {
-  --x-color-text-accent: var(--x-color-base-accent);
-}
 .x-text--accent {
   --x-color-text-default: var(--x-color-text-accent);
 }
@@ -4563,14 +4564,6 @@
   --x-size-gap-row-19: var(--x-size-base-19);
   --x-size-gap-row-20: var(--x-size-base-20);
 }
-:root {
-  --x-size-gap-row: 0;
-  --x-size-padding-row: 0;
-  --x-size-justify-row: stretch;
-  --x-size-align-row: center;
-  --x-size-span-row-item: 1;
-  --x-size-start-row-item: 0;
-}
 :root {
   --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
@@ -4681,6 +4674,14 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0;
 }
+:root {
+  --x-size-gap-row: 0;
+  --x-size-padding-row: 0;
+  --x-size-justify-row: stretch;
+  --x-size-align-row: center;
+  --x-size-span-row-item: 1;
+  --x-size-start-row-item: 0;
+}
 
 .x-row {
   display: grid;
@@ -4891,6 +4892,9 @@
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
 
 .x-result.x-result--card {
   overflow: hidden;
@@ -4905,9 +4909,6 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
-:root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
-}
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
   --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -8429,6 +8430,16 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
+:root {
+  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
+  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
 
 .x-button--tertiary.x-button,
 .x-button--tertiary .x-button {
@@ -8440,16 +8451,6 @@
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
   --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
 }
-:root {
-  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
-  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default);
-  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
-}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8838,6 +8839,6 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
-.x-text--secondary {
-  --x-color-text-default: var(--x-color-text-secondary);
-}
+:root {
+  --x-color-text-accent: var(--x-color-base-accent);
+}

package/docs/API-reference/api/x-components.mainscroll.md

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [MainScroll](./x-components.mainscroll.md)
 
-## MainScroll class
+## MainScroll variable
 
 Extends the scroll making it able to sync the first visible element, and allowing the children position to be restored.
 
@@ -11,23 +11,50 @@ Each child element that wants to have this support must be wrapped in a [MainScr
 **Signature:**
 
 ```typescript
-export default class MainScroll extends Vue 
+_default: import("vue").DefineComponent<{
+    useWindow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    restoreScrollTimeoutMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+    threshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    margin: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    rootRef: import("vue").Ref<HTMLDivElement | null>;
+    dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
+    firstVisibleElement: import("vue").ComputedRef<string>;
+    visibleElementsObserver: import("vue").ComputedRef<ScrollVisibilityObserver | null>;
+    intersectingElements: import("vue").Ref<HTMLElement[]>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    useWindow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    restoreScrollTimeoutMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+    threshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    margin: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    useWindow: boolean;
+    restoreScrollTimeoutMs: number;
+    threshold: number;
+    margin: string;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [margin](./x-components.mainscroll.margin.md) |  | string | Adjusts the size of the scroll container bounds. |
-|  [restoreScrollTimeoutMs](./x-components.mainscroll.restorescrolltimeoutms.md) |  | number | Timeout in milliseconds to abort trying to restore the scroll position to the target element. |
-|  [threshold](./x-components.mainscroll.threshold.md) |  | number | Intersection percentage to consider an element visible. |
-|  [useWindow](./x-components.mainscroll.usewindow.md) |  | boolean | If <code>true</code>, sets this scroll instance to the main of the application. Being the main scroll implies that features like restoring the scroll when the query changes, or storing the scroll position in the URL will be enabled for this container. |
-|  [visibleElementsObserver](./x-components.mainscroll.visibleelementsobserver.md) | <code>readonly</code> | [ScrollVisibilityObserver](./x-components.scrollvisibilityobserver.md) \| null | Creates an <code>IntersectionObserver</code> to detect the first visible elements. Children of this component should register themselves if they want to be observed. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [mounted()](./x-components.mainscroll.mounted.md) |  | Initialise the observer after mounting the component. |
-

package/docs/API-reference/api/x-components.mainscrollitem.md

@@ -2,28 +2,41 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [MainScrollItem](./x-components.mainscrollitem.md)
 
-## MainScrollItem class
+## MainScrollItem variable
 
 Wrapper for elements contained in the [MainScroll](./x-components.mainscroll.md) that should store/restore its position.
 
 **Signature:**
 
 ```typescript
-export default class MainScrollItem extends Vue 
+_default: import("vue").DefineComponent<{
+    item: {
+        type: PropType<Identifiable<string | number>>;
+        required: true;
+    };
+    tag: {
+        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
+        default: string;
+    };
+}, {
+    rootRef: Ref<HTMLElement | {
+        $el: HTMLElement;
+    } | null>;
+    firstVisibleItemObserver: Ref<ScrollVisibilityObserver> | null;
+    observeItem: WatchCallback<ScrollVisibilityObserver, any>;
+    isElementRef: (value: any) => value is {
+        $el: HTMLElement;
+    };
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        type: PropType<Identifiable<string | number>>;
+        required: true;
+    };
+    tag: {
+        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
+        default: string;
+    };
+}>>, {
+    tag: string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [$el](./x-components.mainscrollitem._el.md) |  | HTMLElement | Rendered HTML node. |
-|  [item](./x-components.mainscrollitem.item.md) |  | Identifiable | The item data. Used to set the scroll identifier. |
-|  [tag](./x-components.mainscrollitem.tag.md) |  | string \| typeof Vue | The tag to render. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [observeItem(newObserver, oldObserver)](./x-components.mainscrollitem.observeitem.md) |  | Initialises the element visibility observation, stopping the previous one if it has. |
-

package/docs/API-reference/api/x-components.md

@@ -60,8 +60,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [IdentifierResults](./x-components.identifierresults.md) | Paints the list of identifier results stored in the state. Each identifier result should be represented by a [IdentifierResult](./x-components.identifierresult.md) component besides any other component. |
 |  [ItemsList](./x-components.itemslist.md) | It renders a list of [ListItem](./x-components.listitem.md) providing a slot for each <code>slotName</code> which depends on the <code>modelName</code>of the item. |
 |  [ItemsListInjectionMixin](./x-components.itemslistinjectionmixin.md) | Mixin to facilitate providing and injecting a list of list items. Injected list is available at <code>injectedListItems</code>, and the provided list should be stored in <code>items</code>. |
-|  [MainScroll](./x-components.mainscroll.md) | <p>Extends the scroll making it able to sync the first visible element, and allowing the children position to be restored.</p><p>Each child element that wants to have this support must be wrapped in a [MainScrollItem](./x-components.mainscrollitem.md) component.</p> |
-|  [MainScrollItem](./x-components.mainscrollitem.md) | Wrapper for elements contained in the [MainScroll](./x-components.mainscroll.md) that should store/restore its position. |
 |  [MultiColumnMaxWidthLayout](./x-components.multicolumnmaxwidthlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
 |  [MyHistory](./x-components.myhistory.md) | The component renders the full history of user searched queries grouped by the day they were performed. |
 |  [NextQueries](./x-components.nextqueries.md) | Simple next-queries component that renders a list of \[<code>BaseSuggestions</code>\](./x-components.base-suggestions.md), allowing the user to select one of them, and emitting the needed events. A next query is a suggestion for a new search, related to your previous query. I.e. If people normally search for <code>shirts</code>, and then <code>trousers</code>, <code>trousers</code> would be a next query of <code>shirts</code>. |
@@ -531,6 +529,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [loadHistoryQueriesFromBrowserStorageWire](./x-components.loadhistoryqueriesfrombrowserstoragewire.md) | Loads the history queries from the browser storage, saving them to the [HistoryQueriesState.historyQueries](./x-components.historyqueriesstate.historyqueries.md)<!-- -->. |
 |  [LocationProvider](./x-components.locationprovider.md) | Location Provider component. This component injects the location with value passed as prop. |
 |  [MainModal](./x-components.mainmodal.md) | A specialised version of a modal component, made to contain a full search application. |
+|  [MainScroll](./x-components.mainscroll.md) | <p>Extends the scroll making it able to sync the first visible element, and allowing the children position to be restored.</p><p>Each child element that wants to have this support must be wrapped in a [MainScrollItem](./x-components.mainscrollitem.md) component.</p> |
+|  [MainScrollItem](./x-components.mainscrollitem.md) | Wrapper for elements contained in the [MainScroll](./x-components.mainscroll.md) that should store/restore its position. |
 |  [MenuIcon](./x-components.menuicon.md) |  |
 |  [MinusIcon](./x-components.minusicon.md) |  |
 |  [MinusTinyIcon](./x-components.minustinyicon.md) |  |

package/docs/API-reference/components/scroll/x-components.main-scroll-item.md

@@ -10,10 +10,10 @@ Wrapper for elements contained in the MainScroll that should store/restore its p
 
 ## Props
 
-| Name              | Description                                       | Type                      | Default                      |
-| ----------------- | ------------------------------------------------- | ------------------------- | ---------------------------- |
-| <code>item</code> | The item data. Used to set the scroll identifier. | <code>Identifiable</code> | <code></code>                |
-| <code>tag</code>  | The tag to render.                                | <code>union</code>        | <code>() => NoElement</code> |
+| Name              | Description                                       | Type                              | Default            |
+| ----------------- | ------------------------------------------------- | --------------------------------- | ------------------ |
+| <code>item</code> | The item data. Used to set the scroll identifier. | <code>Identifiable</code>         | <code></code>      |
+| <code>tag</code>  | The tag to render.                                | <code>string \| typeof Vue</code> | <code>'div'</code> |
 
 ## Slots
 

package/js/components/animations/disable-animation.mixin.js

@@ -1,7 +1,6 @@
 import { __decorate } from 'tslib';
 import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import { XInject } from '../decorators/injection.decorators.js';
+import { Inject, Component } from 'vue-property-decorator';
 import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts.js';
 
 /**
@@ -21,7 +20,7 @@ let DisableAnimationMixin = class DisableAnimationMixin extends Vue {
     }
 };
 __decorate([
-    XInject(DISABLE_ANIMATIONS_KEY)
+    Inject({ from: DISABLE_ANIMATIONS_KEY, default: false })
 ], DisableAnimationMixin.prototype, "disableAnimation", void 0);
 DisableAnimationMixin = __decorate([
     Component

package/js/components/animations/disable-animation.mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"disable-animation.mixin.js","sources":["../../../../src/components/animations/disable-animation.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { XInject } from '../decorators/injection.decorators';\nimport { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';\n\n/**\n * Mixin to ease disabling animations.\n *\n * @public\n */\n@Component\nexport default class DisableAnimationMixin extends Vue {\n  /**\n   * The name of the animation.\n   *\n   * @public\n   */\n  protected animationName!: string;\n\n  /**\n   * Flag to disable the animation.\n   *\n   * @public\n   */\n  @XInject(DISABLE_ANIMATIONS_KEY)\n  public disableAnimation!: boolean;\n\n  /**\n   * The animation's name based on the {@link DisableAnimationMixin.disableAnimation} flag.\n   *\n   * @returns The animation name.\n   * @internal\n   */\n  protected get name(): string {\n    return this.disableAnimation ? '__no-animation__' : this.animationName;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAKA;;;;AAIG;AAEY,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,GAAG,CAAA;AAgBpD;;;;;AAKG;AACH,IAAA,IAAc,IAAI,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,gBAAgB,GAAG,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC;KACxE;CACF,CAAA;AAXC,UAAA,CAAA;IADC,OAAO,CAAC,sBAAsB,CAAC;AACE,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAdf,qBAAqB,GAAA,UAAA,CAAA;IADzC,SAAS;AACW,CAAA,EAAA,qBAAqB,CAyBzC,CAAA;8BAzBoB,qBAAqB;;;;"}
+{"version":3,"file":"disable-animation.mixin.js","sources":["../../../../src/components/animations/disable-animation.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Component, Inject } from 'vue-property-decorator';\nimport { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';\n\n/**\n * Mixin to ease disabling animations.\n *\n * @public\n */\n@Component\nexport default class DisableAnimationMixin extends Vue {\n  /**\n   * The name of the animation.\n   *\n   * @public\n   */\n  protected animationName!: string;\n\n  /**\n   * Flag to disable the animation.\n   *\n   * @public\n   */\n  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })\n  public disableAnimation!: boolean;\n\n  /**\n   * The animation's name based on the {@link DisableAnimationMixin.disableAnimation} flag.\n   *\n   * @returns The animation name.\n   * @internal\n   */\n  protected get name(): string {\n    return this.disableAnimation ? '__no-animation__' : this.animationName;\n  }\n}\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AAEY,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,GAAG,CAAA;AAgBpD;;;;;AAKG;AACH,IAAA,IAAc,IAAI,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,gBAAgB,GAAG,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC;KACxE;CACF,CAAA;AAXC,UAAA,CAAA;IADC,MAAM,CAAC,EAAE,IAAI,EAAE,sBAAgC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACjC,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAdf,qBAAqB,GAAA,UAAA,CAAA;IADzC,SAAS;AACW,CAAA,EAAA,qBAAqB,CAyBzC,CAAA;8BAzBoB,qBAAqB;;;;"}

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

@@ -184,6 +184,7 @@ var __vue_render__ = function () {
             : _vm._e(),
           _c(
             "MainScroll",
+            { staticClass: "x-flex x-flex-auto" },
             [
               _vm.hasContent("main-body")
                 ? _c(
@@ -260,7 +261,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-713b2496";
+  const __vue_scope_id__ = "data-v-450c8db0";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"multi-column-max-width-layout.vue.js","sources":["../../../../src/components/layouts/multi-column-max-width-layout.vue"],"sourcesContent":["<template>\n  <div\n    class=\"x-layout x-layout--columns\"\n    :class=\"{ 'dev-mode': devMode }\"\n    :style=\"{ height: hasContent('main-body') ? '100%' : 'auto' }\"\n  >\n    <header class=\"x-layout__header\">\n      <div v-if=\"hasContent('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=\"hasContent('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=\"hasContent('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=\"hasContent('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=\"hasContent('toolbar-aside', 'toolbar-body')\" class=\"x-layout__toolbar\">\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=\"hasContent('main-aside')\"\n        panelId=\"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>\n        <Scroll v-if=\"hasContent('main-body')\" id=\"main-scroll\" class=\"x-layout__body-scroll\">\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=\"hasContent('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\">\n  import Vue from 'vue';\n  import Component, { mixins } from 'vue-class-component';\n  import { Prop } from 'vue-property-decorator';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import AnimateWidth from '../animations/animate-width.vue';\n  import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n  import LayoutsMixin from './layouts.mixin';\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  @Component({\n    components: { BaseIdTogglePanel, MainScroll, Scroll }\n  })\n  export default class MultiColumnMaxWidthLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => AnimateWidth })\n    protected asideAnimation!: Vue;\n  }\n</script>\n\n<style lang=\"scss\">\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=\"scss\" scoped>\n  @import '../../design-system-deprecated/utilities/dev-mode';\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    &__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    &__header-start {\n      // layout\n      grid-column: start-content;\n\n      &.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\n    &__header-middle {\n      // layout\n      grid-column: middle-content;\n\n      &.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\n    &__header-end {\n      // layout\n      grid-column: end-content;\n\n      &.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\n    &__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    &__sub-header-content {\n      // layout\n      grid-column: sub-header-content;\n\n      &.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\n    &__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    &__toolbar-aside {\n      // layout\n      grid-column: toolbar-aside;\n\n      &.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\n    &__toolbar-body {\n      // layout\n      grid-column: toolbar-body;\n\n      &.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\n    &__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    &__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          ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)\n      );\n    }\n\n    &__aside-scroll {\n      height: 100%;\n      margin-right: var(--x-size-gap-default);\n    }\n\n    &__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-scroll {\n        overflow-y: scroll;\n      }\n    }\n\n    &__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\n    &__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      ::v-deep > * {\n        pointer-events: all;\n      }\n    }\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":[],"mappings":";;;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"multi-column-max-width-layout.vue.js","sources":["../../../../src/components/layouts/multi-column-max-width-layout.vue"],"sourcesContent":["<template>\n  <div\n    class=\"x-layout x-layout--columns\"\n    :class=\"{ 'dev-mode': devMode }\"\n    :style=\"{ height: hasContent('main-body') ? '100%' : 'auto' }\"\n  >\n    <header class=\"x-layout__header\">\n      <div v-if=\"hasContent('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=\"hasContent('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=\"hasContent('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=\"hasContent('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=\"hasContent('toolbar-aside', 'toolbar-body')\" class=\"x-layout__toolbar\">\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=\"hasContent('main-aside')\"\n        panelId=\"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 v-if=\"hasContent('main-body')\" id=\"main-scroll\" class=\"x-layout__body-scroll\">\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=\"hasContent('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\">\n  import Vue from 'vue';\n  import Component, { mixins } from 'vue-class-component';\n  import { Prop } from 'vue-property-decorator';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import AnimateWidth from '../animations/animate-width.vue';\n  import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n  import LayoutsMixin from './layouts.mixin';\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  @Component({\n    components: { BaseIdTogglePanel, MainScroll, Scroll }\n  })\n  export default class MultiColumnMaxWidthLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => AnimateWidth })\n    protected asideAnimation!: Vue;\n  }\n</script>\n\n<style lang=\"scss\">\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=\"scss\" scoped>\n  @import '../../design-system-deprecated/utilities/dev-mode';\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    &__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    &__header-start {\n      // layout\n      grid-column: start-content;\n\n      &.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\n    &__header-middle {\n      // layout\n      grid-column: middle-content;\n\n      &.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\n    &__header-end {\n      // layout\n      grid-column: end-content;\n\n      &.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\n    &__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    &__sub-header-content {\n      // layout\n      grid-column: sub-header-content;\n\n      &.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\n    &__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    &__toolbar-aside {\n      // layout\n      grid-column: toolbar-aside;\n\n      &.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\n    &__toolbar-body {\n      // layout\n      grid-column: toolbar-body;\n\n      &.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\n    &__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    &__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          ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)\n      );\n    }\n\n    &__aside-scroll {\n      height: 100%;\n      margin-right: var(--x-size-gap-default);\n    }\n\n    &__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-scroll {\n        overflow-y: scroll;\n      }\n    }\n\n    &__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\n    &__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      ::v-deep > * {\n        pointer-events: all;\n      }\n    }\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":[],"mappings":";;;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".dev-mode .slot-helper[data-v-713b2496] {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\n.x-layout[data-v-713b2496] {\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  display: grid;\n  align-content: stretch;\n  max-height: 100%;\n  grid-template-columns: [page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];\n}\n.x-layout__header[data-v-713b2496] {\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle), 1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];\n  padding-top: var(--x-size-padding-top-layout-columns-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-header, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-header, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-header, 0);\n  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n.x-layout__header-start[data-v-713b2496] {\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list[data-v-713b2496] {\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.x-layout__header-middle[data-v-713b2496] {\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list[data-v-713b2496] {\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.x-layout__header-end[data-v-713b2496] {\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list[data-v-713b2496] {\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.x-layout__sub-header[data-v-713b2496] {\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content), 1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];\n  padding-top: var(--x-size-padding-top-layout-columns-sub-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n  margin-top: var(--x-size-margin-top-layout-columns-sub-header, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\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  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n.x-layout__sub-header-content[data-v-713b2496] {\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list[data-v-713b2496] {\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.x-layout__toolbar[data-v-713b2496] {\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body), 1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];\n  padding-top: var(--x-size-padding-top-layout-columns-toolbar, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-toolbar, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n.x-layout__toolbar-aside[data-v-713b2496] {\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list[data-v-713b2496] {\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.x-layout__toolbar-body[data-v-713b2496] {\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list[data-v-713b2496] {\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.x-layout__main[data-v-713b2496] {\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  padding-top: var(--x-size-padding-top-layout-columns-main, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-main, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-main, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-main, 0);\n  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n.x-layout__collapse-aside[data-v-713b2496] {\n  width: calc((100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns)) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default));\n}\n.x-layout__aside-scroll[data-v-713b2496] {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n.x-layout__body-scroll[data-v-713b2496] {\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[data-v-713b2496] {\n  overflow-y: scroll;\n}\n.x-layout__scroll-to-top[data-v-713b2496] {\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[dir=\"ltr\"] .x-layout__scroll-to-top-content[data-v-713b2496] {\n  padding-left: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n[dir=\"rtl\"] .x-layout__scroll-to-top-content[data-v-713b2496] {\n  padding-right: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content[data-v-713b2496] {\n  flex: 1 0 auto;\n  padding-bottom: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content[data-v-713b2496]  > * {\n  pointer-events: all;\n}";
+var css = ".dev-mode .slot-helper[data-v-450c8db0] {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\n.x-layout[data-v-450c8db0] {\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  display: grid;\n  align-content: stretch;\n  max-height: 100%;\n  grid-template-columns: [page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];\n}\n.x-layout__header[data-v-450c8db0] {\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle), 1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];\n  padding-top: var(--x-size-padding-top-layout-columns-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-header, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-header, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-header, 0);\n  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n.x-layout__header-start[data-v-450c8db0] {\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list[data-v-450c8db0] {\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.x-layout__header-middle[data-v-450c8db0] {\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list[data-v-450c8db0] {\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.x-layout__header-end[data-v-450c8db0] {\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list[data-v-450c8db0] {\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.x-layout__sub-header[data-v-450c8db0] {\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content), 1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];\n  padding-top: var(--x-size-padding-top-layout-columns-sub-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n  margin-top: var(--x-size-margin-top-layout-columns-sub-header, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\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  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n.x-layout__sub-header-content[data-v-450c8db0] {\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list[data-v-450c8db0] {\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.x-layout__toolbar[data-v-450c8db0] {\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body), 1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];\n  padding-top: var(--x-size-padding-top-layout-columns-toolbar, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-toolbar, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n.x-layout__toolbar-aside[data-v-450c8db0] {\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list[data-v-450c8db0] {\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.x-layout__toolbar-body[data-v-450c8db0] {\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list[data-v-450c8db0] {\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.x-layout__main[data-v-450c8db0] {\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  padding-top: var(--x-size-padding-top-layout-columns-main, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-main, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-main, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-main, 0);\n  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n.x-layout__collapse-aside[data-v-450c8db0] {\n  width: calc((100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns)) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default));\n}\n.x-layout__aside-scroll[data-v-450c8db0] {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n.x-layout__body-scroll[data-v-450c8db0] {\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[data-v-450c8db0] {\n  overflow-y: scroll;\n}\n.x-layout__scroll-to-top[data-v-450c8db0] {\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[dir=\"ltr\"] .x-layout__scroll-to-top-content[data-v-450c8db0] {\n  padding-left: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n[dir=\"rtl\"] .x-layout__scroll-to-top-content[data-v-450c8db0] {\n  padding-right: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content[data-v-450c8db0] {\n  flex: 1 0 auto;\n  padding-bottom: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content[data-v-450c8db0]  > * {\n  pointer-events: all;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/js/composables/use-state.js

@@ -13,7 +13,7 @@ import { useStore } from './use-store.js';
 function useState(module, paths) {
     const store = useStore();
     return paths.reduce((stateDictionary, path) => {
-        stateDictionary[path] = computed(() => store.state.x[module]?.[path]);
+        stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);
         return stateDictionary;
     }, {});
 }

package/js/composables/use-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import { computed, ComputedRef } from 'vue';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { ExtractState, XModuleName } from '../x-modules/x-modules.types';\nimport { useStore } from './use-store';\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param paths - List of state paths.\n * @returns The requested state properties of the module.\n *\n * @public\n */\nexport function useState<\n  Module extends XModuleName,\n  Path extends keyof ExtractState<Module> & string\n>(module: Module, paths: Path[]): Dictionary<ComputedRef> {\n  const store = useStore();\n\n  return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {\n    stateDictionary[path] = computed(() => store.state.x[module]?.[path]);\n    return stateDictionary;\n  }, {});\n}\n"],"names":[],"mappings":";;;AAKA;;;;;;;;AAQG;AACa,SAAA,QAAQ,CAGtB,MAAc,EAAE,KAAa,EAAA;AAC7B,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,KAAK,CAAC,MAAM,CAA0B,CAAC,eAAe,EAAE,IAAI,KAAI;QACrE,eAAe,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;AACtE,QAAA,OAAO,eAAe,CAAC;KACxB,EAAE,EAAE,CAAC,CAAC;AACT;;;;"}
+{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import { computed, ComputedRef } from 'vue';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { ExtractState, XModuleName } from '../x-modules/x-modules.types';\nimport { useStore } from './use-store';\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param paths - List of state paths.\n * @returns The requested state properties of the module.\n *\n * @public\n */\nexport function useState<\n  Module extends XModuleName,\n  Path extends keyof ExtractState<Module> & string\n>(module: Module, paths: Path[]): Dictionary<ComputedRef> {\n  const store = useStore();\n\n  return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {\n    stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);\n    return stateDictionary;\n  }, {});\n}\n"],"names":[],"mappings":";;;AAKA;;;;;;;;AAQG;AACa,SAAA,QAAQ,CAGtB,MAAc,EAAE,KAAa,EAAA;AAC7B,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,KAAK,CAAC,MAAM,CAA0B,CAAC,eAAe,EAAE,IAAI,KAAI;QACrE,eAAe,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;AACvE,QAAA,OAAO,eAAe,CAAC;KACxB,EAAE,EAAE,CAAC,CAAC;AACT;;;;"}