@studiometa/ui 0.2.23 → 0.2.24

package/molecules/Slider/SliderDots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/SliderDots.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n  $refs: {\n    dots: HTMLButtonElement[];\n  };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n  T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'SliderDots',\n    refs: ['dots[]'],\n  };\n\n  /**\n   * Get target.\n   * @returns {HTMLButtonElement[]}\n   */\n  get target() {\n    return this.$refs.dots;\n  }\n\n  /**\n   * The current active index.\n   */\n  currentIndex = 0;\n\n  /**\n   * Update dots classes according to the new index.\n   *\n   * @param   {number} index\n   * @returns {void}\n   */\n  update(index:number) {\n    this.leave(this.$refs.dots[this.currentIndex]);\n    this.enter(this.$refs.dots[index]);\n    this.currentIndex = index;\n  }\n\n  /**\n   * Go to the given index on dot click.\n   */\n  onDotsClick(event:MouseEvent, index:number) {\n    this.$parent.goTo(index);\n  }\n}\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,MAAM,mBAEH,eAAoC,mBAAmB,EAAuB;AAAA,EAItF,OAAO,SAAoB;AAAA,IACzB,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,eAAe;AAAA,EAQf,OAAO,OAAc;AACnB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,aAAa;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,MAAM;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA,EAKA,YAAY,OAAkB,OAAc;AAC1C,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n  $refs: {\n    dots: HTMLButtonElement[];\n  };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n  T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDots',\n    refs: ['dots[]'],\n  };\n\n  /**\n   * Get target.\n   * @returns {HTMLButtonElement[]}\n   */\n  get target() {\n    return this.$refs.dots;\n  }\n\n  /**\n   * The current active index.\n   */\n  currentIndex = 0;\n\n  /**\n   * Update dots classes according to the new index.\n   *\n   * @param   {number} index\n   * @returns {void}\n   */\n  update(index: number) {\n    this.leave(this.$refs.dots[this.currentIndex]);\n    this.enter(this.$refs.dots[index]);\n    this.currentIndex = index;\n  }\n\n  /**\n   * Go to the given index on dot click.\n   */\n  onDotsClick(event: MouseEvent, index: number) {\n    this.$parent.goTo(index);\n  }\n}\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,MAAM,mBAEH,eAAoC,mBAAmB,EAAuB;AAAA;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQf,OAAO,OAAe;AACpB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAmB,OAAe;AAC5C,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
   "names": []
 }

package/molecules/Slider/SliderDrag.cjs

