@studiometa/ui 0.2.12 → 0.2.14

package/molecules/Slider/SliderBtn.js

@@ -1 +1,34 @@
-import i from"./AbstractSliderChild.js";class s extends i{static config={name:"SliderBtn",options:{prev:Boolean,next:Boolean}};update(t){t===0&&this.$options.prev||t===this.$parent.indexMax&&this.$options.next?this.$el.setAttribute("disabled",""):this.$el.removeAttribute("disabled")}onClick(){const{prev:t,next:e}=this.$options;t?this.$parent.goPrev():e&&this.$parent.goNext()}}export{s as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { AbstractSliderChild } from "./AbstractSliderChild.js";
+class SliderBtn extends AbstractSliderChild {
+  update(index) {
+    if (index === 0 && this.$options.prev || index === this.$parent.indexMax && this.$options.next) {
+      this.$el.setAttribute("disabled", "");
+    } else {
+      this.$el.removeAttribute("disabled");
+    }
+  }
+  onClick() {
+    const { prev, next } = this.$options;
+    if (prev) {
+      this.$parent.goPrev();
+    } else if (next) {
+      this.$parent.goNext();
+    }
+  }
+}
+__publicField(SliderBtn, "config", {
+  name: "SliderBtn",
+  options: {
+    prev: Boolean,
+    next: Boolean
+  }
+});
+export {
+  SliderBtn
+};

package/molecules/Slider/SliderCount.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,21 +15,20 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Slider/SliderCount.js
+// packages/ui/molecules/Slider/SliderCount.ts
 var SliderCount_exports = {};
 __export(SliderCount_exports, {
-  default: () => SliderCount
+  SliderCount: () => SliderCount
 });
 module.exports = __toCommonJS(SliderCount_exports);
-var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
-var SliderCount = class extends import_AbstractSliderChild.default {
+var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
+var SliderCount = class extends import_AbstractSliderChild.AbstractSliderChild {
   update(index) {
     this.$refs.current.innerHTML = `${index + 1}`;
   }

package/molecules/Slider/SliderCount.d.ts

@@ -1,29 +1,23 @@
-/**
- * @typedef {SliderCount & { $refs: { current: HTMLElement } }} SliderCountInterface
- */
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AbstractSliderChild } from './AbstractSliderChild.js';
+export interface SliderCountProps extends BaseProps {
+    $refs: {
+        current: HTMLElement;
+    };
+}
 /**
  * SliderCount class.
  */
-export default class SliderCount extends AbstractSliderChild {
+export declare class SliderCount<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderCountProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-    };
+    static config: BaseConfig;
     /**
      * Update the current counter indicator.
      *
-     * @this    {SliderCountInterface}
      * @param   {number} index The new active index.
      * @returns {void}
      */
-    update(this: SliderCountInterface, index: number): void;
+    update(index: number): void;
 }
-export type SliderCountInterface = SliderCount & {
-    $refs: {
-        current: HTMLElement;
-    };
-};
-import AbstractSliderChild from "./AbstractSliderChild.js";

package/molecules/Slider/SliderCount.js

@@ -1 +1,19 @@
-import r from"./AbstractSliderChild.js";class t extends r{static config={name:"SliderCount",refs:["current"]};update(e){this.$refs.current.innerHTML=`${e+1}`}}export{t as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { AbstractSliderChild } from "./AbstractSliderChild.js";
+class SliderCount extends AbstractSliderChild {
+  update(index) {
+    this.$refs.current.innerHTML = `${index + 1}`;
+  }
+}
+__publicField(SliderCount, "config", {
+  name: "SliderCount",
+  refs: ["current"]
+});
+export {
+  SliderCount
+};

package/molecules/Slider/SliderDots.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,26 +15,28 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Slider/SliderDots.js
+// packages/ui/molecules/Slider/SliderDots.ts
 var SliderDots_exports = {};
 __export(SliderDots_exports, {
-  default: () => SliderDots
+  SliderDots: () => SliderDots
 });
 module.exports = __toCommonJS(SliderDots_exports);
 var import_decorators = require("../../decorators/index.cjs");
-var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
-var SliderDots = class extends (0, import_decorators.withTransition)(import_AbstractSliderChild.default) {
+var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
+var SliderDots = class extends (0, import_decorators.withTransition)(import_AbstractSliderChild.AbstractSliderChild) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "currentIndex", 0);
+  }
   get target() {
     return this.$refs.dots;
   }
-  currentIndex = 0;
   update(index) {
     this.leave(this.$refs.dots[this.currentIndex]);
     this.enter(this.$refs.dots[index]);

package/molecules/Slider/SliderDots.d.ts

@@ -1,58 +1,38 @@
-declare const SliderDots_base: typeof AbstractSliderChild & (new (...a: any[]) => {
-    readonly target: HTMLElement | HTMLElement[];
-    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-});
-/**
- * @typedef {SliderDots & {
- *   $refs: {
- *     dots: HTMLButtonElement[],
- *   }
- * }} SliderDotsInterface
- */
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AbstractSliderChild } from './AbstractSliderChild.js';
+export interface SliderDotsProps extends BaseProps {
+    $refs: {
+        dots: HTMLButtonElement[];
+    };
+}
+declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("../../decorators/withTransition.js").TransitionInterface, AbstractSliderChild<BaseProps>, import("../../decorators/withTransition.js").TransitionProps>;
 /**
  * SliderDots class.
  */
-export default class SliderDots extends SliderDots_base {
+export declare class SliderDots<T extends BaseProps = BaseProps> extends SliderDots_base<T & SliderDotsProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-    };
+    static config: BaseConfig;
     /**
      * Get target.
-     * @this {SliderDotsInterface}
      * @returns {HTMLButtonElement[]}
      */
     get target(): HTMLButtonElement[];
     /**
      * The current active index.
-     * @type {number}
      */
     currentIndex: number;
     /**
      * Update dots classes according to the new index.
      *
-     * @this    {SliderDotsInterface}
      * @param   {number} index
      * @returns {void}
      */
-    update(this: SliderDotsInterface, index: number): void;
+    update(index: number): void;
     /**
      * Go to the given index on dot click.
-     *
-     * @param   {MouseEvent} event
-     * @param   {number} index
-     * @returns {void}
      */
     onDotsClick(event: MouseEvent, index: number): void;
 }
