@up_si_vale/sivale-componentes-angular

Librería de componentes Angular standalone (atoms + molecules) reutilizables por los microfrontends de Sivale.

Instalación

npm install @up_si_vale/sivale-componentes-angular

Esta librería no incluye estilos. El consumidor debe importar globalmente el design system:

// styles.scss del consumidor
@use '@up_si_vale/sivale-design-styles/scss';

Configuración de assets (opcional)

Las directivas AssetSourceDirective e IconSourceDirective necesitan saber dónde están los íconos/imágenes. Provee el token ASSET_BASE_URL en el bootstrap de tu app:

import { ApplicationConfig } from '@angular/core';
import { ASSET_BASE_URL } from '@up_si_vale/sivale-componentes-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: ASSET_BASE_URL, useValue: environment.mfAssetsUrl }
  ]
};

Componentes

Atoms

• ButtonComponent — <app-button>
• InputComponent — <app-input> (CVA, format: alphanumeric | currency | numeric)
• TextareaComponent — <app-textarea> (CVA)
• CheckboxComponent — <app-checkbox> (CVA)
• RadioComponent — <app-radio> (CVA)
• DatePickerComponent — <app-date-picker> (CVA)
• LoaderComponent — <app-loader>

Molecules

• SelectComponent — <app-select> (CVA + content projection con <app-option>)
• MultiselectComponent — <app-multiselect> (CVA)
• OptionComponent — <app-option>
• PhoneInputComponent — <app-phone-input> (composición)
• CopyInputComponent — <copy-input>
• SnackbarComponent — <app-snackbar> (consumir vía SnackbarService)

Directives

• [onlyNumber], [onlyLetters], [rfcValidator], [noLeadingSpace], [appTooltip], [assetSource], i[iconName]

Services

• SnackbarService — success() / error() / warning() / info() / show() / dismiss() / dismissAll()

Uso (ejemplo)

import { Component } from '@angular/core';
import { InputComponent, SelectComponent, OptionComponent } from '@up_si_vale/sivale-componentes-angular';

@Component({
  standalone: true,
  imports: [InputComponent, SelectComponent, OptionComponent],
  template: `
    <app-input label="Nombre" [(ngModel)]="nombre"></app-input>
    <app-select label="País" [(ngModel)]="pais">
      <app-option value="mx">México</app-option>
    </app-select>
  `
})
export class DemoComponent { nombre = ''; pais = ''; }

Build

npm run build       # genera dist/ con ng-packagr (FESM, ESM, types)