juvo-rafa-library
Version:
A comprehensive Angular component library featuring real-world components and validators extracted from the Juvo Rafa backoffice application. Now with improved select components and bug fixes.
70 lines (69 loc) • 2.27 kB
TypeScript
import * as i0 from "@angular/core";
/**
* Loading size options
* @type LoadingSize
* @since 2.0.0
*/
export type LoadingSize = 'small' | 'medium' | 'large';
/**
* Loading Component
*
* @description
* A flexible loading indicator component that can be used inline or as an overlay.
* Originally designed for backoffice applications to provide consistent loading states.
* Supports different sizes, custom colors, and overlay modes.
*
* @example
* ```html
* <!-- Inline loading -->
* <juvo-loading
* message="Loading data..."
* size="medium"
* [overlay]="false">
* </juvo-loading>
*
* <!-- Overlay loading -->
* <juvo-loading
* *ngIf="isLoading"
* message="Please wait..."
* size="large"
* [overlay]="true">
* </juvo-loading>
*
* <!-- Custom styled loading -->
* <juvo-loading
* message="Processing..."
* size="small"
* color="#10b981"
* [transparent]="true">
* </juvo-loading>
* ```
*
* @selector juvo-loading
* @since 2.0.0
* @author Juvo Rafa Team
*/
export declare class JuvoLoadingComponent {
/** Loading message to display @default "Loading..." */
message: string;
/** Size of the loading spinner @default "medium" */
size: LoadingSize;
/** Color of the spinner @default "#3b82f6" */
color: string;
/** Whether to display as overlay covering the entire screen @default true */
overlay: boolean;
/** Whether the overlay background should be transparent @default false */
transparent: boolean;
/**
* Gets the CSS class for the spinner size
* @returns CSS class name for the current size
*/
get sizeClass(): string;
/**
* Gets the CSS classes for the container
* @returns Combined CSS classes for the container
*/
get containerClass(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<JuvoLoadingComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<JuvoLoadingComponent, "juvo-loading", never, { "message": { "alias": "message"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "overlay": { "alias": "overlay"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; }, {}, never, never, true, never>;
}