@exadel/esl/modules/esl-anchornav/core/esl-anchornav.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';
import type { DelegatedEvent, ESLIntersectionEvent } from '../../esl-event-listener/core';
/** {@link ESLAnchornav} item renderer */
export type ESLAnchornavRender = (data: ESLAnchorData, index: number, anchornav: ESLAnchornav) => string | Element;
/** {@link ESLAnchornav} anchor data interface */
export interface ESLAnchorData {
    id: string;
    title: string;
    $anchor: HTMLElement;
}
/**
 * ESLAnchornav
 * @author Dmytro Shovchko
 *
 * ESLAnchornav is a component that collects content anchors from the page and provides anchor navigation
 */
export declare class ESLAnchornav extends ESLBaseElement {
    static is: string;
    static _renderers: Map<string, ESLAnchornavRender>;
    /** Gets renderer by name */
    static getRenderer(name: string): ESLAnchornavRender | undefined;
    /** Sets renderer */
    static setRenderer(renderer: ESLAnchornavRender): void;
    static setRenderer(name: string, renderer: ESLAnchornavRender): void;
    ACTIVECHANGED_EVENT: string;
    UPDATED_EVENT: string;
    protected ANCHOR_SELECTOR: string;
    protected INTERSECTION_THRESHOLD: number[];
    /** Item renderer which is used to build inner markup */
    rendererName: string;
    /** CSS classes to set on active item */
    activeClass: string;
    protected _active: ESLAnchorData;
    protected _anchors: ESLAnchorData[];
    protected _items: Map<string, Element>;
    protected _offset: number;
    /** Active anchor */
    get active(): ESLAnchorData;
    set active(value: ESLAnchorData);
    /** Anchors list */
    protected get $anchors(): HTMLElement[];
    /** Anchornav offset */
    get offset(): number;
    set offset(value: number);
    /** Anchornav items container */
    protected get $itemsArea(): HTMLElement;
    /** Anchornav viewport (root element for IntersectionObservers checking visibility) */
    protected get $viewport(): Element | undefined;
    /** Permanent anchors to prepend to the list */
    protected get anchorsToPrepend(): ESLAnchorData[];
    /** Permanent anchors to append to the list */
    protected get anchorsToAppend(): ESLAnchorData[];
    protected connectedCallback(): void;
    /** Updates the component */
    update(): void;
    /** Builds the component anchors list markup */
    protected rerender(): void;
    /** Converts html string to Element */
    protected htmlToElement(html: string): Element;
    /** Renders the component anchors list */
    protected renderAnchors(): Element[];
    /** Gets anchor data from the anchor element */
    protected getDataFrom($anchor: HTMLElement, index: number): ESLAnchorData;
    /** Gets initial active anchor */
    protected getInitialActive(): ESLAnchorData;
    /** Updates the active anchor */
    protected updateActiveAnchor(): void;
    /** Handles changing the active anchor */
    protected _onActiveChange(): void;
    /** Handles updating the component */
    protected _onUpdateEvent(): void;
    protected _onAnchornavRequest(): void;
    protected _onAnchorIntersection(e: ESLIntersectionEvent): void;
    protected _onAnchorClick(event: DelegatedEvent<MouseEvent>): void;
}
declare global {
    export interface ESLLibrary {
        Anchornav: typeof ESLAnchornav;
    }
    export interface HTMLElementTagNameMap {
        'esl-anchornav': ESLAnchornav;
    }
}