@empathyco/x-components 3.0.0-alpha.401 → 3.0.0-alpha.403

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.403](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.402...@empathyco/x-components@3.0.0-alpha.403) (2023-08-21)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+
+
+
+## [3.0.0-alpha.402](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.401...@empathyco/x-components@3.0.0-alpha.402) (2023-08-17)
+
+
+### Bug Fixes
+
+* restore sliding panel state after a search (#1259) ([c61f3ed](https://github.com/empathyco/x/commit/c61f3edaeb0138d759b583901fad89651bdfaefb))
+
+
+
 ## [3.0.0-alpha.401](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.400...@empathyco/x-components@3.0.0-alpha.401) (2023-08-16)
 
 

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

@@ -4,7 +4,7 @@
 
 ## DeviceDetector class
 
-This component helps detecting or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property.
+This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property.
 
 **Signature:**
 

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

@@ -43,7 +43,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [CrossFade](./x-components.crossfade.md) | Renders a transition wrapping the element passed in the default slot. The transition fades between the two toggled elements at the same time. |
 |  [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md)<!-- -->. |
 |  [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) | Default implementation for the [PDPAddToCartService](./x-components.pdpaddtocartservice.md)<!-- -->. |
-|  [DeviceDetector](./x-components.devicedetector.md) | This component helps detecting or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property. |
+|  [DeviceDetector](./x-components.devicedetector.md) | This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property. |
 |  [DirectionalFocusNavigationService](./x-components.directionalfocusnavigationservice.md) | Implementation of [SpatialNavigation](./x-components.spatialnavigation.md) using directional focus. |
 |  [DisableAnimationMixin](./x-components.disableanimationmixin.md) | Mixin to ease disabling animations. |
 |  [EditableNumberRangeFilter](./x-components.editablenumberrangefilter.md) | <p>Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.</p><p>It provides a default slot, with some utils bind, to customize the whole component; and two named slots <code>apply-content</code> and <code>clear-content</code> to override each button content.</p><p>If <code>instant</code> prop is true, the needed events are emitted immediately; else, apply button is rendered to confirm to do it. False by default.</p><p>If <code>clear</code> prop is true, clear button, which sets to null component min and max values, is rendered. True by default.</p> |

package/docs/API-reference/components/device/x-components.device-detector.md

@@ -6,7 +6,7 @@ title: DeviceDetector
 
 # DeviceDetector
 
-This component helps detecting or setting a device, that can be used later to create different
+This component helps to detect or setting a device, that can be used later to create different
 layouts optimized for different devices. This detected device is available under the {@link
 XComponentAliasAPI.device} property.
 
@@ -31,7 +31,7 @@ name given an object containing all the possible breakpoints.
 
 _Try resizing the browser window!_
 
-```vue
+```vue live
 <template>
   <div>
     <DeviceDetector :breakpoints="breakpoints" />
@@ -67,7 +67,7 @@ matter what the window width is.
 
 _Try resizing the window to check that it never changes_
 
-```vue
+```vue live
 <template>
   <div>
     <DeviceDetector force="mobile" :breakpoints="breakpoints" />
@@ -103,7 +103,7 @@ payload. This device is stored in a data variable and then displayed.
 
 _Try resizing the browser window!_
 
-```vue
+```vue live
 <template>
   <div>
     <DeviceDetector :breakpoints="breakpoints" @DeviceProvided="storeDevice" />

package/js/components/sliding-panel.vue.js

@@ -80,7 +80,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-6942496e";
+  const __vue_scope_id__ = "data-v-6da6aa97";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/sliding-panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      :class=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n  import { dynamicPropsMixin } from './dynamic-props.mixin';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Mixins(\n    dynamicPropsMixin(['buttonClass', 'scrollContainerClass'])\n  ) {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel-at-start': this.isScrollAtStart,\n        'x-sliding-panel-at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      if (this.$refs.scrollContainer !== undefined) {\n        const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n        this.isScrollAtStart = !scrollLeft;\n        /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n         *  less than the scroll width even when the scroll is at the end */\n        this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n      }\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n    }\n    .x-sliding-panel-button-left {\n      left: 0;\n    }\n\n    .x-sliding-panel-button-right {\n      right: 0;\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow-x: auto;\n      overflow-y: hidden;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n\n      > * {\n        flex: 0 0 auto;\n      }\n    }\n\n    &:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) {\n      .x-sliding-panel-button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n\n    &:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) {\n      .x-sliding-panel-button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      :class=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n  import { dynamicPropsMixin } from './dynamic-props.mixin';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Mixins(\n    dynamicPropsMixin(['buttonClass', 'scrollContainerClass'])\n  ) {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel-at-start': this.isScrollAtStart,\n        'x-sliding-panel-at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(50, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      if (this.$refs.scrollContainer !== undefined) {\n        const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n        this.isScrollAtStart = !scrollLeft;\n        /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n         *  less than the scroll width even when the scroll is at the end */\n        this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n      }\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(50, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n    }\n    .x-sliding-panel-button-left {\n      left: 0;\n    }\n\n    .x-sliding-panel-button-right {\n      right: 0;\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow-x: auto;\n      overflow-y: hidden;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n\n      > * {\n        flex: 0 0 auto;\n      }\n    }\n\n    &:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) {\n      .x-sliding-panel-button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n\n    &:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) {\n      .x-sliding-panel-button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/sliding-panel.vue_rollup-plugin-vue_script.vue.js

@@ -146,10 +146,10 @@ __decorate([
     Prop({ default: true })
 ], SlidingPanel.prototype, "resetOnContentChange", void 0);
 __decorate([
-    Debounce(100, { leading: true })
+    Debounce(50, { leading: true })
 ], SlidingPanel.prototype, "restoreAndUpdateScroll", null);
 __decorate([
-    Debounce(100, { leading: true })
+    Debounce(50, { leading: true })
 ], SlidingPanel.prototype, "debouncedUpdateScrollPosition", null);
 SlidingPanel = __decorate([
     Component

package/js/components/sliding-panel.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/sliding-panel.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n  import { dynamicPropsMixin } from './dynamic-props.mixin';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Mixins(\n    dynamicPropsMixin(['buttonClass', 'scrollContainerClass'])\n  ) {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel-at-start': this.isScrollAtStart,\n        'x-sliding-panel-at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      if (this.$refs.scrollContainer !== undefined) {\n        const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n        this.isScrollAtStart = !scrollLeft;\n        /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n         *  less than the scroll width even when the scroll is at the end */\n        this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n      }\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sliding-panel.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/sliding-panel.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n  import { dynamicPropsMixin } from './dynamic-props.mixin';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Mixins(\n    dynamicPropsMixin(['buttonClass', 'scrollContainerClass'])\n  ) {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel-at-start': this.isScrollAtStart,\n        'x-sliding-panel-at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(50, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      if (this.$refs.scrollContainer !== undefined) {\n        const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n        this.isScrollAtStart = !scrollLeft;\n        /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n         *  less than the scroll width even when the scroll is at the end */\n        this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n      }\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(50, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n"],"names":[],"mappings":"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"}

package/js/components/sliding-panel.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-sliding-panel[data-v-6942496e] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-6942496e] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2; /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel .x-sliding-panel-button-left[data-v-6942496e] {\n  left: 0;\n}\n.x-sliding-panel .x-sliding-panel-button-right[data-v-6942496e] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-6942496e] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-6942496e]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel__scroll > *[data-v-6942496e] {\n  flex: 0 0 auto;\n}\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left[data-v-6942496e] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right[data-v-6942496e] {\n  opacity: 1;\n  pointer-events: all;\n}";
+var css = ".x-sliding-panel[data-v-6da6aa97] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-6da6aa97] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2; /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel .x-sliding-panel-button-left[data-v-6da6aa97] {\n  left: 0;\n}\n.x-sliding-panel .x-sliding-panel-button-right[data-v-6da6aa97] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-6da6aa97] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-6da6aa97]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel__scroll > *[data-v-6da6aa97] {\n  flex: 0 0 auto;\n}\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left[data-v-6da6aa97] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right[data-v-6da6aa97] {\n  opacity: 1;\n  pointer-events: all;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/js/x-modules/device/components/device-detector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import GlobalEvents from 'vue-global-events';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps detecting or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(deviceXModule)],\n    components: {\n      GlobalEvents\n    }\n  })\n  export default class DeviceDetector extends Vue {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    @Prop({ default: () => ({}) })\n    public readonly breakpoints!: Record<Device, MaxWidth>;\n\n    /**\n     * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n     *\n     * @public\n     */\n    @Prop()\n    public readonly force?: Device;\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    @Prop({ default: 100 })\n    public readonly throttleMs!: number;\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    protected windowWidthPx: number | null = null;\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    protected throttledStoreWindowWidth = this.storeWindowWidth;\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    protected get sortedBreakpoints(): [Device, MaxWidth][] {\n      return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);\n    }\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    @XEmit('DeviceProvided')\n    public get detectedDevice(): string | null {\n      if (this.force) {\n        return this.force;\n      } else if (this.windowWidthPx === null) {\n        return null;\n      } else {\n        return (\n          this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n        );\n      }\n    }\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    protected storeWindowWidth(): void {\n      this.windowWidthPx = window.innerWidth;\n    }\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    @Watch('throttleMs', { immediate: true })\n    protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\n    }\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    mounted(): void {\n      this.storeWindowWidth();\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](./../../api/x-components.devicexevents.md)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import GlobalEvents from 'vue-global-events';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(deviceXModule)],\n    components: {\n      GlobalEvents\n    }\n  })\n  export default class DeviceDetector extends Vue {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    @Prop({ default: () => ({}) })\n    public readonly breakpoints!: Record<Device, MaxWidth>;\n\n    /**\n     * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n     *\n     * @public\n     */\n    @Prop()\n    public readonly force?: Device;\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    @Prop({ default: 100 })\n    public readonly throttleMs!: number;\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    protected windowWidthPx: number | null = null;\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    protected throttledStoreWindowWidth = this.storeWindowWidth;\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    protected get sortedBreakpoints(): [Device, MaxWidth][] {\n      return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);\n    }\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    @XEmit('DeviceProvided')\n    public get detectedDevice(): string | null {\n      if (this.force) {\n        return this.force;\n      } else if (this.windowWidthPx === null) {\n        return null;\n      } else {\n        return (\n          this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n        );\n      }\n    }\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    protected storeWindowWidth(): void {\n      this.windowWidthPx = window.innerWidth;\n    }\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    @Watch('throttleMs', { immediate: true })\n    protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\n    }\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    mounted(): void {\n      this.storeWindowWidth();\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](./../../api/x-components.devicexevents.md)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/device/components/device-detector.vue_rollup-plugin-vue_script.vue.js

@@ -8,7 +8,7 @@ import { throttle } from '../../../utils/throttle.js';
 import { deviceXModule } from '../x-module.js';
 
 /**
- * This component helps detecting or setting a device, that can be used later to create
+ * This component helps to detect or setting a device, that can be used later to create
  * different layouts optimized for different devices. This detected device is available under
  * the {@link XComponentAliasAPI.device} property.
  *

package/js/x-modules/device/components/device-detector.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n  import Vue from 'vue';\n  import GlobalEvents from 'vue-global-events';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps detecting or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(deviceXModule)],\n    components: {\n      GlobalEvents\n    }\n  })\n  export default class DeviceDetector extends Vue {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    @Prop({ default: () => ({}) })\n    public readonly breakpoints!: Record<Device, MaxWidth>;\n\n    /**\n     * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n     *\n     * @public\n     */\n    @Prop()\n    public readonly force?: Device;\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    @Prop({ default: 100 })\n    public readonly throttleMs!: number;\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    protected windowWidthPx: number | null = null;\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    protected throttledStoreWindowWidth = this.storeWindowWidth;\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    protected get sortedBreakpoints(): [Device, MaxWidth][] {\n      return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);\n    }\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    @XEmit('DeviceProvided')\n    public get detectedDevice(): string | null {\n      if (this.force) {\n        return this.force;\n      } else if (this.windowWidthPx === null) {\n        return null;\n      } else {\n        return (\n          this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n        );\n      }\n    }\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    protected storeWindowWidth(): void {\n      this.windowWidthPx = window.innerWidth;\n    }\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    @Watch('throttleMs', { immediate: true })\n    protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\n    }\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    mounted(): void {\n      this.storeWindowWidth();\n    }\n  }\n"],"names":[],"mappings":";;;;;;;;;AAkBE;;;;;;AAMG;AAOY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,GAAG,CAAA;AAAhC,IAAA,WAAA,GAAA;;AA0Bb;;;;AAIG;QACO,IAAa,CAAA,aAAA,GAAkB,IAAI,CAAC;AAE9C;;;;AAIG;;AAEO,QAAA,IAAA,CAAA,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,CAAC;KAqE7D;AAnEC;;;;;;;AAOG;AACH,IAAA,IAAc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;KAC3F;AAED;;;;;;;;AAQG;AAEH,IAAA,IAAW,cAAc,GAAA;QACvB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAC;AACnB,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;AACtC,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AAAM,aAAA;AACL,YAAA,QACE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,aAAc,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,EACrF;AACH,SAAA;KACF;AAED;;;;AAIG;IACO,gBAAgB,GAAA;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC;KACxC;AAED;;;;;;;AAOG;AAEO,IAAA,+BAA+B,CAAC,UAAkB,EAAA;;QAE1D,IAAI,CAAC,yBAAyB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;KAC9E;AAED;;;;;;AAMG;IACH,OAAO,GAAA;QACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;CACF,CAAA;AApGC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACyB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQvD,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACwB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ/B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AACa,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuCpC,UAAA,CAAA;IADC,KAAK,CAAC,gBAAgB,CAAC;AAWvB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,CAAA;AAoBD,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAIxC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,iCAAA,EAAA,IAAA,CAAA,CAAA;AAhGkB,cAAc,GAAA,UAAA,CAAA;AANlC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AACxC,QAAA,UAAU,EAAE;YACV,YAAY;AACb,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,cAAc,CA4GlC,CAAA;aA5GoB,cAAc;;;;"}
+{"version":3,"file":"device-detector.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n  import Vue from 'vue';\n  import GlobalEvents from 'vue-global-events';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(deviceXModule)],\n    components: {\n      GlobalEvents\n    }\n  })\n  export default class DeviceDetector extends Vue {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    @Prop({ default: () => ({}) })\n    public readonly breakpoints!: Record<Device, MaxWidth>;\n\n    /**\n     * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n     *\n     * @public\n     */\n    @Prop()\n    public readonly force?: Device;\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    @Prop({ default: 100 })\n    public readonly throttleMs!: number;\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    protected windowWidthPx: number | null = null;\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    protected throttledStoreWindowWidth = this.storeWindowWidth;\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    protected get sortedBreakpoints(): [Device, MaxWidth][] {\n      return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);\n    }\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    @XEmit('DeviceProvided')\n    public get detectedDevice(): string | null {\n      if (this.force) {\n        return this.force;\n      } else if (this.windowWidthPx === null) {\n        return null;\n      } else {\n        return (\n          this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n        );\n      }\n    }\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    protected storeWindowWidth(): void {\n      this.windowWidthPx = window.innerWidth;\n    }\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    @Watch('throttleMs', { immediate: true })\n    protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\n    }\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    mounted(): void {\n      this.storeWindowWidth();\n    }\n  }\n"],"names":[],"mappings":";;;;;;;;;AAkBE;;;;;;AAMG;AAOY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,GAAG,CAAA;AAAhC,IAAA,WAAA,GAAA;;AA0Bb;;;;AAIG;QACO,IAAa,CAAA,aAAA,GAAkB,IAAI,CAAC;AAE9C;;;;AAIG;;AAEO,QAAA,IAAA,CAAA,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,CAAC;KAqE7D;AAnEC;;;;;;;AAOG;AACH,IAAA,IAAc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;KAC3F;AAED;;;;;;;;AAQG;AAEH,IAAA,IAAW,cAAc,GAAA;QACvB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAC;AACnB,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;AACtC,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AAAM,aAAA;AACL,YAAA,QACE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,aAAc,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,EACrF;AACH,SAAA;KACF;AAED;;;;AAIG;IACO,gBAAgB,GAAA;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC;KACxC;AAED;;;;;;;AAOG;AAEO,IAAA,+BAA+B,CAAC,UAAkB,EAAA;;QAE1D,IAAI,CAAC,yBAAyB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;KAC9E;AAED;;;;;;AAMG;IACH,OAAO,GAAA;QACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;CACF,CAAA;AApGC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACyB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQvD,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACwB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ/B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AACa,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuCpC,UAAA,CAAA;IADC,KAAK,CAAC,gBAAgB,CAAC;AAWvB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,CAAA;AAoBD,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAIxC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,iCAAA,EAAA,IAAA,CAAA,CAAA;AAhGkB,cAAc,GAAA,UAAA,CAAA;AANlC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AACxC,QAAA,UAAU,EAAE;YACV,YAAY;AACb,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,cAAc,CA4GlC,CAAA;aA5GoB,cAAc;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.401",
+  "version": "3.0.0-alpha.403",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "029e8668a546f3233547259e4d1daa134b9acdb9"
+  "gitHead": "0d3d088f94be1a63002fb58a79545ddef0cff0dd"
 }

package/report/x-components.api.json

@@ -13764,7 +13764,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@empathyco/x-components!DeviceDetector:class",
-          "docComment": "/**\n * This component helps detecting or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\n",
+          "docComment": "/**\n * This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",

package/types/x-modules/device/components/device-detector.vue.d.ts

@@ -4,7 +4,7 @@ type Device = string;
 /** Alias just to improve code readiness. */
 type MaxWidth = number;
 /**
- * This component helps detecting or setting a device, that can be used later to create
+ * This component helps to detect or setting a device, that can be used later to create
  * different layouts optimized for different devices. This detected device is available under
  * the {@link XComponentAliasAPI.device} property.
  *