@exadel/esl/modules/esl-scrollbar/core/esl-scrollbar.d.ts

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

import { ESLBaseElement } from '../../esl-base-element/core';
/**
 * ESLScrollbar is a reusable web component that replaces the browser's default scrollbar with
 * a custom scrollbar implementation.
 *
 * @author Yuliya Adamskaya
 */
export declare class ESLScrollbar extends ESLBaseElement {
    static is: string;
    static observedAttributes: string[];
    /** Horizontal scroll orientation marker */
    horizontal: boolean;
    /** Disable continuous scroll when the mouse pressed on scrollbar */
    noContinuousScroll: boolean;
    /** Target element {@link ESLTraversingQuery} selector. Parent element by default */
    target: string;
    /** Custom class for thumb element. 'scrollbar-thumb' by default */
    thumbClass: string;
    /** Custom class for track element area. 'scrollbar-track' by default */
    trackClass: string;
    /** @readonly Dragging state marker */
    dragging: boolean;
    /** @readonly Inactive state marker */
    inactive: boolean;
    /** @readonly Indicates that the scroll is at the beginning */
    atStart: boolean;
    /** @readonly Indicates that the scroll is at the end */
    atEnd: boolean;
    protected $scrollbarThumb: HTMLElement;
    protected $scrollbarTrack: HTMLElement;
    protected _$target: HTMLElement | null;
    protected _pointerPosition: number;
    protected _initialPosition: number;
    protected _initialMousePosition: number;
    protected _deferredDrag: (e: any) => void;
    protected _deferredRefresh: () => void;
    protected _scrollTimer: number;
    protected _resizeObserver: ResizeObserver;
    protected _mutationObserver: MutationObserver;
    protected connectedCallback(): void;
    protected disconnectedCallback(): void;
    protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
    protected findTarget(): void;
    /** Target element to observe and scroll */
    get $target(): HTMLElement | null;
    set $target(content: HTMLElement | null);
    protected render(): void;
    protected bindTargetEvents(): void;
    /** Resubscribes resize observer on child elements when container content changes */
    protected updateContentObserve(recs?: MutationRecord[]): void;
    protected unbindTargetEvents(): void;
    /** @readonly Scrollable distance size value (px) */
    get scrollableSize(): number;
    /** @readonly Track size value (px) */
    get trackOffset(): number;
    /** @readonly Thumb size value (px) */
    get thumbOffset(): number;
    /** @readonly Relative thumb size value (between 0.0 and 1.0) */
    get thumbSize(): number;
    /** Relative position value (between 0.0 and 1.0) */
    get position(): number;
    set position(position: number);
    /** Normalizes position value (between 0.0 and 1.0) */
    protected normalizePosition(position: number): number;
    /** Scrolls target element to passed position */
    protected scrollTargetTo(pos: number): void;
    /** Updates thumb size and position */
    update(): void;
    /** Updates auxiliary markers */
    updateMarkers(): void;
    /** Refreshes scroll state and position */
    refresh(): void;
    /** Returns position from PointerEvent coordinates (not normalized) */
    toPosition(event: PointerEvent): number;
    /** Handles `pointerdown` event to manage thumb drag start and scroll clicks */
    protected _onPointerDown(event: PointerEvent): void;
    /** Handles a scroll click / continuous scroll*/
    protected _onPointerDownTick(first: boolean): void;
    /** Handles thumb drag start */
    protected _onThumbPointerDown(event: PointerEvent): void;
    /** Sets position on drag */
    protected _onPointerDrag(event: PointerEvent): void;
    /** `pointermove` document handler for thumb drag event. Active only if drag action is active */
    protected _onPointerMove(event: PointerEvent): void;
    /** `pointerup` / `pointercancel` short-time document handler for drag end action */
    protected _onPointerUp(event: PointerEvent): void;
    /** Body `click` short-time handler to prevent clicks event on thumb drag. Handles capture phase */
    protected _onBodyClick(event: MouseEvent): void;
    /**
     * Handler for refresh event
     * @param event - instance of 'esl:refresh' event.
     */
    protected _onRefresh(event: Event): void;
    /**
     * Handler for scroll and resize events
     * @param event - instance of 'resize' or 'scroll' event
     */
    protected _onScrollOrResize(event: Event): void;
}
declare global {
    export interface ESLLibrary {
        Scrollbar: typeof ESLScrollbar;
    }
    export interface HTMLElementTagNameMap {
        'esl-scrollbar': ESLScrollbar;
    }
}