ngxsmk-skeleton-loader/index.d.ts

Angular 17+ standalone skeleton loader (component + directive, SCSS, shimmer/pulse/wave)

import * as i0 from '@angular/core';
import { TemplateRef, ViewContainerRef } from '@angular/core';

/**
 * ngxsmk-skeleton — Standalone skeleton component.
 * Usage:
 * <ngxsmk-skeleton type="text" width="80%"></ngxsmk-skeleton>
 * <ngxsmk-skeleton type="circle" size="48"></ngxsmk-skeleton>
 */
declare class NgxSmkSkeletonComponent {
    /** visual preset */
    type: 'text' | 'rect' | 'circle' | 'avatar' | 'button' | 'image';
    /** width: accepts px/%, number treated as px */
    width?: string | number;
    /** height: accepts px/%, number treated as px */
    height?: string | number;
    /** size shortcut (applies to width & height if provided) */
    size?: string | number;
    /** border radius (e.g. 8, '8px', '9999px') */
    radius?: string | number;
    /** animation style */
    animate: 'shimmer' | 'pulse' | 'wave' | 'none';
    /** base color & highlight overrides via CSS vars, but a fallback tint can be set */
    tint?: string;
    baseClass: boolean;
    get isRect(): boolean;
    get isText(): boolean;
    get isCircle(): boolean;
    get cShimmer(): boolean;
    get cPulse(): boolean;
    get cWave(): boolean;
    role: string;
    aria: string;
    get styleMap(): string;
    private unit;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSmkSkeletonComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgxSmkSkeletonComponent, "ngxsmk-skeleton", never, { "type": { "alias": "type"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "size": { "alias": "size"; "required": false; }; "radius": { "alias": "radius"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "tint": { "alias": "tint"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * *ngxsmkSkeleton — structural directive to toggle a skeleton placeholder
 *
 * Example:
 * <ng-container *ngxsmkSkeleton="loading; type: 'text'; width: '80%'"></ng-container>
 */
declare class NgxSmkSkeletonDirective {
    private readonly tpl;
    private readonly vcr;
    set loading(v: boolean);
    type: 'text' | 'rect' | 'circle' | 'avatar' | 'button' | 'image';
    width?: string | number;
    height?: string | number;
    size?: string | number;
    radius?: string | number;
    animate: 'shimmer' | 'pulse' | 'wave' | 'none';
    private _loading;
    private skeletonEl?;
    constructor(tpl: TemplateRef<unknown>, vcr: ViewContainerRef);
    private updateView;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSmkSkeletonDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxSmkSkeletonDirective, "[ngxsmkSkeleton]", never, { "loading": { "alias": "ngxsmkSkeleton"; "required": false; }; "type": { "alias": "ngxsmkSkeletonType"; "required": false; }; "width": { "alias": "ngxsmkSkeletonWidth"; "required": false; }; "height": { "alias": "ngxsmkSkeletonHeight"; "required": false; }; "size": { "alias": "ngxsmkSkeletonSize"; "required": false; }; "radius": { "alias": "ngxsmkSkeletonRadius"; "required": false; }; "animate": { "alias": "ngxsmkSkeletonAnimate"; "required": false; }; }, {}, never, never, true, never>;
}

export { NgxSmkSkeletonComponent, NgxSmkSkeletonDirective };