@studiometa/ui 0.2.13 → 0.2.15

package/molecules/Slider/Slider.js

@@ -1 +1,271 @@
-import{Base as d}from"@studiometa/js-toolkit";import{clamp as c,inertiaFinalValue as u,nextFrame as o,isDev as f}from"@studiometa/js-toolkit/utils";import x from"./SliderDrag.js";import g from"./SliderItem.js";class I extends d{static config={name:"Slider",refs:["wrapper","debug"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:x},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1},dropSensitivity:{type:Number,default:2}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(t){this.currentSliderItem.disactivate(),this.$emit("index",t),this.__currentIndex=t,this.currentSliderItem.activate()}states=[];origins={left:0,center:0,right:0};hasFocus=!1;get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:t}=this.$refs,e=t.getBoundingClientRect();this.origins={left:e.left,center:e.x+e.width/2,right:e.x+e.width};const s=this.$children.SliderItem.map(i=>({x:{left:(i.rect.x-this.origins.left)*-1,center:(i.rect.x+i.rect.width/2-this.origins.center)*-1,right:(i.rect.x+i.rect.width-this.origins.right)*-1}}));if(this.$options.contain){const{mode:i}=this.$options;if(i==="left"){const n=this.$children.SliderItem.at(-1),a=s.find(r=>{const h=n.rect.x-this.origins.left+n.rect.width+r.x.left,l=e.width-h;return l>0?(r.x.left=Math.min(r.x.left+l,0),!0):!1});if(a)return s.map(r=>(r.x.left=Math.max(r.x.left,a.x.left),r))}if(i==="right"){const n=s.findIndex(r=>r.x.right<=0),a=n<0?s.at(-1):s[n-1];return s.map(r=>(r.x.right=n<0?a.x.right:Math.min(r.x.right,0),r))}i==="center"&&f&&console.warn(`[${this.$id}]`,"The `center` mode is not yet compatible with the `contain` mode.")}return s}getOriginByMode(t){return this.origins[t??this.$options.mode]}getStateValueByMode(t,e){return t[e??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){o(()=>{this.states=this.getStates(),o(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(t,{withInstantMove:e=!0}={}){if(t<0||t>this.indexMax)throw new Error("Index out of bound.");const s=this.getStateValueByMode(this.currentState.x),i=this.getStateValueByMode(this.states[t].x),n=this.getVisibleItems(i),a=this.getInvisibleItems(i);n.forEach(r=>{s!==i&&e&&r.moveInstantly(s),o(()=>r.move(i))}),a.forEach(r=>{r.moveInstantly(i)}),this.currentIndex=t,this.$emit("goto",t)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0,this.__distanceX=this.__initialX}onSliderDragDrag(t){Math.abs(t.delta.y)>Math.abs(t.delta.x)||(this.__distanceX=this.__initialX+t.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(e=>{e.moveInstantly(this.__distanceX)}))}onSliderDragDrop(t){if(Math.abs(t.delta.y)>Math.abs(t.delta.x))return;let e=c(u(this.__distanceX,t.delta.x*this.$options.dropSensitivity),0,this.getStateValueByMode(this.lastState.x));const s=this.states.map(a=>Math.abs(e-this.getStateValueByMode(a.x))),i=Math.min(...s),n=s.findIndex(a=>a===i);this.$options.fitBounds?this.goTo(n,{withInstantMove:!1}):(this.$options.contain&&(e=Math.min(this.containMinState,e),e=Math.max(this.containMaxState,e)),this.$children.SliderItem.forEach(a=>{a.move(e)}),this.currentIndex=n)}onWrapperFocus(){this.hasFocus=!0}onWrapperBlur(){this.hasFocus=!1}keyed({LEFT:t,RIGHT:e,isDown:s}){this.hasFocus&&s&&(t?this.goPrev():e&&this.goNext())}prepareInvisibleItems(){const t=this.states[this.currentIndex],e=[],s=[];this.getInvisibleItems(this.getStateValueByMode(t.x)).forEach((i,n)=>{if(n>this.currentIndex){e.push(i);return}n<this.currentIndex&&s.push(i)}),e.forEach(i=>{const n=this.getStateWhereItemWillBeInvisible(i);n&&i.moveInstantly(this.getStateValueByMode(n.x))}),s.forEach(i=>{const n=this.getStateWhereItemWillBeInvisible(i,{reversed:!0});n&&i.moveInstantly(this.getStateValueByMode(n.x))})}getStateWhereItemWillBeInvisible(t,{reversed:e=!1}={}){const s=this.states.filter(h=>t.willBeVisible(this.getStateValueByMode(h.x))),i=s[0],n=s[s.length-1],a=this.states.findIndex(h=>this.getStateValueByMode(h.x)===this.getStateValueByMode(i.x)),r=this.states.findIndex(h=>h.x===n.x);return e?this.states[r+1]:this.states[a-1]}getVisibleItems(t){return this.$children.SliderItem.filter(e=>e.isVisible||e.willBeVisible(t))}getInvisibleItems(t){return this.$children.SliderItem.filter(e=>!e.isVisible&&!e.willBeVisible(t))}}export{I as default};
+import { Base } from "@studiometa/js-toolkit";
+import { clamp, inertiaFinalValue, nextFrame, isDev } from "@studiometa/js-toolkit/utils";
+import { SliderDrag } from "./SliderDrag.js";
+import { SliderItem } from "./SliderItem.js";
+class Slider extends Base {
+  static config = {
+    name: "Slider",
+    refs: ["wrapper", "debug"],
+    emits: ["goto", "index"],
+    components: {
+      SliderItem,
+      SliderDrag
+    },
+    options: {
+      mode: { type: String, default: "left" },
+      fitBounds: Boolean,
+      contain: Boolean,
+      sensitivity: { type: Number, default: 1 },
+      dropSensitivity: { type: Number, default: 2 }
+    }
+  };
+  __distanceX = 0;
+  __initialX = 0;
+  __currentIndex = 0;
+  get currentIndex() {
+    return this.__currentIndex;
+  }
+  set currentIndex(value) {
+    this.currentSliderItem.disactivate();
+    this.$emit("index", value);
+    this.__currentIndex = value;
+    this.currentSliderItem.activate();
+  }
+  states = [];
+  origins = {
+    left: 0,
+    center: 0,
+    right: 0
+  };
+  hasFocus = false;
+  get currentState() {
+    return this.states[this.currentIndex];
+  }
+  get firstState() {
+    return this.states[0];
+  }
+  get lastState() {
+    return this.states.at(-1);
+  }
+  get containMinState() {
+    return this.getStateValueByMode(this.firstState.x, "left");
+  }
+  get containMaxState() {
+    return this.getStateValueByMode(this.lastState.x, "right");
+  }
+  get indexMax() {
+    return this.$children.SliderItem.length - 1;
+  }
+  get currentSliderItem() {
+    return this.$children.SliderItem[this.currentIndex];
+  }
+  getStates() {
+    const { wrapper } = this.$refs;
+    const originRect = wrapper.getBoundingClientRect();
+    this.origins = {
+      left: originRect.left,
+      center: originRect.x + originRect.width / 2,
+      right: originRect.x + originRect.width
+    };
+    const states = this.$children.SliderItem.map((item) => ({
+      x: {
+        left: (item.rect.x - this.origins.left) * -1,
+        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,
+        right: (item.rect.x + item.rect.width - this.origins.right) * -1
+      }
+    }));
+    if (this.$options.contain) {
+      const { mode } = this.$options;
+      if (mode === "left") {
+        const lastChild = this.$children.SliderItem.at(-1);
+        const maxState = states.find((state) => {
+          const lastChildPosition = lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;
+          const diffWithWrapperBound = originRect.width - lastChildPosition;
+          if (diffWithWrapperBound > 0) {
+            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);
+            return true;
+          }
+          return false;
+        });
+        if (maxState) {
+          return states.map((state) => {
+            state.x.left = Math.max(state.x.left, maxState.x.left);
+            return state;
+          });
+        }
+      }
+      if (mode === "right") {
+        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);
+        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];
+        return states.map((state) => {
+          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);
+          return state;
+        });
+      }
+      if (mode === "center" && isDev) {
+        console.warn(
+          `[${this.$id}]`,
+          "The `center` mode is not yet compatible with the `contain` mode."
+        );
+      }
+    }
+    return states;
+  }
+  getOriginByMode(mode) {
+    return this.origins[mode ?? this.$options.mode];
+  }
+  getStateValueByMode(state, mode) {
+    return state[mode ?? this.$options.mode];
+  }
+  mounted() {
+    this.states = this.getStates();
+    this.prepareInvisibleItems();
+    this.goTo(this.currentIndex);
+  }
+  resized() {
+    nextFrame(() => {
+      this.states = this.getStates();
+      nextFrame(() => {
+        this.prepareInvisibleItems();
+        this.goTo(this.currentIndex);
+      });
+    });
+  }
+  goNext() {
+    if (this.currentIndex + 1 > this.indexMax) {
+      return;
+    }
+    this.goTo(this.currentIndex + 1);
+  }
+  goPrev() {
+    if (this.currentIndex - 1 < 0) {
+      return;
+    }
+    this.goTo(this.currentIndex - 1);
+  }
+  goTo(index, { withInstantMove = true } = {}) {
+    if (index < 0 || index > this.indexMax) {
+      throw new Error("Index out of bound.");
+    }
+    const currentState = this.getStateValueByMode(this.currentState.x);
+    const state = this.getStateValueByMode(this.states[index].x);
+    const itemsToMove = this.getVisibleItems(state);
+    const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);
+    itemsToMove.forEach((item) => {
+      if (currentState !== state && withInstantMove) {
+        item.moveInstantly(currentState);
+      }
+      nextFrame(() => item.move(state));
+    });
+    invisibleItemsToMoveInstantly.forEach((item) => {
+      item.moveInstantly(state);
+    });
+    this.currentIndex = index;
+    this.$emit("goto", index);
+  }
+  onSliderDragStart() {
+    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
+    this.__distanceX = this.__initialX;
+  }
+  onSliderDragDrag(props) {
+    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
+      return;
+    }
+    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;
+    this.getVisibleItems(this.__distanceX).forEach((item) => {
+      item.moveInstantly(this.__distanceX);
+    });
+  }
+  onSliderDragDrop(props) {
+    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
+      return;
+    }
+    let finalX = clamp(
+      inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),
+      0,
+      this.getStateValueByMode(this.lastState.x)
+    );
+    const absoluteDifferencesBetweenDistanceAndState = this.states.map(
+      (state) => Math.abs(finalX - this.getStateValueByMode(state.x))
+    );
+    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);
+    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);
+    if (this.$options.fitBounds) {
+      this.goTo(closestIndex, { withInstantMove: false });
+    } else {
+      if (this.$options.contain) {
+        finalX = Math.min(this.containMinState, finalX);
+        finalX = Math.max(this.containMaxState, finalX);
+      }
+      this.$children.SliderItem.forEach((item) => {
+        item.move(finalX);
+      });
+      this.currentIndex = closestIndex;
+    }
+  }
+  onWrapperFocus() {
+    this.hasFocus = true;
+  }
+  onWrapperBlur() {
+    this.hasFocus = false;
+  }
+  keyed({ LEFT, RIGHT, isDown }) {
+    if (this.hasFocus && isDown) {
+      if (LEFT) {
+        this.goPrev();
+      } else if (RIGHT) {
+        this.goNext();
+      }
+    }
+  }
+  prepareInvisibleItems() {
+    const state = this.states[this.currentIndex];
+    const nextItemsToPrepare = [];
+    const previousItemsToPrepare = [];
+    this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {
+      if (i > this.currentIndex) {
+        nextItemsToPrepare.push(item);
+        return;
+      }
+      if (i < this.currentIndex) {
+        previousItemsToPrepare.push(item);
+      }
+    });
+    nextItemsToPrepare.forEach((item) => {
+      const invisibleState = this.getStateWhereItemWillBeInvisible(item);
+      if (invisibleState) {
+        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
+      }
+    });
+    previousItemsToPrepare.forEach((item) => {
+      const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });
+      if (invisibleState) {
+        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
+      }
+    });
+  }
+  getStateWhereItemWillBeInvisible(item, { reversed = false } = {}) {
+    const visibleStates = this.states.filter(
+      (state) => item.willBeVisible(this.getStateValueByMode(state.x))
+    );
+    const firstVisibleState = visibleStates[0];
+    const lastVisibleState = visibleStates.at(-1);
+    const firstVisibleStateIndex = this.states.findIndex(
+      (state) => this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x)
+    );
+    const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);
+    return reversed ? this.states[lastVisibleStateIndex + 1] : this.states[firstVisibleStateIndex - 1];
+  }
+  getVisibleItems(target) {
+    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));
+  }
+  getInvisibleItems(target) {
+    return this.$children.SliderItem.filter(
+      (item) => !item.isVisible && !item.willBeVisible(target)
+    );
+  }
+}
+export {
+  Slider
+};
+//# sourceMappingURL=Slider.js.map