@@ -29,19 +29,34 @@ __export(SliderDrag_exports, {
 module.exports = __toCommonJS(SliderDrag_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var SliderDrag = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit.Base) {
+  /**
+   * Test if the scroll should be blocked. Used with the touchmove event to prevent
+   * scrolling vertically when trying to drag the slider.
+   */
   get shouldPreventScroll() {
     const { distance } = this.$services.get("dragged");
     return Math.abs(distance.x) > this.$options.scrollLockThreshold && Math.abs(distance.x) > Math.abs(distance.y);
   }
+  /**
+   * Touchmove handler.
+   * @param   {TouchEvent} event
+   * @returns {void}
+   */
   onTouchmove(event) {
     if (this.shouldPreventScroll) {
       event.preventDefault();
     }
   }
+  /**
+   * Emit drag events.
+   */
   dragged(props) {
     this.$emit(props.mode, props);
   }
 };
+/**
+ * Config.
+ */
 __publicField(SliderDrag, "config", {
   name: "SliderDrag",
   emits: ["start", "drag", "drop", "inertia", "stop"],

package/molecules/Slider/SliderDrag.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/SliderDrag.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   * @param   {TouchEvent} event\n   * @returns {void}\n   */\n  onTouchmove(event:TouchEvent) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props:DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA+B;AAWxB,IAAM,aAAN,kBAA0D,4BAAS,sBAAI,EAE5E;AAAA,EAmBA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA,EAOA,YAAY,OAAkB;AAC5B,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA,EAKA,QAAQ,OAAwB;AAC9B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;AAxCE,cANW,YAMJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,EAClD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   * @param   {TouchEvent} event\n   * @returns {void}\n   */\n  onTouchmove(event: TouchEvent) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA+B;AAWxB,IAAM,aAAN,kBAA0D,4BAAS,sBAAI,EAE5E;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAmB;AAC7B,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;AAAA;AAAA;AAAA;AAxCE,cANW,YAMJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,EAClD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
   "names": []
 }

package/molecules/Slider/SliderDrag.js

@@ -1,5 +1,8 @@
 import { Base, withDrag } from "@studiometa/js-toolkit";
 class SliderDrag extends withDrag(Base) {
+  /**
+   * Config.
+   */
   static config = {
     name: "SliderDrag",
     emits: ["start", "drag", "drop", "inertia", "stop"],
@@ -10,15 +13,27 @@ class SliderDrag extends withDrag(Base) {
       }
     }
   };
+  /**
+   * Test if the scroll should be blocked. Used with the touchmove event to prevent
+   * scrolling vertically when trying to drag the slider.
+   */
   get shouldPreventScroll() {
     const { distance } = this.$services.get("dragged");
     return Math.abs(distance.x) > this.$options.scrollLockThreshold && Math.abs(distance.x) > Math.abs(distance.y);
   }
+  /**
+   * Touchmove handler.
+   * @param   {TouchEvent} event
+   * @returns {void}
+   */
   onTouchmove(event) {
     if (this.shouldPreventScroll) {
       event.preventDefault();
     }
   }
+  /**
+   * Emit drag events.
+   */
   dragged(props) {
     this.$emit(props.mode, props);
   }

package/molecules/Slider/SliderDrag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/SliderDrag.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   * @param   {TouchEvent} event\n   * @returns {void}\n   */\n  onTouchmove(event:TouchEvent) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props:DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
-  "mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA,EAOA,YAAY,OAAkB;AAC5B,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA,EAKA,QAAQ,OAAwB;AAC9B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   * @param   {TouchEvent} event\n   * @returns {void}\n   */\n  onTouchmove(event: TouchEvent) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
+  "mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAmB;AAC7B,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
   "names": []
 }

package/molecules/Slider/SliderItem.cjs

@@ -32,19 +32,55 @@ var import_utils = require("@studiometa/js-toolkit/utils");
 var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(import_js_toolkit.Base, {
   threshold: [0, 1]
 }) {
+  /**
+   * Wether the SliderItem is visible or not.
+   * @type {boolean}
+   */
   isVisible = false;
+  /**
+   * The SliderItem `x` position.
+   * @type {number}
+   */
   x = 0;
+  /**
+   * The smoothed `x` position.
+   * @type {number}
+   */
   dampedX = 0;
-  rect;
-  mounted() {
-    this.updateRectAdjustedWithX();
+  /**
+   * Item original position.
+   */
+  __rect;
+  shouldEvaluateRect = false;
+  get rect() {
+    if (!this.__rect || this.shouldEvaluateRect) {
+      this.shouldEvaluateRect = false;
+      const x = this.x * -1;
+      const rect = this.$el.getBoundingClientRect().toJSON();
+      this.__rect = {
+        ...rect,
+        left: rect.left + x,
+        right: rect.left + x + rect.width,
+        x: rect.left + x
+      };
+    }
+    return this.__rect;
   }
+  /**
+   * Update SliderItem bounding rectangle on resize.
+   */
   resized() {
-    this.updateRectAdjustedWithX();
+    this.shouldEvaluateRect = true;
   }
+  /**
+   * Reset position to `0` on destroy.
+   */
   destroyed() {
     this.moveInstantly(0);
   }
+  /**
+   * Intersected hook.
+   */
   intersected([{ intersectionRatio, isIntersecting }]) {
     if (intersectionRatio >= 1) {
       this.$emit("is-fully-visible");
@@ -58,6 +94,14 @@ var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(i
     }
     this.isVisible = isIntersecting;
   }
+  /**
+   * Ticked hook.
+   *
+   * @todo create AbstractSliderItem with `render` method
+   * @todo add state to SliderItem
+   * @todo add origin to SliderItem
+   * @returns {void}
+   */
   ticked() {
     this.dampedX = (0, import_utils.damp)(this.x, this.dampedX, 0.1, 1e-5);
     this.render();
@@ -65,45 +109,62 @@ var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(i
       this.$services.disable("ticked");
     }
   }
+  /**
+   * Enable the SliderItem.
+   */
   activate() {
     this.$el.classList.add("is-active");
   }
+  /**
+   * Disable the SliderItem.
+   */
   disactivate() {
     this.$el.classList.remove("is-active");
   }
+  /**
+   * Move the SliderItem to the given target position.
+   */
   move(targetPosition) {
     this.x = targetPosition;
     if (!this.$services.has("ticked")) {
       this.$services.enable("ticked");
     }
   }
+  /**
+   * Move the SliderItem instantly to the given target position.
+   */
   moveInstantly(targetPosition) {
     this.x = targetPosition;
     this.dampedX = targetPosition;
     this.render();
   }
+  /**
+   * Render the component.
+   */
   render() {
     import_utils.domScheduler.write(() => {
       (0, import_utils.transform)(this.$el, { x: this.dampedX });
     });
   }
+  /**
+   * Check if SliderItem is partially visible for the given target position.
+   */
   willBeVisible(targetPosition) {
     return this.rect.x + targetPosition < window.innerWidth * 1.5 && this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5;
   }
+  /**
+   * Check if SliderItem is fully visible for the given target position.
+   *
+   * @param   {number} targetPosition
+   * @returns {boolean}
+   */
   willBeFullyVisible(targetPosition) {
     return this.rect.x + targetPosition < window.innerWidth && this.rect.x + targetPosition > 0 && this.rect.x + targetPosition + this.rect.width < window.innerWidth && this.rect.x + targetPosition + this.rect.width > 0;
   }
-  updateRectAdjustedWithX() {
-    const x = this.x * -1;
-    const rect = this.$el.getBoundingClientRect().toJSON();
-    this.rect = {
-      ...rect,
-      left: rect.left + x,
-      right: rect.left + x + rect.width,
-      x: rect.left + x
-    };
-  }
 };
+/**
+ * Config.
+ */
 __publicField(SliderItem, "config", {
   name: "SliderItem",
   emits: ["is-fully-visible", "is-partially-visible", "is-hidden"]

package/molecules/Slider/SliderItem.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/SliderItem.ts"],
-  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends withIntersectionObserver(Base, {\n  threshold: [0, 1],\n})<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderItem',\n    emits: ['is-fully-visible', 'is-partially-visible', 'is-hidden'],\n  };\n\n  /**\n   * Wether the SliderItem is visible or not.\n   * @type {boolean}\n   */\n  isVisible = false;\n\n  /**\n   * The SliderItem `x` position.\n   * @type {number}\n   */\n  x = 0;\n\n  /**\n   * The smoothed `x` position.\n   * @type {number}\n   */\n  dampedX = 0;\n\n  /**\n   * Item original position.\n   */\n  rect:{\n    x: number;\n    y: number;\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n    width: number;\n    height: number;\n  };\n\n  /**\n   * Set SliderItem bounding rectangle on mount.\n   */\n  mounted() {\n    this.updateRectAdjustedWithX();\n  }\n\n  /**\n   * Update SliderItem bounding rectangle on resize.\n   */\n  resized() {\n    this.updateRectAdjustedWithX();\n  }\n\n  /**\n   * Reset position to `0` on destroy.\n   */\n  destroyed() {\n    this.moveInstantly(0);\n  }\n\n  /**\n   * Intersected hook.\n   */\n  intersected([{ intersectionRatio, isIntersecting }]:IntersectionObserverEntry[]) {\n    if (intersectionRatio >= 1) {\n      this.$emit('is-fully-visible');\n      this.$el.setAttribute('aria-hidden', 'false');\n    } else if (intersectionRatio > 0) {\n      this.$emit('is-partially-visible');\n      this.$el.setAttribute('aria-hidden', 'true');\n    } else {\n      this.$emit('is-hidden');\n      this.$el.setAttribute('aria-hidden', 'true');\n    }\n\n    this.isVisible = isIntersecting;\n  }\n\n  /**\n   * Ticked hook.\n   *\n   * @todo create AbstractSliderItem with `render` method\n   * @todo add state to SliderItem\n   * @todo add origin to SliderItem\n   * @returns {void}\n   */\n  ticked() {\n    this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n    this.render();\n\n    if (this.dampedX === this.x) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Enable the SliderItem.\n   */\n  activate() {\n    this.$el.classList.add('is-active');\n  }\n\n  /**\n   * Disable the SliderItem.\n   */\n  disactivate() {\n    this.$el.classList.remove('is-active');\n  }\n\n  /**\n   * Move the SliderItem to the given target position.\n   */\n  move(targetPosition:number) {\n    this.x = targetPosition;\n\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n  }\n\n  /**\n   * Move the SliderItem instantly to the given target position.\n   */\n  moveInstantly(targetPosition:number) {\n    this.x = targetPosition;\n    this.dampedX = targetPosition;\n    this.render();\n  }\n\n  /**\n   * Render the component.\n   */\n  render() {\n    domScheduler.write(() => {\n      transform(this.$el, { x: this.dampedX });\n    });\n  }\n\n  /**\n   * Check if SliderItem is partially visible for the given target position.\n   */\n  willBeVisible(targetPosition:number) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth * 1.5 &&\n      this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5\n    );\n  }\n\n  /**\n   * Check if SliderItem is fully visible for the given target position.\n   *\n   * @param   {number} targetPosition\n   * @returns {boolean}\n   */\n  willBeFullyVisible(targetPosition) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth &&\n      this.rect.x + targetPosition > 0 &&\n      this.rect.x + targetPosition + this.rect.width < window.innerWidth &&\n      this.rect.x + targetPosition + this.rect.width > 0\n    );\n  }\n\n  /**\n   * Update the bounding rectangle values without the current transformation.\n   *\n   * @returns {void}\n   */\n  updateRectAdjustedWithX() {\n    const x = this.x * -1;\n    const rect:this['rect'] = this.$el.getBoundingClientRect().toJSON();\n\n    this.rect = {\n      ...rect,\n      left: rect.left + x,\n      right: rect.left + x + rect.width,\n      x: rect.left + x,\n    };\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA+C;AAE/C,mBAA8C;AAKvC,IAAM,aAAN,kBAA0D,4CAAyB,wBAAM;AAAA,EAC9F,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAK;AAAA,EAaJ,YAAY;AAAA,EAMZ,IAAI;AAAA,EAMJ,UAAU;AAAA,EAKV;AAAA,EAcA,UAAU;AACR,SAAK,wBAAwB;AAAA,EAC/B;AAAA,EAKA,UAAU;AACR,SAAK,wBAAwB;AAAA,EAC/B;AAAA,EAKA,YAAY;AACV,SAAK,cAAc,CAAC;AAAA,EACtB;AAAA,EAKA,YAAY,CAAC,EAAE,mBAAmB,eAAe,CAAC,GAA+B;AAC/E,QAAI,qBAAqB,GAAG;AAC1B,WAAK,MAAM,kBAAkB;AAC7B,WAAK,IAAI,aAAa,eAAe,OAAO;AAAA,IAC9C,WAAW,oBAAoB,GAAG;AAChC,WAAK,MAAM,sBAAsB;AACjC,WAAK,IAAI,aAAa,eAAe,MAAM;AAAA,IAC7C,OAAO;AACL,WAAK,MAAM,WAAW;AACtB,WAAK,IAAI,aAAa,eAAe,MAAM;AAAA,IAC7C;AAEA,SAAK,YAAY;AAAA,EACnB;AAAA,EAUA,SAAS;AACP,SAAK,cAAU,mBAAK,KAAK,GAAG,KAAK,SAAS,KAAK,IAAO;AACtD,SAAK,OAAO;AAEZ,QAAI,KAAK,YAAY,KAAK,GAAG;AAC3B,WAAK,UAAU,QAAQ,QAAQ;AAAA,IACjC;AAAA,EACF;AAAA,EAKA,WAAW;AACT,SAAK,IAAI,UAAU,IAAI,WAAW;AAAA,EACpC;AAAA,EAKA,cAAc;AACZ,SAAK,IAAI,UAAU,OAAO,WAAW;AAAA,EACvC;AAAA,EAKA,KAAK,gBAAuB;AAC1B,SAAK,IAAI;AAET,QAAI,CAAC,KAAK,UAAU,IAAI,QAAQ,GAAG;AACjC,WAAK,UAAU,OAAO,QAAQ;AAAA,IAChC;AAAA,EACF;AAAA,EAKA,cAAc,gBAAuB;AACnC,SAAK,IAAI;AACT,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACd;AAAA,EAKA,SAAS;AACP,8BAAa,MAAM,MAAM;AACvB,kCAAU,KAAK,KAAK,EAAE,GAAG,KAAK,QAAQ,CAAC;AAAA,IACzC,CAAC;AAAA,EACH;AAAA,EAKA,cAAc,gBAAuB;AACnC,WACE,KAAK,KAAK,IAAI,iBAAiB,OAAO,aAAa,OACnD,KAAK,KAAK,IAAI,iBAAiB,KAAK,KAAK,QAAQ,OAAO,aAAa;AAAA,EAEzE;AAAA,EAQA,mBAAmB,gBAAgB;AACjC,WACE,KAAK,KAAK,IAAI,iBAAiB,OAAO,cACtC,KAAK,KAAK,IAAI,iBAAiB,KAC/B,KAAK,KAAK,IAAI,iBAAiB,KAAK,KAAK,QAAQ,OAAO,cACxD,KAAK,KAAK,IAAI,iBAAiB,KAAK,KAAK,QAAQ;AAAA,EAErD;AAAA,EAOA,0BAA0B;AACxB,UAAM,IAAI,KAAK,IAAI;AACnB,UAAM,OAAoB,KAAK,IAAI,sBAAsB,EAAE,OAAO;AAElE,SAAK,OAAO;AAAA,MACV,GAAG;AAAA,MACH,MAAM,KAAK,OAAO;AAAA,MAClB,OAAO,KAAK,OAAO,IAAI,KAAK;AAAA,MAC5B,GAAG,KAAK,OAAO;AAAA,IACjB;AAAA,EACF;AACF;AAjLE,cANW,YAMJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,OAAO,CAAC,oBAAoB,wBAAwB,WAAW;AACjE;",
+  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends withIntersectionObserver(Base, {\n  threshold: [0, 1],\n})<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderItem',\n    emits: ['is-fully-visible', 'is-partially-visible', 'is-hidden'],\n  };\n\n  /**\n   * Wether the SliderItem is visible or not.\n   * @type {boolean}\n   */\n  isVisible = false;\n\n  /**\n   * The SliderItem `x` position.\n   * @type {number}\n   */\n  x = 0;\n\n  /**\n   * The smoothed `x` position.\n   * @type {number}\n   */\n  dampedX = 0;\n\n  /**\n   * Item original position.\n   */\n  __rect: {\n    x: number;\n    y: number;\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n    width: number;\n    height: number;\n  };\n\n  shouldEvaluateRect = false;\n\n  get rect() {\n    if (!this.__rect || this.shouldEvaluateRect) {\n      this.shouldEvaluateRect = false;\n      const x = this.x * -1;\n      const rect = this.$el.getBoundingClientRect().toJSON();\n      this.__rect = {\n        ...rect,\n        left: rect.left + x,\n        right: rect.left + x + rect.width,\n        x: rect.left + x,\n      };\n    }\n\n    return this.__rect;\n  }\n\n  /**\n   * Update SliderItem bounding rectangle on resize.\n   */\n  resized() {\n    this.shouldEvaluateRect = true;\n  }\n\n  /**\n   * Reset position to `0` on destroy.\n   */\n  destroyed() {\n    this.moveInstantly(0);\n  }\n\n  /**\n   * Intersected hook.\n   */\n  intersected([{ intersectionRatio, isIntersecting }]: IntersectionObserverEntry[]) {\n    if (intersectionRatio >= 1) {\n      this.$emit('is-fully-visible');\n      this.$el.setAttribute('aria-hidden', 'false');\n    } else if (intersectionRatio > 0) {\n      this.$emit('is-partially-visible');\n      this.$el.setAttribute('aria-hidden', 'true');\n    } else {\n      this.$emit('is-hidden');\n      this.$el.setAttribute('aria-hidden', 'true');\n    }\n\n    this.isVisible = isIntersecting;\n  }\n\n  /**\n   * Ticked hook.\n   *\n   * @todo create AbstractSliderItem with `render` method\n   * @todo add state to SliderItem\n   * @todo add origin to SliderItem\n   * @returns {void}\n   */\n  ticked() {\n    this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n    this.render();\n\n    if (this.dampedX === this.x) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Enable the SliderItem.\n   */\n  activate() {\n    this.$el.classList.add('is-active');\n  }\n\n  /**\n   * Disable the SliderItem.\n   */\n  disactivate() {\n    this.$el.classList.remove('is-active');\n  }\n\n  /**\n   * Move the SliderItem to the given target position.\n   */\n  move(targetPosition: number) {\n    this.x = targetPosition;\n\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n  }\n\n  /**\n   * Move the SliderItem instantly to the given target position.\n   */\n  moveInstantly(targetPosition: number) {\n    this.x = targetPosition;\n    this.dampedX = targetPosition;\n    this.render();\n  }\n\n  /**\n   * Render the component.\n   */\n  render() {\n    domScheduler.write(() => {\n      transform(this.$el, { x: this.dampedX });\n    });\n  }\n\n  /**\n   * Check if SliderItem is partially visible for the given target position.\n   */\n  willBeVisible(targetPosition: number) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth * 1.5 &&\n      this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5\n    );\n  }\n\n  /**\n   * Check if SliderItem is fully visible for the given target position.\n   *\n   * @param   {number} targetPosition\n   * @returns {boolean}\n   */\n  willBeFullyVisible(targetPosition) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth &&\n      this.rect.x + targetPosition > 0 &&\n      this.rect.x + targetPosition + this.rect.width < window.innerWidth &&\n      this.rect.x + targetPosition + this.rect.width > 0\n    );\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/molecules/Slider/SliderItem.d.ts

@@ -27,7 +27,18 @@ export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderI
     /**
      * Item original position.
      */
-    rect: {
+    __rect: {
+        x: number;
+        y: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    shouldEvaluateRect: boolean;
+    get rect(): {
         x: number;
         y: number;
         top: number;
@@ -37,10 +48,6 @@ export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderI
         width: number;
         height: number;
     };
-    /**
-     * Set SliderItem bounding rectangle on mount.
-     */
-    mounted(): void;
     /**
      * Update SliderItem bounding rectangle on resize.
      */
@@ -93,11 +100,5 @@ export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderI
      * @returns {boolean}
      */
     willBeFullyVisible(targetPosition: any): boolean;
-    /**
-     * Update the bounding rectangle values without the current transformation.
-     *
-     * @returns {void}
-     */
-    updateRectAdjustedWithX(): void;
 }
 export {};

package/molecules/Slider/SliderItem.js

@@ -3,23 +3,62 @@ import { damp, domScheduler, transform } from "@studiometa/js-toolkit/utils";
 class SliderItem extends withIntersectionObserver(Base, {
   threshold: [0, 1]
 }) {
+  /**
+   * Config.
+   */
   static config = {
     name: "SliderItem",
     emits: ["is-fully-visible", "is-partially-visible", "is-hidden"]
   };
+  /**
+   * Wether the SliderItem is visible or not.
+   * @type {boolean}
+   */
   isVisible = false;
+  /**
+   * The SliderItem `x` position.
+   * @type {number}
+   */
   x = 0;
+  /**
+   * The smoothed `x` position.
+   * @type {number}
+   */
   dampedX = 0;
-  rect;
-  mounted() {
-    this.updateRectAdjustedWithX();
+  /**
+   * Item original position.
+   */
+  __rect;
+  shouldEvaluateRect = false;
+  get rect() {
+    if (!this.__rect || this.shouldEvaluateRect) {
+      this.shouldEvaluateRect = false;
+      const x = this.x * -1;
+      const rect = this.$el.getBoundingClientRect().toJSON();
+      this.__rect = {
+        ...rect,
+        left: rect.left + x,
+        right: rect.left + x + rect.width,
+        x: rect.left + x
+      };
+    }
+    return this.__rect;
   }
+  /**
+   * Update SliderItem bounding rectangle on resize.
+   */
   resized() {
-    this.updateRectAdjustedWithX();
+    this.shouldEvaluateRect = true;
   }
+  /**
+   * Reset position to `0` on destroy.
+   */
   destroyed() {
     this.moveInstantly(0);
   }
+  /**
+   * Intersected hook.
+   */
   intersected([{ intersectionRatio, isIntersecting }]) {
     if (intersectionRatio >= 1) {
       this.$emit("is-fully-visible");
@@ -33,6 +72,14 @@ class SliderItem extends withIntersectionObserver(Base, {
     }
     this.isVisible = isIntersecting;
   }
+  /**
+   * Ticked hook.
+   *
+   * @todo create AbstractSliderItem with `render` method
+   * @todo add state to SliderItem
+   * @todo add origin to SliderItem
+   * @returns {void}
+   */
   ticked() {
     this.dampedX = damp(this.x, this.dampedX, 0.1, 1e-5);
     this.render();
@@ -40,44 +87,58 @@ class SliderItem extends withIntersectionObserver(Base, {
       this.$services.disable("ticked");
     }
   }
+  /**
+   * Enable the SliderItem.
+   */
   activate() {
     this.$el.classList.add("is-active");
   }
+  /**
+   * Disable the SliderItem.
+   */
   disactivate() {
     this.$el.classList.remove("is-active");
   }
+  /**
+   * Move the SliderItem to the given target position.
+   */
   move(targetPosition) {
     this.x = targetPosition;
     if (!this.$services.has("ticked")) {
       this.$services.enable("ticked");
     }
   }
+  /**
+   * Move the SliderItem instantly to the given target position.
+   */
   moveInstantly(targetPosition) {
     this.x = targetPosition;
     this.dampedX = targetPosition;
     this.render();
   }
+  /**
+   * Render the component.
+   */
   render() {
     domScheduler.write(() => {
       transform(this.$el, { x: this.dampedX });
     });
   }
+  /**
+   * Check if SliderItem is partially visible for the given target position.
+   */
   willBeVisible(targetPosition) {
     return this.rect.x + targetPosition < window.innerWidth * 1.5 && this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5;
   }
+  /**
+   * Check if SliderItem is fully visible for the given target position.
+   *
+   * @param   {number} targetPosition
+   * @returns {boolean}
+   */
   willBeFullyVisible(targetPosition) {
     return this.rect.x + targetPosition < window.innerWidth && this.rect.x + targetPosition > 0 && this.rect.x + targetPosition + this.rect.width < window.innerWidth && this.rect.x + targetPosition + this.rect.width > 0;
   }
-  updateRectAdjustedWithX() {
-    const x = this.x * -1;
-    const rect = this.$el.getBoundingClientRect().toJSON();
-    this.rect = {
-      ...rect,
-      left: rect.left + x,
-      right: rect.left + x + rect.width,
-      x: rect.left + x
-    };
-  }
 }
 export {
   SliderItem

package/molecules/Slider/SliderItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/SliderItem.ts"],
-  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends withIntersectionObserver(Base, {\n  threshold: [0, 1],\n})<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderItem',\n    emits: ['is-fully-visible', 'is-partially-visible', 'is-hidden'],\n  };\n\n  /**\n   * Wether the SliderItem is visible or not.\n   * @type {boolean}\n   */\n  isVisible = false;\n\n  /**\n   * The SliderItem `x` position.\n   * @type {number}\n   */\n  x = 0;\n\n  /**\n   * The smoothed `x` position.\n   * @type {number}\n   */\n  dampedX = 0;\n\n  /**\n   * Item original position.\n   */\n  rect:{\n    x: number;\n    y: number;\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n    width: number;\n    height: number;\n  };\n\n  /**\n   * Set SliderItem bounding rectangle on mount.\n   */\n  mounted() {\n    this.updateRectAdjustedWithX();\n  }\n\n  /**\n   * Update SliderItem bounding rectangle on resize.\n   */\n  resized() {\n    this.updateRectAdjustedWithX();\n  }\n\n  /**\n   * Reset position to `0` on destroy.\n   */\n  destroyed() {\n    this.moveInstantly(0);\n  }\n\n  /**\n   * Intersected hook.\n   */\n  intersected([{ intersectionRatio, isIntersecting }]:IntersectionObserverEntry[]) {\n    if (intersectionRatio >= 1) {\n      this.$emit('is-fully-visible');\n      this.$el.setAttribute('aria-hidden', 'false');\n    } else if (intersectionRatio > 0) {\n      this.$emit('is-partially-visible');\n      this.$el.setAttribute('aria-hidden', 'true');\n    } else {\n      this.$emit('is-hidden');\n      this.$el.setAttribute('aria-hidden', 'true');\n    }\n\n    this.isVisible = isIntersecting;\n  }\n\n  /**\n   * Ticked hook.\n   *\n   * @todo create AbstractSliderItem with `render` method\n   * @todo add state to SliderItem\n   * @todo add origin to SliderItem\n   * @returns {void}\n   */\n  ticked() {\n    this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n    this.render();\n\n    if (this.dampedX === this.x) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Enable the SliderItem.\n   */\n  activate() {\n    this.$el.classList.add('is-active');\n  }\n\n  /**\n   * Disable the SliderItem.\n   */\n  disactivate() {\n    this.$el.classList.remove('is-active');\n  }\n\n  /**\n   * Move the SliderItem to the given target position.\n   */\n  move(targetPosition:number) {\n    this.x = targetPosition;\n\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n  }\n\n  /**\n   * Move the SliderItem instantly to the given target position.\n   */\n  moveInstantly(targetPosition:number) {\n    this.x = targetPosition;\n    this.dampedX = targetPosition;\n    this.render();\n  }\n\n  /**\n   * Render the component.\n   */\n  render() {\n    domScheduler.write(() => {\n      transform(this.$el, { x: this.dampedX });\n    });\n  }\n\n  /**\n   * Check if SliderItem is partially visible for the given target position.\n   */\n  willBeVisible(targetPosition:number) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth * 1.5 &&\n      this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5\n    );\n  }\n\n  /**\n   * Check if SliderItem is fully visible for the given target position.\n   *\n   * @param   {number} targetPosition\n   * @returns {boolean}\n   */\n  willBeFullyVisible(targetPosition) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth &&\n      this.rect.x + targetPosition > 0 &&\n      this.rect.x + targetPosition + this.rect.width < window.innerWidth &&\n      this.rect.x + targetPosition + this.rect.width > 0\n    );\n  }\n\n  /**\n   * Update the bounding rectangle values without the current transformation.\n   *\n   * @returns {void}\n   */\n  updateRectAdjustedWithX() {\n    const x = this.x * -1;\n    const rect:this['rect'] = this.$el.getBoundingClientRect().toJSON();\n\n    this.rect = {\n      ...rect,\n      left: rect.left + x,\n      right: rect.left + x + rect.width,\n      x: rect.left + x,\n    };\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAM,gCAAgC;AAE/C,SAAS,MAAM,cAAc,iBAAiB;AAKvC,MAAM,mBAAoD,yBAAyB,MAAM;AAAA,EAC9F,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAK;AAAA,EAIJ,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,oBAAoB,wBAAwB,WAAW;AAAA,EACjE;AAAA,EAMA,YAAY;AAAA,EAMZ,IAAI;AAAA,EAMJ,UAAU;AAAA,EAKV;AAAA,EAcA,UAAU;AACR,SAAK,wBAAwB;AAAA,EAC/B;AAAA,EAKA,UAAU;AACR,SAAK,wBAAwB;AAAA,EAC/B;AAAA,EAKA,YAAY;AACV,SAAK,cAAc,CAAC;AAAA,EACtB;AAAA,EAKA,YAAY,CAAC,EAAE,mBAAmB,eAAe,CAAC,GAA+B;AAC/E,QAAI,qBAAqB,GAAG;AAC1B,WAAK,MAAM,kBAAkB;AAC7B,WAAK,IAAI,aAAa,eAAe,OAAO;AAAA,IAC9C,WAAW,oBAAoB,GAAG;AAChC,WAAK,MAAM,sBAAsB;AACjC,WAAK,IAAI,aAAa,eAAe,MAAM;AAAA,IAC7C,OAAO;AACL,WAAK,MAAM,WAAW;AACtB,WAAK,IAAI,aAAa,eAAe,MAAM;AAAA,IAC7C;AAEA,SAAK,YAAY;AAAA,EACnB;AAAA,EAUA,SAAS;AACP,SAAK,UAAU,KAAK,KAAK,GAAG,KAAK,SAAS,KAAK,IAAO;AACtD,SAAK,OAAO;AAEZ,QAAI,KAAK,YAAY,KAAK,GAAG;AAC3B,WAAK,UAAU,QAAQ,QAAQ;AAAA,IACjC;AAAA,EACF;AAAA,EAKA,WAAW;AACT,SAAK,IAAI,UAAU,IAAI,WAAW;AAAA,EACpC;AAAA,EAKA,cAAc;AACZ,SAAK,IAAI,UAAU,OAAO,WAAW;AAAA,EACvC;AAAA,EAKA,KAAK,gBAAuB;AAC1B,SAAK,IAAI;AAET,QAAI,CAAC,KAAK,UAAU,IAAI,QAAQ,GAAG;AACjC,WAAK,UAAU,OAAO,QAAQ;AAAA,IAChC;AAAA,EACF;AAAA,EAKA,cAAc,gBAAuB;AACnC,SAAK,IAAI;AACT,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACd;AAAA,EAKA,SAAS;AACP,iBAAa,MAAM,MAAM;AACvB,gBAAU,KAAK,KAAK,EAAE,GAAG,KAAK,QAAQ,CAAC;AAAA,IACzC,CAAC;AAAA,EACH;AAAA,EAKA,cAAc,gBAAuB;AACnC,WACE,KAAK,KAAK,IAAI,iBAAiB,OAAO,aAAa,OACnD,KAAK,KAAK,IAAI,iBAAiB,KAAK,KAAK,QAAQ,OAAO,aAAa;AAAA,EAEzE;AAAA,EAQA,mBAAmB,gBAAgB;AACjC,WACE,KAAK,KAAK,IAAI,iBAAiB,OAAO,cACtC,KAAK,KAAK,IAAI,iBAAiB,KAC/B,KAAK,KAAK,IAAI,iBAAiB,KAAK,KAAK,QAAQ,OAAO,cACxD,KAAK,KAAK,IAAI,iBAAiB,KAAK,KAAK,QAAQ;AAAA,EAErD;AAAA,EAOA,0BAA0B;AACxB,UAAM,IAAI,KAAK,IAAI;AACnB,UAAM,OAAoB,KAAK,IAAI,sBAAsB,EAAE,OAAO;AAElE,SAAK,OAAO;AAAA,MACV,GAAG;AAAA,MACH,MAAM,KAAK,OAAO;AAAA,MAClB,OAAO,KAAK,OAAO,IAAI,KAAK;AAAA,MAC5B,GAAG,KAAK,OAAO;AAAA,IACjB;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends withIntersectionObserver(Base, {\n  threshold: [0, 1],\n})<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderItem',\n    emits: ['is-fully-visible', 'is-partially-visible', 'is-hidden'],\n  };\n\n  /**\n   * Wether the SliderItem is visible or not.\n   * @type {boolean}\n   */\n  isVisible = false;\n\n  /**\n   * The SliderItem `x` position.\n   * @type {number}\n   */\n  x = 0;\n\n  /**\n   * The smoothed `x` position.\n   * @type {number}\n   */\n  dampedX = 0;\n\n  /**\n   * Item original position.\n   */\n  __rect: {\n    x: number;\n    y: number;\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n    width: number;\n    height: number;\n  };\n\n  shouldEvaluateRect = false;\n\n  get rect() {\n    if (!this.__rect || this.shouldEvaluateRect) {\n      this.shouldEvaluateRect = false;\n      const x = this.x * -1;\n      const rect = this.$el.getBoundingClientRect().toJSON();\n      this.__rect = {\n        ...rect,\n        left: rect.left + x,\n        right: rect.left + x + rect.width,\n        x: rect.left + x,\n      };\n    }\n\n    return this.__rect;\n  }\n\n  /**\n   * Update SliderItem bounding rectangle on resize.\n   */\n  resized() {\n    this.shouldEvaluateRect = true;\n  }\n\n  /**\n   * Reset position to `0` on destroy.\n   */\n  destroyed() {\n    this.moveInstantly(0);\n  }\n\n  /**\n   * Intersected hook.\n   */\n  intersected([{ intersectionRatio, isIntersecting }]: IntersectionObserverEntry[]) {\n    if (intersectionRatio >= 1) {\n      this.$emit('is-fully-visible');\n      this.$el.setAttribute('aria-hidden', 'false');\n    } else if (intersectionRatio > 0) {\n      this.$emit('is-partially-visible');\n      this.$el.setAttribute('aria-hidden', 'true');\n    } else {\n      this.$emit('is-hidden');\n      this.$el.setAttribute('aria-hidden', 'true');\n    }\n\n    this.isVisible = isIntersecting;\n  }\n\n  /**\n   * Ticked hook.\n   *\n   * @todo create AbstractSliderItem with `render` method\n   * @todo add state to SliderItem\n   * @todo add origin to SliderItem\n   * @returns {void}\n   */\n  ticked() {\n    this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n    this.render();\n\n    if (this.dampedX === this.x) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Enable the SliderItem.\n   */\n  activate() {\n    this.$el.classList.add('is-active');\n  }\n\n  /**\n   * Disable the SliderItem.\n   */\n  disactivate() {\n    this.$el.classList.remove('is-active');\n  }\n\n  /**\n   * Move the SliderItem to the given target position.\n   */\n  move(targetPosition: number) {\n    this.x = targetPosition;\n\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n  }\n\n  /**\n   * Move the SliderItem instantly to the given target position.\n   */\n  moveInstantly(targetPosition: number) {\n    this.x = targetPosition;\n    this.dampedX = targetPosition;\n    this.render();\n  }\n\n  /**\n   * Render the component.\n   */\n  render() {\n    domScheduler.write(() => {\n      transform(this.$el, { x: this.dampedX });\n    });\n  }\n\n  /**\n   * Check if SliderItem is partially visible for the given target position.\n   */\n  willBeVisible(targetPosition: number) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth * 1.5 &&\n      this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5\n    );\n  }\n\n  /**\n   * Check if SliderItem is fully visible for the given target position.\n   *\n   * @param   {number} targetPosition\n   * @returns {boolean}\n   */\n  willBeFullyVisible(targetPosition) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth &&\n      this.rect.x + targetPosition > 0 &&\n      this.rect.x + targetPosition + this.rect.width < window.innerWidth &&\n      this.rect.x + targetPosition + this.rect.width > 0\n    );\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/molecules/Slider/SliderProgress.cjs

@@ -30,6 +30,9 @@ module.exports = __toCommonJS(SliderProgress_exports);
 var import_utils = require("@studiometa/js-toolkit/utils");
 var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
 var SliderProgress = class extends import_AbstractSliderChild.AbstractSliderChild {
+  /**
+   * Update the progress indicator.
+   */
   update(index) {
     import_utils.domScheduler.read(() => {
       const { progress } = this.$refs;
@@ -40,6 +43,9 @@ var SliderProgress = class extends import_AbstractSliderChild.AbstractSliderChil
     });
   }
 };
+/**
+ * Config.
+ */
 __publicField(SliderProgress, "config", {
   name: "SliderProgress",
   refs: ["progress"]

package/molecules/Slider/SliderProgress.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/SliderProgress.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transform, map, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderProgressProps extends BaseProps {\n  $refs: {\n    progress: HTMLElement;\n  };\n}\n\n/**\n * SliderProgress class.\n */\nexport class SliderProgress<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n  T & SliderProgressProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderProgress',\n    refs: ['progress'],\n  };\n\n  /**\n   * Update the progress indicator.\n   */\n  update(index:number) {\n    domScheduler.read(() => {\n      const { progress } = this.$refs;\n      const x = map(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);\n      domScheduler.write(() => {\n        transform(progress, { x });\n      });\n    });\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6C;AAC7C,iCAAoC;AAW7B,IAAM,iBAAN,cAA8D,+CAEnE;AAAA,EAYA,OAAO,OAAc;AACnB,8BAAa,KAAK,MAAM;AACtB,YAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,YAAM,QAAI,kBAAI,OAAO,GAAG,KAAK,QAAQ,UAAU,SAAS,cAAc,IAAI,CAAC;AAC3E,gCAAa,MAAM,MAAM;AACvB,oCAAU,UAAU,EAAE,EAAE,CAAC;AAAA,MAC3B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAjBE,cANW,gBAMJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM,CAAC,UAAU;AACnB;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transform, map, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderProgressProps extends BaseProps {\n  $refs: {\n    progress: HTMLElement;\n  };\n}\n\n/**\n * SliderProgress class.\n */\nexport class SliderProgress<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n  T & SliderProgressProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderProgress',\n    refs: ['progress'],\n  };\n\n  /**\n   * Update the progress indicator.\n   */\n  update(index: number) {\n    domScheduler.read(() => {\n      const { progress } = this.$refs;\n      const x = map(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);\n      domScheduler.write(() => {\n        transform(progress, { x });\n      });\n    });\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6C;AAC7C,iCAAoC;AAW7B,IAAM,iBAAN,cAA8D,+CAEnE;AAAA;AAAA;AAAA;AAAA,EAYA,OAAO,OAAe;AACpB,8BAAa,KAAK,MAAM;AACtB,YAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,YAAM,QAAI,kBAAI,OAAO,GAAG,KAAK,QAAQ,UAAU,SAAS,cAAc,IAAI,CAAC;AAC3E,gCAAa,MAAM,MAAM;AACvB,oCAAU,UAAU,EAAE,EAAE,CAAC;AAAA,MAC3B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAAA;AAAA;AAAA;AAjBE,cANW,gBAMJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM,CAAC,UAAU;AACnB;",
   "names": []
 }

package/molecules/Slider/SliderProgress.js

@@ -1,10 +1,16 @@
 import { transform, map, domScheduler } from "@studiometa/js-toolkit/utils";
 import { AbstractSliderChild } from "./AbstractSliderChild.js";
 class SliderProgress extends AbstractSliderChild {
+  /**
+   * Config.
+   */
   static config = {
     name: "SliderProgress",
     refs: ["progress"]
   };
+  /**
+   * Update the progress indicator.
+   */
   update(index) {
     domScheduler.read(() => {
       const { progress } = this.$refs;

package/molecules/Slider/SliderProgress.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/SliderProgress.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transform, map, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderProgressProps extends BaseProps {\n  $refs: {\n    progress: HTMLElement;\n  };\n}\n\n/**\n * SliderProgress class.\n */\nexport class SliderProgress<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n  T & SliderProgressProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderProgress',\n    refs: ['progress'],\n  };\n\n  /**\n   * Update the progress indicator.\n   */\n  update(index:number) {\n    domScheduler.read(() => {\n      const { progress } = this.$refs;\n      const x = map(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);\n      domScheduler.write(() => {\n        transform(progress, { x });\n      });\n    });\n  }\n}\n"],
-  "mappings": "AACA,SAAS,WAAW,KAAK,oBAAoB;AAC7C,SAAS,2BAA2B;AAW7B,MAAM,uBAAwD,oBAEnE;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,UAAU;AAAA,EACnB;AAAA,EAKA,OAAO,OAAc;AACnB,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,YAAM,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,UAAU,SAAS,cAAc,IAAI,CAAC;AAC3E,mBAAa,MAAM,MAAM;AACvB,kBAAU,UAAU,EAAE,EAAE,CAAC;AAAA,MAC3B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transform, map, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderProgressProps extends BaseProps {\n  $refs: {\n    progress: HTMLElement;\n  };\n}\n\n/**\n * SliderProgress class.\n */\nexport class SliderProgress<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n  T & SliderProgressProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderProgress',\n    refs: ['progress'],\n  };\n\n  /**\n   * Update the progress indicator.\n   */\n  update(index: number) {\n    domScheduler.read(() => {\n      const { progress } = this.$refs;\n      const x = map(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);\n      domScheduler.write(() => {\n        transform(progress, { x });\n      });\n    });\n  }\n}\n"],
+  "mappings": "AACA,SAAS,WAAW,KAAK,oBAAoB;AAC7C,SAAS,2BAA2B;AAW7B,MAAM,uBAAwD,oBAEnE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,UAAU;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,OAAe;AACpB,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,YAAM,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,UAAU,SAAS,cAAc,IAAI,CAAC;AAC3E,mBAAa,MAAM,MAAM;AACvB,kBAAU,UAAU,EAAE,EAAE,CAAC;AAAA,MAC3B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
   "names": []
 }