import { Base } from '@studiometa/js-toolkit'; import type { BaseProps, BaseConfig, DragServiceProps, KeyServiceProps } from '@studiometa/js-toolkit'; import { SliderDrag } from './SliderDrag.js'; import { SliderItem } from './SliderItem.js'; export type SliderModes = 'left' | 'center' | 'right'; type SliderState = { x: Record; }; export interface SliderProps extends BaseProps { $refs: { wrapper: HTMLElement; }; $children: { SliderItem: SliderItem[]; SliderDrag: SliderDrag[]; }; $options: { mode: SliderModes; fitBounds: boolean; contain: boolean; sensitivity: number; dropSensitivity: number; }; } /** * Slider class. * @link https://ui.studiometa.dev/components/Slider/ * @todo a11y */ export declare class Slider extends Base { /** * Config. */ static config: BaseConfig; /** * Distance on the x axis. * @private */ __distanceX: number; /** * Initial x position. * @private */ __initialX: number; /** * Index of the current active slide. * @private */ __currentIndex: number; /** * Store all the states. */ states: SliderState[]; /** * Origins for the different modes. */ origins: Record; /** * Wether or not the wrapper is focused. */ hasFocus: boolean; /** * Get the current index. */ get currentIndex(): number; /** * Set the current index and emit the `index` event. */ set currentIndex(value: number); /** * Get the current state. */ get currentState(): SliderState; /** * Get the first state. */ get firstState(): SliderState; /** * Get the last state. */ get lastState(): SliderState; /** * Get the minimal contain state value. */ get containMinState(): number; /** * Get the maximal contain state value. */ get containMaxState(): number; /** * Get the last index. */ get indexMax(): number; /** * Get the current SliderItem */ get currentSliderItem(): SliderItem; /** * Get the states for each SliderItem. */ getStates(): SliderState[]; /** * Get an origin by mode. */ getOriginByMode(mode?: SliderModes): number; /** * Get a state value according to the given mode. */ getStateValueByMode(state: SliderState['x'], mode?: SliderModes): number; /** * Mounted hook. */ mounted(): void; /** * Resized hook. */ resized(): void; /** * Set accessibility attributes for the component */ setAccessibilityAttributes(): void; /** * Go to the next slide. */ goNext(): void; /** * Go to the previous slide. */ goPrev(): void; /** * Go to the given index. */ goTo(index: number): void; /** * Listen to the Draggable `start` event. */ onSliderDragStart(): void; /** * Listen to the Draggable `drag` event. */ onSliderDragDrag({ args: [props] }: { args: [DragServiceProps]; }): void; /** * Listen to the Draggable `drop` event and find the new active slide. */ onSliderDragDrop({ args: [props] }: { args: [DragServiceProps]; }): void; /** * Enable focus. */ onWrapperFocus(): void; /** * Disable focus. */ onWrapperBlur(): void; /** * Go prev or next when focus is on the wrapper and pressing arrow keys. */ keyed({ LEFT, RIGHT, isDown }: KeyServiceProps): void; } export {};