package/molecules/Slider/Slider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Slider/Slider.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps, KeyServiceProps } from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame, isDev } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n  $refs: {\n    wrapper: HTMLElement;\n  }\n  $children: {\n    SliderItem: SliderItem[];\n    SliderDrag: SliderDrag[];\n  };\n  $options: {\n    mode: SliderModes;\n    fitBounds: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n  }\n}\n\n/**\n * Orchestrate the slider items state transition.\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n  /**\n   * Config.\n   */\n  static config :BaseConfig = {\n    name: 'Slider',\n    refs: ['wrapper', 'debug'],\n    emits: ['goto', 'index'],\n    components: {\n      SliderItem,\n      SliderDrag,\n    },\n    options: {\n      mode: { type: String, default: 'left' },\n      fitBounds: Boolean,\n      contain: Boolean,\n      sensitivity: { type: Number, default: 1 },\n      dropSensitivity: { type: Number, default: 2 },\n    },\n  };\n\n  __distanceX = 0;\n\n  __initialX = 0;\n\n  /**\n   * Index of the current active slide.\n   */\n  __currentIndex = 0;\n\n  /**\n   * Get the current index.\n   */\n  get currentIndex() {\n    return this.__currentIndex;\n  }\n\n  /**\n   * Set the current index and emit the `index` event.\n   */\n  set currentIndex(value:number) {\n    this.currentSliderItem.disactivate();\n    this.$emit('index', value);\n    this.__currentIndex = value;\n    this.currentSliderItem.activate();\n  }\n\n  /**\n   * Store all the states.\n   */\n  states:SliderState[] = [];\n\n  /**\n   * Origins for the different modes.\n   */\n  origins:Record<SliderModes, number> = {\n    left: 0,\n    center: 0,\n    right: 0,\n  };\n\n  /**\n   * Wether or not the wrapper is focused.\n   * @type {boolean}\n   */\n  hasFocus = false;\n\n  /**\n   * Get the current state.\n   */\n  get currentState() {\n    return this.states[this.currentIndex];\n  }\n\n  /**\n   * Get the first state.\n   */\n  get firstState() {\n    return this.states[0];\n  }\n\n  /**\n   * Get the last state.\n   */\n  get lastState() {\n    return this.states.at(-1);\n  }\n\n  /**\n   * Get the minimal contain state value.\n   */\n  get containMinState():number {\n    return this.getStateValueByMode(this.firstState.x, 'left');\n  }\n\n  /**\n   * Get the maximal contain state value.\n   */\n  get containMaxState():number {\n    return this.getStateValueByMode(this.lastState.x, 'right');\n  }\n\n  /**\n   * Get the last index.\n   */\n  get indexMax():number {\n    return this.$children.SliderItem.length - 1;\n  }\n\n  /**\n   * Get the current SliderItem\n   */\n  get currentSliderItem() {\n    return this.$children.SliderItem[this.currentIndex];\n  }\n\n  /**\n   * Get the states for each SliderItem.\n   */\n  getStates():SliderState[] {\n    const { wrapper } = this.$refs;\n    const originRect = wrapper.getBoundingClientRect();\n\n    this.origins = {\n      left: originRect.left,\n      center: originRect.x + originRect.width / 2,\n      right: originRect.x + originRect.width,\n    };\n\n    const states:SliderState[] = this.$children.SliderItem.map((item) => ({\n      x: {\n        left: (item.rect.x - this.origins.left) * -1,\n        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n        right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n      },\n    }));\n\n    if (this.$options.contain) {\n      const { mode } = this.$options;\n      // Find state where last child has passed the wrapper bound completely\n      if (mode === 'left') {\n        const lastChild = this.$children.SliderItem.at(-1);\n\n        const maxState = states.find((state) => {\n          const lastChildPosition =\n            lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n          const diffWithWrapperBound = originRect.width - lastChildPosition;\n          if (diffWithWrapperBound > 0) {\n            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n            return true;\n          }\n\n          return false;\n        });\n\n        if (maxState) {\n          return states.map((state) => {\n            state.x.left = Math.max(state.x.left, maxState.x.left);\n            return state;\n          });\n        }\n      }\n\n      if (mode === 'right') {\n        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n        return states.map((state) => {\n          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n          return state;\n        });\n      }\n\n      if (mode === 'center' && isDev) {\n        console.warn(\n          `[${this.$id}]`,\n          'The `center` mode is not yet compatible with the `contain` mode.',\n        );\n      }\n    }\n\n    return states;\n  }\n\n  /**\n   * Get an origin by mode.\n   */\n  getOriginByMode(mode?:SliderModes) {\n    return this.origins[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Get a state value according to the given mode.\n   */\n  getStateValueByMode(state:SliderState['x'], mode?:SliderModes) {\n    return state[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    this.states = this.getStates();\n    this.prepareInvisibleItems();\n    this.goTo(this.currentIndex);\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    nextFrame(() => {\n      this.states = this.getStates();\n      nextFrame(() => {\n        this.prepareInvisibleItems();\n        this.goTo(this.currentIndex);\n      });\n    });\n  }\n\n  /**\n   * Go to the next slide.\n   */\n  goNext() {\n    if (this.currentIndex + 1 > this.indexMax) {\n      return;\n    }\n\n    this.goTo(this.currentIndex + 1);\n  }\n\n  /**\n   * Go to the previous slide.\n   */\n  goPrev() {\n    if (this.currentIndex - 1 < 0) {\n      return;\n    }\n\n    this.goTo(this.currentIndex - 1);\n  }\n\n  /**\n   * Go to the given index.\n   */\n  goTo(index:number, { withInstantMove = true } = {}) {\n    if (index < 0 || index > this.indexMax) {\n      throw new Error('Index out of bound.');\n    }\n\n    const currentState = this.getStateValueByMode(this.currentState.x);\n    const state = this.getStateValueByMode(this.states[index].x);\n    const itemsToMove = this.getVisibleItems(state);\n    const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);\n\n    itemsToMove.forEach((item) => {\n      // Better perfs when going fast through the slides\n      if (currentState !== state && withInstantMove) {\n        item.moveInstantly(currentState);\n      }\n      nextFrame(() => item.move(state));\n    });\n    invisibleItemsToMoveInstantly.forEach((item) => {\n      item.moveInstantly(state);\n    });\n\n    this.currentIndex = index;\n    this.$emit('goto', index);\n  }\n\n  /**\n   * Listen to the Draggable `start` event.\n   */\n  onSliderDragStart() {\n    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n    this.__distanceX = this.__initialX;\n  }\n\n  /**\n   * Listen to the Draggable `drag` event.\n   */\n  onSliderDragDrag(props:DragServiceProps) {\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n    this.getVisibleItems(this.__distanceX).forEach((item) => {\n      item.moveInstantly(this.__distanceX);\n    });\n  }\n\n  /**\n   * Listen to the Draggable `drop` event and find the new active slide.\n   */\n  onSliderDragDrop(props:DragServiceProps) {\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    let finalX = clamp(\n      inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n      0,\n      this.getStateValueByMode(this.lastState.x),\n    );\n\n    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n      Math.abs(finalX - this.getStateValueByMode(state.x)),\n    );\n    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n    if (this.$options.fitBounds) {\n      this.goTo(closestIndex, { withInstantMove: false });\n    } else {\n      if (this.$options.contain) {\n        finalX = Math.min(this.containMinState, finalX);\n        finalX = Math.max(this.containMaxState, finalX);\n      }\n      this.$children.SliderItem.forEach((item) => {\n        item.move(finalX);\n      });\n      this.currentIndex = closestIndex;\n    }\n  }\n\n  /**\n   * Enable focus.\n   */\n  onWrapperFocus() {\n    this.hasFocus = true;\n  }\n\n  /**\n   * Disable focus.\n   */\n  onWrapperBlur() {\n    this.hasFocus = false;\n  }\n\n  /**\n   * Go prev or next when focus is on the wrapper and pressing arrow keys.\n   */\n  keyed({ LEFT, RIGHT, isDown }:KeyServiceProps) {\n    if (this.hasFocus && isDown) {\n      if (LEFT) {\n        this.goPrev();\n      } else if (RIGHT) {\n        this.goNext();\n      }\n    }\n  }\n\n  /**\n   * Prepare invisible items.\n   */\n  prepareInvisibleItems() {\n    const state = this.states[this.currentIndex];\n    const nextItemsToPrepare = [];\n    const previousItemsToPrepare = [];\n\n    this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {\n      if (i > this.currentIndex) {\n        nextItemsToPrepare.push(item);\n        return;\n      }\n\n      if (i < this.currentIndex) {\n        previousItemsToPrepare.push(item);\n      }\n    });\n\n    nextItemsToPrepare.forEach((item) => {\n      const invisibleState = this.getStateWhereItemWillBeInvisible(item);\n      if (invisibleState) {\n        item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n      }\n    });\n\n    previousItemsToPrepare.forEach((item) => {\n      const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });\n      if (invisibleState) {\n        item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n      }\n    });\n  }\n\n  /**\n   * Get the state where the given item will be visible.\n   */\n  getStateWhereItemWillBeInvisible(item:SliderItem, { reversed = false } = {}):SliderState {\n    const visibleStates = this.states.filter((state) =>\n      item.willBeVisible(this.getStateValueByMode(state.x)),\n    );\n    const firstVisibleState = visibleStates[0];\n    const lastVisibleState = visibleStates.at(-1);\n    const firstVisibleStateIndex = this.states.findIndex(\n      (state) =>\n        this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x),\n    );\n    const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);\n\n    return reversed\n      ? this.states[lastVisibleStateIndex + 1]\n      : this.states[firstVisibleStateIndex - 1];\n  }\n\n  /**\n   * Get the visible slides for the given position.\n   */\n  getVisibleItems(target:number) {\n    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));\n  }\n\n  /**\n   * Get the invisible slides for the given position.\n   */\n  getInvisibleItems(target:number) {\n    return this.$children.SliderItem.filter(\n      (item) => !item.isVisible && !item.willBeVisible(target),\n    );\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/molecules/Slider/SliderBtn.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/SliderBtn.js
+// packages/ui/molecules/Slider/SliderBtn.ts
 var SliderBtn_exports = {};
 __export(SliderBtn_exports, {
-  default: () => SliderBtn
+  SliderBtn: () => SliderBtn
 });
 module.exports = __toCommonJS(SliderBtn_exports);
-var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
-var SliderBtn = class extends import_AbstractSliderChild.default {
+var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
+var SliderBtn = class extends import_AbstractSliderChild.AbstractSliderChild {
   update(index) {
     if (index === 0 && this.$options.prev || index === this.$parent.indexMax && this.$options.next) {
       this.$el.setAttribute("disabled", "");
@@ -56,3 +53,4 @@ __publicField(SliderBtn, "config", {
   }
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=SliderBtn.cjs.map

package/molecules/Slider/SliderBtn.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Slider/SliderBtn.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderBtnProps extends BaseProps {\n  $options: {\n    prev: boolean;\n    next: boolean;\n  };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderBtnProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderBtn',\n    options: {\n      prev: Boolean,\n      next: Boolean,\n    },\n  };\n\n  /**\n   * Update attributes.\n   * @param   {number} index\n   * @returns {void}\n   */\n  update(index: number) {\n    if (\n      (index === 0 && this.$options.prev) ||\n      (index === this.$parent.indexMax && this.$options.next)\n    ) {\n      this.$el.setAttribute('disabled', '');\n    } else {\n      this.$el.removeAttribute('disabled');\n    }\n  }\n\n  /**\n   * Go prev or next on click.\n   * @returns {void}\n   */\n  onClick() {\n    const { prev, next } = this.$options;\n\n    if (prev) {\n      this.$parent.goPrev();\n    } else if (next) {\n      this.$parent.goNext();\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iCAAoC;AAY7B,IAAM,YAAN,cAAyD,+CAAwC;AAAA,EAiBtG,OAAO,OAAe;AACpB,QACG,UAAU,KAAK,KAAK,SAAS,QAC7B,UAAU,KAAK,QAAQ,YAAY,KAAK,SAAS,MAClD;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;AAAA,EAMA,UAAU;AACR,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,QAAI,MAAM;AACR,WAAK,QAAQ,OAAO;AAAA,IACtB,WAAW,MAAM;AACf,WAAK,QAAQ,OAAO;AAAA,IACtB;AAAA,EACF;AACF;AArCE,cAJW,WAIJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;",
+  "names": []
+}

package/molecules/Slider/SliderBtn.d.ts

@@ -1,39 +1,28 @@
-/**
- * @typedef {SliderBtn & {
- *   $parent: import('./Slider.js').default
- * }} SliderBtnInterface
- */
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AbstractSliderChild } from './AbstractSliderChild.js';
+export interface SliderBtnProps extends BaseProps {
+    $options: {
+        prev: boolean;
+        next: boolean;
+    };
+}
 /**
  * SliderBtn class.
  */
-export default class SliderBtn extends AbstractSliderChild {
+export declare class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderBtnProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        options: {
-            prev: BooleanConstructor;
-            next: BooleanConstructor;
-        };
-    };
+    static config: BaseConfig;
     /**
      * Update attributes.
-     *
-     * @this    {SliderBtnInterface}
      * @param   {number} index
      * @returns {void}
      */
-    update(this: SliderBtnInterface, index: number): void;
+    update(index: number): void;
     /**
      * Go prev or next on click.
-     *
-     * @this    {SliderBtnInterface}
      * @returns {void}
      */
-    onClick(this: SliderBtnInterface): void;
+    onClick(): void;
 }
-export type SliderBtnInterface = SliderBtn & {
-    $parent: import('./Slider.js').default;
-};
-import AbstractSliderChild from "./AbstractSliderChild.js";

package/molecules/Slider/SliderBtn.js

@@ -1 +1,29 @@
-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};
+import { AbstractSliderChild } from "./AbstractSliderChild.js";
+class SliderBtn extends AbstractSliderChild {
+  static config = {
+    name: "SliderBtn",
+    options: {
+      prev: Boolean,
+      next: Boolean
+    }
+  };
+  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();
+    }
+  }
+}
+export {
+  SliderBtn
+};
+//# sourceMappingURL=SliderBtn.js.map

package/molecules/Slider/SliderBtn.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Slider/SliderBtn.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderBtnProps extends BaseProps {\n  $options: {\n    prev: boolean;\n    next: boolean;\n  };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderBtnProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderBtn',\n    options: {\n      prev: Boolean,\n      next: Boolean,\n    },\n  };\n\n  /**\n   * Update attributes.\n   * @param   {number} index\n   * @returns {void}\n   */\n  update(index: number) {\n    if (\n      (index === 0 && this.$options.prev) ||\n      (index === this.$parent.indexMax && this.$options.next)\n    ) {\n      this.$el.setAttribute('disabled', '');\n    } else {\n      this.$el.removeAttribute('disabled');\n    }\n  }\n\n  /**\n   * Go prev or next on click.\n   * @returns {void}\n   */\n  onClick() {\n    const { prev, next } = this.$options;\n\n    if (prev) {\n      this.$parent.goPrev();\n    } else if (next) {\n      this.$parent.goNext();\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,2BAA2B;AAY7B,MAAM,kBAAmD,oBAAwC;AAAA,EAItG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAOA,OAAO,OAAe;AACpB,QACG,UAAU,KAAK,KAAK,SAAS,QAC7B,UAAU,KAAK,QAAQ,YAAY,KAAK,SAAS,MAClD;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;AAAA,EAMA,UAAU;AACR,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,QAAI,MAAM;AACR,WAAK,QAAQ,OAAO;AAAA,IACtB,WAAW,MAAM;AACf,WAAK,QAAQ,OAAO;AAAA,IACtB;AAAA,EACF;AACF;",
+  "names": []
+}

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}`;
   }
@@ -41,3 +38,4 @@ __publicField(SliderCount, "config", {
   refs: ["current"]
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=SliderCount.cjs.map

package/molecules/Slider/SliderCount.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Slider/SliderCount.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderCountProps extends BaseProps {\n  $refs: {\n    current: HTMLElement;\n  }\n}\n\n/**\n * SliderCount class.\n */\nexport class SliderCount<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderCountProps> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'SliderCount',\n    refs: ['current'],\n  };\n\n  /**\n   * Update the current counter indicator.\n   *\n   * @param   {number} index The new active index.\n   * @returns {void}\n   */\n  update(index:number) {\n    this.$refs.current.innerHTML = `${index + 1}`;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iCAAoC;AAW7B,IAAM,cAAN,cAA2D,+CAA0C;AAAA,EAe1G,OAAO,OAAc;AACnB,SAAK,MAAM,QAAQ,YAAY,GAAG,QAAQ;AAAA,EAC5C;AACF;AAdE,cAJW,aAIJ,UAAoB;AAAA,EACzB,MAAM;AAAA,EACN,MAAM,CAAC,SAAS;AAClB;",
+  "names": []
+}

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,14 @@
-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};
+import { AbstractSliderChild } from "./AbstractSliderChild.js";
+class SliderCount extends AbstractSliderChild {
+  static config = {
+    name: "SliderCount",
+    refs: ["current"]
+  };
+  update(index) {
+    this.$refs.current.innerHTML = `${index + 1}`;
+  }
+}
+export {
+  SliderCount
+};
+//# sourceMappingURL=SliderCount.js.map

package/molecules/Slider/SliderCount.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Slider/SliderCount.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderCountProps extends BaseProps {\n  $refs: {\n    current: HTMLElement;\n  }\n}\n\n/**\n * SliderCount class.\n */\nexport class SliderCount<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderCountProps> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'SliderCount',\n    refs: ['current'],\n  };\n\n  /**\n   * Update the current counter indicator.\n   *\n   * @param   {number} index The new active index.\n   * @returns {void}\n   */\n  update(index:number) {\n    this.$refs.current.innerHTML = `${index + 1}`;\n  }\n}\n"],
+  "mappings": "AACA,SAAS,2BAA2B;AAW7B,MAAM,oBAAqD,oBAA0C;AAAA,EAI1G,OAAO,SAAoB;AAAA,IACzB,MAAM;AAAA,IACN,MAAM,CAAC,SAAS;AAAA,EAClB;AAAA,EAQA,OAAO,OAAc;AACnB,SAAK,MAAM,QAAQ,YAAY,GAAG,QAAQ;AAAA,EAC5C;AACF;",
+  "names": []
+}

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,22 +15,21 @@ 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) {
   get target() {
     return this.$refs.dots;
   }
@@ -51,3 +48,4 @@ __publicField(SliderDots, "config", {
   refs: ["dots[]"]
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=SliderDots.cjs.map

package/molecules/Slider/SliderDots.cjs.map

@@ -0,0 +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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA+B;AAC/B,iCAAoC;AAW7B,IAAM,aAAN,kBAEG,kCAAoC,8CAAmB,EAAuB;AAAA,EAatF,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;AApCE,cANW,YAMJ,UAAoB;AAAA,EACzB,MAAM;AAAA,EACN,MAAM,CAAC,QAAQ;AACjB;",
+  "names": []
+}