OneRoadDesignLibrary

Una librería de componentes reutilizables en Angular diseñada para proyectos que requieren interfaces limpias, accesibles y listas para producción.

📦 Instalación

npm install one-road-design-library

🤖 Ejemplos

import { OneRoadButtonComponent } from 'one-road-design-library';

@Component({ standalone: true, selector: 'app-button-demo', imports: [OneRoadButtonComponent], template: <one-road-button label="Guardar" color="yellow" shape="round" /> }) export class ButtonDemoComponent {}

<one-road-button-table [actions]="[ { label: 'Editar', preset: 'edit', action: (row) => editar(row) } ]" [data]="dataSource">

import { OneRoadChartComponent } from 'one-road-design-library';

@Component({ standalone: true, selector: 'app-chart-demo', imports: [OneRoadChartComponent], template: <one-road-chart [data]="chartData"></one-road-chart> }) export class ChartDemoComponent { chartData = [/* tus datos */]; }

import { FormularioComponent } from 'one-road-design-library';

@Component({ standalone: true, selector: 'app-form-demo', imports: [FormularioComponent], template: <formulario [fields]="fields" (submit)="onSubmit($event)"></formulario> }) export class FormDemoComponent { fields = [ { type: 'text', label: 'Nombre', name: 'nombre', required: true }, { type: 'date', label: 'Fecha', name: 'fecha' } ];

onSubmit(values: any) { console.log(values); } }

<one-drop-down [options]="['A', 'B']" name="seleccion">

// Para abrir el modal desde un componente import { ModalService } from 'one-road-design-library';

constructor(private modal: ModalService) { this.modal.open('infoModal'); }

<one-visor [data]="datosDelReporte">

// app.config.ts import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { loadingInterceptor } from 'one-road-design-library';

export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withInterceptors([loadingInterceptor])) ] };