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.
92 lines • 11 kB
JavaScript
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* 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 class JuvoLoadingComponent {
constructor() {
/** Loading message to display @default "Loading..." */
this.message = 'Loading...';
/** Size of the loading spinner @default "medium" */
this.size = 'medium';
/** Color of the spinner @default "#3b82f6" */
this.color = '#3b82f6';
/** Whether to display as overlay covering the entire screen @default true */
this.overlay = true;
/** Whether the overlay background should be transparent @default false */
this.transparent = false;
}
/**
* Gets the CSS class for the spinner size
* @returns CSS class name for the current size
*/
get sizeClass() {
return `loading-${this.size}`;
}
/**
* Gets the CSS classes for the container
* @returns Combined CSS classes for the container
*/
get containerClass() {
let classes = 'juvo-loading';
if (this.overlay)
classes += ' overlay';
if (this.transparent)
classes += ' transparent';
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: JuvoLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: JuvoLoadingComponent, isStandalone: true, selector: "juvo-loading", inputs: { message: "message", size: "size", color: "color", overlay: "overlay", transparent: "transparent" }, ngImport: i0, template: "<div [class]=\"containerClass\">\n <div class=\"loading-content\">\n <div [class]=\"sizeClass\" class=\"loading-spinner\">\n <div class=\"spinner-circle\" [style.border-top-color]=\"color\"></div>\n </div>\n <p class=\"loading-message\" *ngIf=\"message\">{{ message }}</p>\n </div>\n</div> ", styles: [".juvo-loading{display:flex;align-items:center;justify-content:center;padding:2rem}.juvo-loading.overlay{position:fixed;inset:0;background:#ffffffe6;z-index:9999}.juvo-loading.transparent{background:transparent}.loading-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.loading-spinner{display:flex;align-items:center;justify-content:center}.spinner-circle{border:3px solid #f3f4f6;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.loading-small .spinner-circle{width:1.5rem;height:1.5rem;border-width:2px}.loading-medium .spinner-circle{width:2.5rem;height:2.5rem;border-width:3px}.loading-large .spinner-circle{width:4rem;height:4rem;border-width:4px}.loading-message{margin:0;color:#6b7280;font-size:.875rem;text-align:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: JuvoLoadingComponent, decorators: [{
type: Component,
args: [{ selector: 'juvo-loading', standalone: true, imports: [CommonModule], template: "<div [class]=\"containerClass\">\n <div class=\"loading-content\">\n <div [class]=\"sizeClass\" class=\"loading-spinner\">\n <div class=\"spinner-circle\" [style.border-top-color]=\"color\"></div>\n </div>\n <p class=\"loading-message\" *ngIf=\"message\">{{ message }}</p>\n </div>\n</div> ", styles: [".juvo-loading{display:flex;align-items:center;justify-content:center;padding:2rem}.juvo-loading.overlay{position:fixed;inset:0;background:#ffffffe6;z-index:9999}.juvo-loading.transparent{background:transparent}.loading-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.loading-spinner{display:flex;align-items:center;justify-content:center}.spinner-circle{border:3px solid #f3f4f6;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.loading-small .spinner-circle{width:1.5rem;height:1.5rem;border-width:2px}.loading-medium .spinner-circle{width:2.5rem;height:2.5rem;border-width:3px}.loading-large .spinner-circle{width:4rem;height:4rem;border-width:4px}.loading-message{margin:0;color:#6b7280;font-size:.875rem;text-align:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
}], propDecorators: { message: [{
type: Input
}], size: [{
type: Input
}], color: [{
type: Input
}], overlay: [{
type: Input
}], transparent: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianV2by1sb2FkaW5nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWNvbXBvbmVudHMvc3JjL2xpYi9qdXZvLWxvYWRpbmcvanV2by1sb2FkaW5nLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWNvbXBvbmVudHMvc3JjL2xpYi9qdXZvLWxvYWRpbmcvanV2by1sb2FkaW5nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7O0FBUy9DOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBcUNHO0FBUUgsTUFBTSxPQUFPLG9CQUFvQjtJQVBqQztRQVFFLHVEQUF1RDtRQUM5QyxZQUFPLEdBQVcsWUFBWSxDQUFDO1FBRXhDLG9EQUFvRDtRQUMzQyxTQUFJLEdBQWdCLFFBQVEsQ0FBQztRQUV0Qyw4Q0FBOEM7UUFDckMsVUFBSyxHQUFXLFNBQVMsQ0FBQztRQUVuQyw2RUFBNkU7UUFDcEUsWUFBTyxHQUFZLElBQUksQ0FBQztRQUVqQywwRUFBMEU7UUFDakUsZ0JBQVcsR0FBWSxLQUFLLENBQUM7S0FvQnZDO0lBbEJDOzs7T0FHRztJQUNILElBQUksU0FBUztRQUNYLE9BQU8sV0FBVyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDaEMsQ0FBQztJQUVEOzs7T0FHRztJQUNILElBQUksY0FBYztRQUNoQixJQUFJLE9BQU8sR0FBRyxjQUFjLENBQUM7UUFDN0IsSUFBSSxJQUFJLENBQUMsT0FBTztZQUFFLE9BQU8sSUFBSSxVQUFVLENBQUM7UUFDeEMsSUFBSSxJQUFJLENBQUMsV0FBVztZQUFFLE9BQU8sSUFBSSxjQUFjLENBQUM7UUFDaEQsT0FBTyxPQUFPLENBQUM7SUFDakIsQ0FBQzsrR0FqQ1Usb0JBQW9CO21HQUFwQixvQkFBb0Isc0xDdkRqQyxvVEFPTyw2NEJENENLLFlBQVk7OzRGQUlYLG9CQUFvQjtrQkFQaEMsU0FBUzsrQkFDRSxjQUFjLGNBQ1osSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDOzhCQU1kLE9BQU87c0JBQWYsS0FBSztnQkFHRyxJQUFJO3NCQUFaLEtBQUs7Z0JBR0csS0FBSztzQkFBYixLQUFLO2dCQUdHLE9BQU87c0JBQWYsS0FBSztnQkFHRyxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuLyoqXG4gKiBMb2FkaW5nIHNpemUgb3B0aW9uc1xuICogQHR5cGUgTG9hZGluZ1NpemVcbiAqIEBzaW5jZSAyLjAuMFxuICovXG5leHBvcnQgdHlwZSBMb2FkaW5nU2l6ZSA9ICdzbWFsbCcgfCAnbWVkaXVtJyB8ICdsYXJnZSc7XG5cbi8qKlxuICogTG9hZGluZyBDb21wb25lbnRcbiAqIFxuICogQGRlc2NyaXB0aW9uXG4gKiBBIGZsZXhpYmxlIGxvYWRpbmcgaW5kaWNhdG9yIGNvbXBvbmVudCB0aGF0IGNhbiBiZSB1c2VkIGlubGluZSBvciBhcyBhbiBvdmVybGF5LlxuICogT3JpZ2luYWxseSBkZXNpZ25lZCBmb3IgYmFja29mZmljZSBhcHBsaWNhdGlvbnMgdG8gcHJvdmlkZSBjb25zaXN0ZW50IGxvYWRpbmcgc3RhdGVzLlxuICogU3VwcG9ydHMgZGlmZmVyZW50IHNpemVzLCBjdXN0b20gY29sb3JzLCBhbmQgb3ZlcmxheSBtb2Rlcy5cbiAqIFxuICogQGV4YW1wbGVcbiAqIGBgYGh0bWxcbiAqIDwhLS0gSW5saW5lIGxvYWRpbmcgLS0+XG4gKiA8anV2by1sb2FkaW5nIFxuICogICBtZXNzYWdlPVwiTG9hZGluZyBkYXRhLi4uXCIgXG4gKiAgIHNpemU9XCJtZWRpdW1cIiBcbiAqICAgW292ZXJsYXldPVwiZmFsc2VcIj5cbiAqIDwvanV2by1sb2FkaW5nPlxuICogXG4gKiA8IS0tIE92ZXJsYXkgbG9hZGluZyAtLT5cbiAqIDxqdXZvLWxvYWRpbmcgXG4gKiAgICpuZ0lmPVwiaXNMb2FkaW5nXCJcbiAqICAgbWVzc2FnZT1cIlBsZWFzZSB3YWl0Li4uXCIgXG4gKiAgIHNpemU9XCJsYXJnZVwiIFxuICogICBbb3ZlcmxheV09XCJ0cnVlXCI+XG4gKiA8L2p1dm8tbG9hZGluZz5cbiAqIFxuICogPCEtLSBDdXN0b20gc3R5bGVkIGxvYWRpbmcgLS0+XG4gKiA8anV2by1sb2FkaW5nIFxuICogICBtZXNzYWdlPVwiUHJvY2Vzc2luZy4uLlwiIFxuICogICBzaXplPVwic21hbGxcIiBcbiAqICAgY29sb3I9XCIjMTBiOTgxXCIgXG4gKiAgIFt0cmFuc3BhcmVudF09XCJ0cnVlXCI+XG4gKiA8L2p1dm8tbG9hZGluZz5cbiAqIGBgYFxuICogXG4gKiBAc2VsZWN0b3IganV2by1sb2FkaW5nXG4gKiBAc2luY2UgMi4wLjBcbiAqIEBhdXRob3IgSnV2byBSYWZhIFRlYW1cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnanV2by1sb2FkaW5nJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9qdXZvLWxvYWRpbmcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vanV2by1sb2FkaW5nLmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIEp1dm9Mb2FkaW5nQ29tcG9uZW50IHtcbiAgLyoqIExvYWRpbmcgbWVzc2FnZSB0byBkaXNwbGF5IEBkZWZhdWx0IFwiTG9hZGluZy4uLlwiICovXG4gIEBJbnB1dCgpIG1lc3NhZ2U6IHN0cmluZyA9ICdMb2FkaW5nLi4uJztcbiAgXG4gIC8qKiBTaXplIG9mIHRoZSBsb2FkaW5nIHNwaW5uZXIgQGRlZmF1bHQgXCJtZWRpdW1cIiAqL1xuICBASW5wdXQoKSBzaXplOiBMb2FkaW5nU2l6ZSA9ICdtZWRpdW0nO1xuICBcbiAgLyoqIENvbG9yIG9mIHRoZSBzcGlubmVyIEBkZWZhdWx0IFwiIzNiODJmNlwiICovXG4gIEBJbnB1dCgpIGNvbG9yOiBzdHJpbmcgPSAnIzNiODJmNic7XG4gIFxuICAvKiogV2hldGhlciB0byBkaXNwbGF5IGFzIG92ZXJsYXkgY292ZXJpbmcgdGhlIGVudGlyZSBzY3JlZW4gQGRlZmF1bHQgdHJ1ZSAqL1xuICBASW5wdXQoKSBvdmVybGF5OiBib29sZWFuID0gdHJ1ZTtcbiAgXG4gIC8qKiBXaGV0aGVyIHRoZSBvdmVybGF5IGJhY2tncm91bmQgc2hvdWxkIGJlIHRyYW5zcGFyZW50IEBkZWZhdWx0IGZhbHNlICovXG4gIEBJbnB1dCgpIHRyYW5zcGFyZW50OiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEdldHMgdGhlIENTUyBjbGFzcyBmb3IgdGhlIHNwaW5uZXIgc2l6ZVxuICAgKiBAcmV0dXJucyBDU1MgY2xhc3MgbmFtZSBmb3IgdGhlIGN1cnJlbnQgc2l6ZVxuICAgKi9cbiAgZ2V0IHNpemVDbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBgbG9hZGluZy0ke3RoaXMuc2l6ZX1gO1xuICB9XG5cbiAgLyoqXG4gICAqIEdldHMgdGhlIENTUyBjbGFzc2VzIGZvciB0aGUgY29udGFpbmVyXG4gICAqIEByZXR1cm5zIENvbWJpbmVkIENTUyBjbGFzc2VzIGZvciB0aGUgY29udGFpbmVyXG4gICAqL1xuICBnZXQgY29udGFpbmVyQ2xhc3MoKTogc3RyaW5nIHtcbiAgICBsZXQgY2xhc3NlcyA9ICdqdXZvLWxvYWRpbmcnO1xuICAgIGlmICh0aGlzLm92ZXJsYXkpIGNsYXNzZXMgKz0gJyBvdmVybGF5JztcbiAgICBpZiAodGhpcy50cmFuc3BhcmVudCkgY2xhc3NlcyArPSAnIHRyYW5zcGFyZW50JztcbiAgICByZXR1cm4gY2xhc3NlcztcbiAgfVxufSAiLCI8ZGl2IFtjbGFzc109XCJjb250YWluZXJDbGFzc1wiPlxuICA8ZGl2IGNsYXNzPVwibG9hZGluZy1jb250ZW50XCI+XG4gICAgPGRpdiBbY2xhc3NdPVwic2l6ZUNsYXNzXCIgY2xhc3M9XCJsb2FkaW5nLXNwaW5uZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJzcGlubmVyLWNpcmNsZVwiIFtzdHlsZS5ib3JkZXItdG9wLWNvbG9yXT1cImNvbG9yXCI+PC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPHAgY2xhc3M9XCJsb2FkaW5nLW1lc3NhZ2VcIiAqbmdJZj1cIm1lc3NhZ2VcIj57eyBtZXNzYWdlIH19PC9wPlxuICA8L2Rpdj5cbjwvZGl2PiAiXX0=