-export type SliderDotsInterface = SliderDots & {
-    $refs: {
-        dots: HTMLButtonElement[];
-    };
-};
-import AbstractSliderChild from "./AbstractSliderChild.js";
 export {};

package/molecules/Slider/SliderDots.js

@@ -1 +1,32 @@
-import{withTransition as r}from"../../decorators/index.js";import s from"./AbstractSliderChild.js";class i extends r(s){static config={name:"SliderDots",refs:["dots[]"]};get target(){return this.$refs.dots}currentIndex=0;update(t){this.leave(this.$refs.dots[this.currentIndex]),this.enter(this.$refs.dots[t]),this.currentIndex=t}onDotsClick(t,e){this.$parent.goTo(e)}}export{i as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { withTransition } from "../../decorators/index.js";
+import { AbstractSliderChild } from "./AbstractSliderChild.js";
+class SliderDots extends withTransition(AbstractSliderChild) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "currentIndex", 0);
+  }
+  get target() {
+    return this.$refs.dots;
+  }
+  update(index) {
+    this.leave(this.$refs.dots[this.currentIndex]);
+    this.enter(this.$refs.dots[index]);
+    this.currentIndex = index;
+  }
+  onDotsClick(event, index) {
+    this.$parent.goTo(index);
+  }
+}
+__publicField(SliderDots, "config", {
+  name: "SliderDots",
+  refs: ["dots[]"]
+});
+export {
+  SliderDots
+};

package/molecules/Slider/SliderDrag.cjs

