import { OnInit, ElementRef, AfterViewInit } from '@angular/core'; /** * This directive puts a css class in a sticky element to improve usability. * To understand how it works I highly recommend to read the article that was used to made this. * Here you can understand better the architecture: * https://developers.google.com/web/updates/2017/09/sticky-headers */ export declare class StickyDirective implements OnInit, AfterViewInit { private stickyElement; /** * * It must be a top container of the sticky element and of the element that will trigger the custom class on the sticky element. * * This should be the element with the scroll * If an string is provided, it must be the ID of the element. */ scrollContainer: string | ElementRef | HTMLElement; private _scrollContainer; /** * When the sticky element bypass this element the custom class will apply. * If an string is provided, it must be the ID of the element. */ triggerOn: string | ElementRef | HTMLElement; private _triggerOn; /** * When it's on, add some styles to the sentinel element */ debugMode: boolean; private _debugMode; /** * Class to be added to the target element when becomes sticky */ classWhenSticky: string; /** * zIndex value to set to the target element */ zIndex: number; /** * Top value to set to the target element */ top: number; /** * Sentinel element created */ private sentinel; constructor(stickyElement: ElementRef); ngOnInit(): void; ngAfterViewInit(): void; /** * Transform if needed into HTMLElement a value given to be set in a property */ private setHTMLElement; /** * Make the main element sticky. * Put the necessary css to make it happen. */ private makeSticky; private setStylePropertyToElement; /** * Start listening to the scroll event on the container element */ private setObserver; /** * Add/Remove class to the target element when the sentinel element disappear/appear */ private onAppears; /** * Generates the sentinel element with the necessary styles */ private generateSentinelElement; /** * Add the sentinel element as the first child of the triggerOn element */ private putSentinel; }