@proangular/ngx-scroll-top/types/proangular-ngx-scroll-top.d.ts

Configurable, lightweight back to top button for Angular projects.

import * as _angular_core from '@angular/core';
import { OnInit, OnDestroy } from '@angular/core';

declare class NgxScrollTopComponent implements OnInit, OnDestroy {
    /**
     * Background color of the back to top button (hex string).
     *
     * Default: `'#0D58C0'` (dark-blue)
     *
     * Example: `'#000'` or `'black'`
     *
     * Tip: Define any `'x'` css property available for `'background-color: x'`
     */
    readonly backgroundColor: _angular_core.InputSignal<string>;
    /**
     * Offset `px` from bottom of page when scrolled to bottom. For example this
     * can be used to make sure the back to top button never overlaps a footer.
     *
     * Default: `'0px'`
     *
     * Example: `'250px'` or `250` because my footer is 250px in height
     */
    readonly bottomOffset: _angular_core.InputSignal<string | number>;
    /**
     * The back to top button will not be displayed until the user scrolls to the
     * provided Y (vertical `px`) coordinate on the page.
     *
     * Default: `'420px'`
     *
     * Example: `'100px'` or `100`
     */
    readonly displayAtYPosition: _angular_core.InputSignal<string | number>;
    /**
     * The font color for the nested content within the back to top button.
     *
     * Default: `'#FFFFFF'` (white)
     *
     * Example: `'#000'` or `'black'`
     *
     * Tip: Define any `'x'` css property available for `'color: x'`
     */
    readonly fontColor: _angular_core.InputSignal<string>;
    protected get hostFontColor(): string;
    /**
     * The font size for the nested content within the back to top button.
     *
     * Default: `'16px'`
     *
     * Example: `'2rem'` or `'32px'`
     *
     * Tip: Define any `'x'` css property available for `'font-size: x'`
     */
    readonly fontSize: _angular_core.InputSignal<string>;
    protected get hostFontSize(): string;
    /**
     * Height of back to top button in string format.
     *
     * @example `'32px'` or `'2rem'`
     */
    readonly height: _angular_core.InputSignal<string>;
    protected get hostHeight(): string;
    /**
     * Position on-screen where the back to top button is displayed.
     *
     * Default: `'right'`
     */
    readonly position: _angular_core.InputSignal<"left" | "right">;
    /**
     * Width of back to top button in string format.
     *
     * @example `'32px'` or `'2rem'`
     */
    readonly width: _angular_core.InputSignal<string>;
    protected get hostWidth(): string;
    /**
     * Style the `z-index` for the back to top button as needed for correct layer
     * height adjustment. This can be useful when working with sticky headers.
     *
     * Default: `999`
     */
    readonly zIndex: _angular_core.InputSignal<number>;
    protected get hostZIndex(): number;
    /**
     * Whether button should be rendered in DOM.
     * It stays true during fade-in/fade-out, so animation runs.
     */
    protected shouldRenderButton: _angular_core.WritableSignal<boolean>;
    /**
     * State of button animation: "idle", "fading-in", "fading-out".
     */
    protected fadeState: _angular_core.WritableSignal<"idle" | "fading-in" | "fading-out">;
    /** Default padding from screen edges. */
    private readonly defaultPadding;
    /** Duration for fade-in/fade-out animations. */
    private readonly fadeDuration;
    /** Timeout reference for fade completion. */
    private fadeTimeout?;
    protected isButtonNotRendered: _angular_core.WritableSignal<boolean>;
    private isDestroyed;
    private animationFrameId?;
    protected styleBottom: string;
    protected styleLeft: string;
    protected styleRight: string;
    /** Scroll event listener */
    protected onWindowScroll(): void;
    ngOnInit(): void;
    ngOnDestroy(): void;
    /** Scroll smoothly to the top of the window. */
    scrollTop(): void;
    /** Dynamically update the button position based on scroll and offsets. */
    private updatePosition;
    /**
     * Controls when to show/hide the button and triggers CSS animation.
     * This version guarantees fade-in/fade-out animation runs using signals.
     */
    private updateButtonVisibility;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxScrollTopComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxScrollTopComponent, "ngx-scroll-top", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "bottomOffset": { "alias": "bottomOffset"; "required": false; "isSignal": true; }; "displayAtYPosition": { "alias": "displayAtYPosition"; "required": false; "isSignal": true; }; "fontColor": { "alias": "fontColor"; "required": false; "isSignal": true; }; "fontSize": { "alias": "fontSize"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

export { NgxScrollTopComponent };