@@ -21,10 +21,10 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/Slider/SliderDrag.js
+// packages/ui/molecules/Slider/SliderDrag.ts
 var SliderDrag_exports = {};
 __export(SliderDrag_exports, {
-  default: () => SliderDrag
+  SliderDrag: () => SliderDrag
 });
 module.exports = __toCommonJS(SliderDrag_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");

package/molecules/Slider/SliderDrag.d.ts

@@ -1,33 +1,22 @@
-/**
- * @typedef {SliderDrag & {
- *   $options: {
- *     scrollLockThreshold: number;
- *   }
- * }} SliderDragInterface
- */
+import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';
+import { Base } from '@studiometa/js-toolkit';
+export interface SliderDragProps extends BaseProps {
+    $options: {
+        scrollLockThreshold: number;
+    };
+}
+declare const SliderDrag_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").BaseInterface, Base<BaseProps>, BaseProps>;
 /**
  * SliderDrag class.
  */
-export default class SliderDrag extends Base {
+export declare class SliderDrag<T extends BaseProps = BaseProps> extends SliderDrag_base<T & SliderDragProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        emits: string[];
-        options: {
-            scrollLockThreshold: {
-                type: NumberConstructor;
-                default: number;
-            };
-        };
-    };
+    static config: BaseConfig;
     /**
      * Test if the scroll should be blocked. Used with the touchmove event to prevent
      * scrolling vertically when trying to drag the slider.
-     *
-     * @this {SliderDragInterface}
-     * @returns {boolean}
      */
     get shouldPreventScroll(): boolean;
     /**
@@ -38,14 +27,7 @@ export default class SliderDrag extends Base {
     onTouchmove(event: TouchEvent): void;
     /**
      * Emit drag events.
-     * @param   {import('@studiometa/js-toolkit/services/drag').DragServiceProps} props
-     * @returns {void}
      */
-    dragged(props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
+    dragged(props: DragServiceProps): void;
 }
-export type SliderDragInterface = SliderDrag & {
-    $options: {
-        scrollLockThreshold: number;
-    };
-};
-import { Base } from "@studiometa/js-toolkit";
+export {};

package/molecules/Slider/SliderDrag.js

@@ -1 +1,34 @@
-import{Base as t,withDrag as r}from"@studiometa/js-toolkit";class s extends r(t){static config={name:"SliderDrag",emits:["start","drag","drop","inertia","stop"],options:{scrollLockThreshold:{type:Number,default:10}}};get shouldPreventScroll(){const{distance:e}=this.$services.get("dragged");return Math.abs(e.x)>this.$options.scrollLockThreshold&&Math.abs(e.x)>Math.abs(e.y)}onTouchmove(e){this.shouldPreventScroll&&e.preventDefault()}dragged(e){this.$emit(e.mode,e)}}export{s as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base, withDrag } from "@studiometa/js-toolkit";
+class SliderDrag extends withDrag(Base) {
+  get shouldPreventScroll() {
+    const { distance } = this.$services.get("dragged");
+    return Math.abs(distance.x) > this.$options.scrollLockThreshold && Math.abs(distance.x) > Math.abs(distance.y);
+  }
+  onTouchmove(event) {
+    if (this.shouldPreventScroll) {
+      event.preventDefault();
+    }
+  }
+  dragged(props) {
+    this.$emit(props.mode, props);
+  }
+}
+__publicField(SliderDrag, "config", {
+  name: "SliderDrag",
+  emits: ["start", "drag", "drop", "inertia", "stop"],
+  options: {
+    scrollLockThreshold: {
+      type: Number,
+      default: 10
+    }
+  }
+});
+export {
+  SliderDrag
+};

package/molecules/Slider/SliderItem.cjs

@@ -21,18 +21,24 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/Slider/SliderItem.js
+// packages/ui/molecules/Slider/SliderItem.ts
 var SliderItem_exports = {};
 __export(SliderItem_exports, {
-  default: () => SliderItem
+  SliderItem: () => SliderItem
 });
 module.exports = __toCommonJS(SliderItem_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(import_js_toolkit.Base, { threshold: [0, 1] }) {
-  isVisible = false;
-  x = 0;
-  dampedX = 0;
+var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(import_js_toolkit.Base, {
+  threshold: [0, 1]
+}) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isVisible", false);
+    __publicField(this, "x", 0);
+    __publicField(this, "dampedX", 0);
+    __publicField(this, "rect");
+  }
   mounted() {
     this.updateRectAdjustedWithX();
   }

package/molecules/Slider/SliderItem.d.ts

@@ -1,17 +1,17 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+declare const SliderItem_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithIntersectionObserverInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithIntersectionObserverProps>;
 /**
  * Manage a slider item and its state transition.
  */
-export default class SliderItem extends Base {
+export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderItem_base<T> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        emits: string[];
-    };
+    static config: BaseConfig;
     /**
      * Wether the SliderItem is visible or not.
-     * @type {Boolean}
+     * @type {boolean}
      */
     isVisible: boolean;
     /**
@@ -24,29 +24,33 @@ export default class SliderItem extends Base {
      * @type {number}
      */
     dampedX: number;
+    /**
+     * Item original position.
+     */
+    rect: {
+        x: number;
+        y: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        width: number;
+        height: number;
+    };
     /**
      * Set SliderItem bounding rectangle on mount.
-     *
-     * @returns {void}
      */
     mounted(): void;
     /**
      * Update SliderItem bounding rectangle on resize.
-     *
-     * @returns {void}
      */
     resized(): void;
     /**
      * Reset position to `0` on destroy.
-     *
-     * @returns {void}
      */
     destroyed(): void;
     /**
      * Intersected hook.
-     *
-     * @param   {IntersectionObserverEntry[]} entries
-     * @returns {void}
      */
     intersected([{ intersectionRatio, isIntersecting }]: IntersectionObserverEntry[]): void;
     /**
@@ -60,41 +64,26 @@ export default class SliderItem extends Base {
     ticked(): void;
     /**
      * Enable the SliderItem.
-     *
-     * @returns {void}
      */
     activate(): void;
     /**
      * Disable the SliderItem.
-     *
-     * @returns {void}
      */
     disactivate(): void;
     /**
      * Move the SliderItem to the given target position.
-     *
-     * @param   {number} targetPosition
-     * @returns {void}
      */
     move(targetPosition: number): void;
     /**
      * Move the SliderItem instantly to the given target position.
-     *
-     * @param   {number} targetPosition
-     * @returns {void}
      */
     moveInstantly(targetPosition: number): void;
     /**
      * Render the component.
-     *
-     * @returns {void}
      */
     render(): void;
     /**
      * Check if SliderItem is partially visible for the given target position.
-     *
-     * @param   {number} targetPosition
-     * @returns {boolean}
      */
     willBeVisible(targetPosition: number): boolean;
     /**
@@ -103,13 +92,12 @@ export default class SliderItem extends Base {
      * @param   {number} targetPosition
      * @returns {boolean}
      */
-    willBeFullyVisible(targetPosition: number): boolean;
+    willBeFullyVisible(targetPosition: any): boolean;
     /**
      * Update the bounding rectangle values without the current transformation.
      *
      * @returns {void}
      */
     updateRectAdjustedWithX(): void;
-    rect: any;
 }
-import { Base } from "@studiometa/js-toolkit";
+export {};

package/molecules/Slider/SliderItem.js

@@ -1 +1,93 @@
-import{Base as t,withIntersectionObserver as s}from"@studiometa/js-toolkit";import{damp as d,domScheduler as h,transform as r}from"@studiometa/js-toolkit/utils";class l extends s(t,{threshold:[0,1]}){static config={name:"SliderItem",emits:["is-fully-visible","is-partially-visible","is-hidden"]};isVisible=!1;x=0;dampedX=0;mounted(){this.updateRectAdjustedWithX()}resized(){this.updateRectAdjustedWithX()}destroyed(){this.moveInstantly(0)}intersected([{intersectionRatio:e,isIntersecting:i}]){e>=1?(this.$emit("is-fully-visible"),this.$el.setAttribute("aria-hidden","false")):e>0?(this.$emit("is-partially-visible"),this.$el.setAttribute("aria-hidden","true")):(this.$emit("is-hidden"),this.$el.setAttribute("aria-hidden","true")),this.isVisible=i}ticked(){this.dampedX=d(this.x,this.dampedX,.1,1e-5),this.render(),this.dampedX===this.x&&this.$services.disable("ticked")}activate(){this.$el.classList.add("is-active")}disactivate(){this.$el.classList.remove("is-active")}move(e){this.x=e,this.$services.has("ticked")||this.$services.enable("ticked")}moveInstantly(e){this.x=e,this.dampedX=e,this.render()}render(){h.write(()=>{r(this.$el,{x:this.dampedX})})}willBeVisible(e){return this.rect.x+e<window.innerWidth*1.5&&this.rect.x+e+this.rect.width>window.innerWidth*-.5}willBeFullyVisible(e){return this.rect.x+e<window.innerWidth&&this.rect.x+e>0&&this.rect.x+e+this.rect.width<window.innerWidth&&this.rect.x+e+this.rect.width>0}updateRectAdjustedWithX(){const e=this.x*-1,i=this.$el.getBoundingClientRect().toJSON();this.rect={...i,left:i.left+e,right:i.left+e+i.width,x:i.left+e}}}export{l as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base, withIntersectionObserver } from "@studiometa/js-toolkit";
+import { damp, domScheduler, transform } from "@studiometa/js-toolkit/utils";
+class SliderItem extends withIntersectionObserver(Base, {
+  threshold: [0, 1]
+}) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isVisible", false);
+    __publicField(this, "x", 0);
+    __publicField(this, "dampedX", 0);
+    __publicField(this, "rect");
+  }
+  mounted() {
+    this.updateRectAdjustedWithX();
+  }
+  resized() {
+    this.updateRectAdjustedWithX();
+  }
+  destroyed() {
+    this.moveInstantly(0);
+  }
+  intersected([{ intersectionRatio, isIntersecting }]) {
+    if (intersectionRatio >= 1) {
+      this.$emit("is-fully-visible");
+      this.$el.setAttribute("aria-hidden", "false");
+    } else if (intersectionRatio > 0) {
+      this.$emit("is-partially-visible");
+      this.$el.setAttribute("aria-hidden", "true");
+    } else {
+      this.$emit("is-hidden");
+      this.$el.setAttribute("aria-hidden", "true");
+    }
+    this.isVisible = isIntersecting;
+  }
+  ticked() {
+    this.dampedX = damp(this.x, this.dampedX, 0.1, 1e-5);
+    this.render();
+    if (this.dampedX === this.x) {
+      this.$services.disable("ticked");
+    }
+  }
+  activate() {
+    this.$el.classList.add("is-active");
+  }
+  disactivate() {
+    this.$el.classList.remove("is-active");
+  }
+  move(targetPosition) {
+    this.x = targetPosition;
+    if (!this.$services.has("ticked")) {
+      this.$services.enable("ticked");
+    }
+  }
+  moveInstantly(targetPosition) {
+    this.x = targetPosition;
+    this.dampedX = targetPosition;
+    this.render();
+  }
+  render() {
+    domScheduler.write(() => {
+      transform(this.$el, { x: this.dampedX });
+    });
+  }
+  willBeVisible(targetPosition) {
+    return this.rect.x + targetPosition < window.innerWidth * 1.5 && this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5;
+  }
+  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
+    };
+  }
+}
+__publicField(SliderItem, "config", {
+  name: "SliderItem",
+  emits: ["is-fully-visible", "is-partially-visible", "is-hidden"]
+});
+export {
+  SliderItem
+};