ngx-skeleton-loader
Version:
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
81 lines (80 loc) • 4.96 kB
TypeScript
import { NgxSkeletonLoaderConfigTheme } from './ngx-skeleton-loader-config.types';
import * as i0 from "@angular/core";
/**
* 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.
*/
export 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: import("@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: import("@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: import("@angular/core").InputSignal<"" | "circle" | "line" | "custom-content">;
/**
* 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: import("@angular/core").InputSignal<false | "progress" | "progress-dark" | "pulse" | "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: import("@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: import("@angular/core").InputSignal<NgxSkeletonLoaderConfigTheme>;
/**
* 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: import("@angular/core").Signal<number[]>;
/**
* 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: import("@angular/core").Signal<NgxSkeletonLoaderConfigTheme>;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxSkeletonLoaderComponent, never>;
static ɵcmp: i0.ɵɵ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; }; }, {}, never, ["*"], true, never>;
}