ngx-skeleton-loader/index.d.ts

Make beautiful, animated loading skeletons that automatically adapt to your Angular apps

import * as _angular_core from '@angular/core';
import { InjectionToken, ModuleWithProviders } from '@angular/core';

type NgxSkeletonLoaderConfigTheme = {
    /** It enforces a combination of `fromRoot` styles with component `styles` attribute */
    extendsFromRoot?: boolean;
    [k: string]: any;
} | null;
interface NgxSkeletonLoaderConfig {
    appearance: 'circle' | 'line' | 'custom-content' | 'square' | '';
    animation: 'progress' | 'progress-dark' | 'pulse' | 'pulse-dark' | 'false' | false;
    theme: NgxSkeletonLoaderConfigTheme;
    loadingText: string;
    count: number;
    ariaLabel: string;
    size?: number | `${number}` | `${number}px` | null;
}
declare const NGX_SKELETON_LOADER_CONFIG: InjectionToken<NgxSkeletonLoaderConfig>;

/**
 * The `NgxSkeletonLoaderComponent` is a standalone Angular component that provides a skeleton
 * loader UI element.
 * It can be used to display a loading state before the actual content is available.
 * The component can be configured with various options such as the number of elements, appearance,
 * animation, and theme.
 */
declare class NgxSkeletonLoaderComponent {
    #private;
    /**
     * The `count` property is an input that determines the number of skeleton loader elements
     * to display.
     * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 1 if the config
     * is not provided.
     * The `transform: numberAttribute` option ensures that the input value is converted to a number.
     */
    readonly count: _angular_core.InputSignalWithTransform<number, unknown>;
    /**
     * The `loadingText` property is an input that determines the text to display while the content
     * is loading.
     * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 'Loading...'
     * if the config is not provided.
     */
    readonly loadingText: _angular_core.InputSignal<string>;
    /**
     * The `appearance` property is an input that determines the visual appearance of the skeleton
     * loader.
     * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 'line' if the
     * config is not provided.
     * The available appearance options are defined in the `NgxSkeletonLoaderConfig['appearance']`
     * type.
     */
    readonly appearance: _angular_core.InputSignal<"" | "circle" | "line" | "custom-content" | "square">;
    /**
     * The `animation` property is an input that determines the type of animation to apply to the
     * skeleton loader.
     * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 'progress' if
     * the config is not provided.
     * The available animation options are defined in the `NgxSkeletonLoaderConfig['animation']` type.
     */
    readonly animation: _angular_core.InputSignal<false | "progress" | "progress-dark" | "pulse" | "pulse-dark" | "false">;
    /**
     * The `ariaLabel` property is an input that determines the ARIA label to be used for the skeleton
     * loader element. This is useful for providing accessibility information to screen readers.
     * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 'loading' if the
     * config is not provided.
     */
    readonly ariaLabel: _angular_core.InputSignal<string>;
    /**
     * The `theme` property is an input that determines the theme configuration for the skeleton
     * loader.
     * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or `null` if the
     * config is not provided.
     * The theme configuration is defined by the `NgxSkeletonLoaderConfigTheme` type, which allows
     * customizing various aspects of the skeleton loader's appearance, such as colors, animation,
     * etc.
     */
    readonly theme: _angular_core.InputSignal<NgxSkeletonLoaderConfigTheme>;
    /**
     * The `size` property is an input that determines the size of the skeleton loader.
     * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or `null` if the
     * config is not provided.
     * The size can be specified as a number (in pixels) or a string (e.g., '50px', '200').
     */
    readonly size: _angular_core.InputSignal<number | `${number}` | `${number}px` | null | undefined>;
    /**
     * The `items` property is a computed property that generates an array of indices based on the
     * `count` input.
     * If the `appearance` is set to 'custom-content', the `count` is forced to 1 to ensure that the
     * skeleton loader is displayed as a single DOM node, as required by the 'custom-content'
     * appearance.
     * This computed property is used to render the appropriate number of skeleton loader elements.
     */
    readonly items: _angular_core.Signal<number[]>;
    /**
     * The `squareSize` property is a computed property that calculates the size of the skeleton
     * loader when the appearance is set to 'square'.
     * It checks the `size` input and ensures that it is a valid number or string representing a
     * valid pixel value. If the `size` is not a valid number or string, it returns `null`.
     * If the `appearance` is not 'square', it also returns `null`.
     * This computed property is used to set the width and height of the skeleton loader when it
     * is displayed as a square.
     */
    readonly squareSize: _angular_core.Signal<string | null>;
    /**
     * A computed property that returns the final theme configuration for the skeleton loader.
     * If the `extendsFromRoot` property is set in the `NgxSkeletonLoaderConfig`, the theme is merged
     * with the root theme configuration. Otherwise, the theme is returned as-is.
     * This allows the skeleton loader to inherit global theme settings while still allowing for
     * component-specific theme customization.
     */
    readonly styles: _angular_core.Signal<{
        width?: string | undefined;
        height?: string | undefined;
        extendsFromRoot?: boolean;
    }>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxSkeletonLoaderComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxSkeletonLoaderComponent, "ngx-skeleton-loader", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

declare class NgxSkeletonLoaderModule {
    static forRoot(config?: Partial<NgxSkeletonLoaderConfig>): ModuleWithProviders<NgxSkeletonLoaderModule>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxSkeletonLoaderModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgxSkeletonLoaderModule, never, [typeof NgxSkeletonLoaderComponent], [typeof NgxSkeletonLoaderComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgxSkeletonLoaderModule>;
}

declare function provideNgxSkeletonLoader(config?: Partial<NgxSkeletonLoaderConfig>): _angular_core.EnvironmentProviders;

export { NGX_SKELETON_LOADER_CONFIG, NgxSkeletonLoaderComponent, NgxSkeletonLoaderModule, provideNgxSkeletonLoader };
export type { NgxSkeletonLoaderConfig, NgxSkeletonLoaderConfigTheme };