@ynmstudio/utils/types/ynmstudio-utils-scrollspy.d.ts

YNM Utilities for Angular

import * as i0 from '@angular/core';
import { EventEmitter, ChangeDetectorRef, QueryList, AfterViewInit, OnDestroy, InjectionToken, ModuleWithProviders } from '@angular/core';
import * as i1 from '@ynmstudio/utils/inviewport';

/**
 * A directive used to add an `active` class to a nav item
 * when the section is in the viewport
 *
 * @example
 * ```html
 * <a snScrollSpyItem for="foo" href="#section1">Section 1</a>
 * ```
 *
 */
declare class ScrollSpyItemDirective {
    private cdRef;
    private activeClass;
    /**
     * True if the nav item is the active item in the `items` list
     * for `ScrollSpyDirective` instance
     *
     * @memberof ScrollSpyItemDirective
     */
    get getActiveClass(): string;
    /**
     * Emits when the `active` property changes
     */
    activeChange: EventEmitter<boolean>;
    private _active;
    set active(state: boolean);
    get active(): boolean;
    set snScrollSpyItemActive(data: string);
    /**
     * ID of `ScrollSpyDirective` instance
     *
     * @memberof ScrollSpyItemDirective
     */
    for: string;
    /**
     * Hash for section to link to
     *
     * @memberof ScrollSpyItemDirective
     */
    href: string;
    /**
     * If true means the section is in the viewport
     *
     * @memberof ScrollSpyItemDirective
     */
    inViewport: boolean;
    /**
     * Id of section that links navigates to
     *
     * @readonly
     * @memberof ScrollSpyItemDirective
     */
    get section(): string;
    /**
     * Creates an instance of ScrollSpyItemDirective.
     * @memberof ScrollSpyItemDirective
     */
    constructor(cdRef: ChangeDetectorRef);
    /**
     * Manually trigger change detection
     *
     * @memberof ScrollSpyItemDirective
     */
    detectChanges(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollSpyItemDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollSpyItemDirective, "[snScrollSpyItem]", never, { "snScrollSpyItemActive": { "alias": "snScrollSpyItemActive"; "required": false; }; "for": { "alias": "for"; "required": false; }; "href": { "alias": "href"; "required": false; }; }, { "activeChange": "activeChange"; }, never, never, true, never>;
}

interface Spy {
    id: string;
    items: QueryList<ScrollSpyItemDirective>;
}

/**
 * Service that stores a list of `Spy`'s and the state
 * of their nav items `inViewport` and `active` state
 *
 */
declare class ScrollSpyService {
    /**
     * List of `Spy`'s
     *
     * @memberof ScrollSpyService
     */
    spys: Spy[];
    /**
     * Stores requests to add items to spy when spy hasn't been created
     * yet. Once spy has been added then request will be made again.
     *
     * @memberof ScrollSpyService
     */
    buffer: any[];
    /**
     * Add spy to list of `spys`
     *
     * @memberof ScrollSpyService
     */
    addSpy(id: string, items: QueryList<ScrollSpyItemDirective>): void;
    /**
     * Remove spy from list of `spys`
     *
     * @memberof ScrollSpyService
     */
    removeSpy(id: string): void;
    /**
     * Set the `inViewport` status for a spy item then sets the active
     * to true for the first item in the list that has `inViewport`
     * set to true
     *
     * @memberof ScrollSpyService
     */
    setSpySectionStatus(sectionId: string, spyId: string, inViewport: boolean): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollSpyService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<ScrollSpyService>;
}

/**
 * Adds `active` class to navigation links when section is in the viewport.
 * Used in conjuction with `snScrollItem` directive which should be added
 * to anchor links in the nav
 *
 * @example
 * ```
 * <ul role="navigation" snScrollSpy id="foo">
 *  <li><a snScrollSpyItem for="foo" href="#section1">Section 1</a></li>
 *  <li><a snScrollSpyItem for="foo" href="#section2">Section 2</a></li>
 *  <li><a snScrollSpyItem for="foo" href="#section3">Section 3</a></li>
 *  <li><a snScrollSpyItem for="foo" href="#section4">Section 4</a></li>
 * </ul>
 * ```
 *
 */
declare class ScrollSpyDirective implements AfterViewInit, OnDestroy {
    private scrollSpySvc;
    /**
     * Collection of `ScrollSpyItem`. They are the list of
     * nav items.
     *
     * @memberof ScrollSpyDirective
     */
    items: QueryList<ScrollSpyItemDirective>;
    /**
     * ID of scrollSpy instance
     *
     * @memberof ScrollSpyDirective
     */
    id: string;
    /**
     * Creates an instance of ScrollSpyDirective.
     * @memberof ScrollSpyDirective
     */
    constructor(scrollSpySvc: ScrollSpyService);
    /**
     * Adds spy to list of spys in `ScrollSpyService`
     *
     * @memberof ScrollSpyDirective
     */
    ngAfterViewInit(): void;
    /**
     * Remove spy from list of spys when directive is destroyed
     *
     * @memberof ScrollSpyDirective
     */
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollSpyDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollSpyDirective, "[snScrollSpy]", never, { "id": { "alias": "id"; "required": false; }; }, {}, ["items"], never, true, never>;
}

declare const SCROLL_SPY_INTERSECTION_OBSERVER_INIT: InjectionToken<IntersectionObserverInit>;
/**
 * A component to wrap section content within that will update the
 * `ScrollSpyService` when it's in view
 *
 * @example
 * ```html
 *  <section sn-scroll-spy-section id="section1" for="foo">
 *    ...
 *  </section>
 * ```
 */
declare class ScrollSpySectionDirective {
    private scrollSpySvc;
    /**
     * Identifies the section
     *
     * @memberof ScrollSpySectionComponent
     */
    id: string;
    /**
     * Specifies which `ScrollSpy` instance to update
     *
     * @memberof ScrollSpySectionComponent
     */
    for: string;
    /**
     * Creates an instance of ScrollSpySectionComponent.
     * @memberof ScrollSpySectionComponent
     */
    constructor(scrollSpySvc: ScrollSpyService);
    /**
     * Updates `ScrollSpy` section when element enters/leaves viewport
     *
     * @memberof ScrollSpySectionComponent
     */
    onInViewportChange(inViewport: boolean): void;
    inViewportOptions: IntersectionObserverInit | null;
    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollSpySectionDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollSpySectionDirective, "[sn-scroll-spy-section]", never, { "id": { "alias": "id"; "required": false; }; "for": { "alias": "for"; "required": false; }; "inViewportOptions": { "alias": "inViewportOptions"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.InViewportDirective; inputs: {}; outputs: { "inViewportChange": "inViewportChange"; }; }]>;
}

/**
 * A simple lightweight library for Angular which automatically
 * updates links to indicate the currently active section in the viewport
 *
 */
declare class ScrollSpyModule {
    /**
     * Specify a static method for root module to ensure providers are
     * only provided once but allows the module to still be imported
     * into other modules without reproviding services.
     *
     * @memberof ScrollSpyModule
     */
    static forRoot(): ModuleWithProviders<ScrollSpyModule>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollSpyModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<ScrollSpyModule, never, [typeof i1.InViewportDirective, typeof ScrollSpySectionDirective, typeof ScrollSpyDirective, typeof ScrollSpyItemDirective], [typeof ScrollSpyDirective, typeof ScrollSpyItemDirective, typeof ScrollSpySectionDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<ScrollSpyModule>;
}

export { SCROLL_SPY_INTERSECTION_OBSERVER_INIT, ScrollSpyDirective, ScrollSpyItemDirective, ScrollSpyModule, ScrollSpySectionDirective, ScrollSpyService };
export type { Spy };