@oece/ui

Librería de componentes UI de OECE. Componentes con API pública propia (prefijo oece) construidos sobre Angular y PrimeNG, con un preset de tema de marca y un sistema de iconos SVG propio.

Requisitos (peer dependencies)

El proyecto consumidor debe tener instalado:

• @angular/core, @angular/common, @angular/forms ^21
• @angular/cdk ^21
• primeng ^21
• @primeuix/themes ^2

Instalación

npm i @oece/ui primeng @primeuix/themes @angular/cdk

Registrar el tema

En el app.config.ts del proyecto:

import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import { OecePreset } from '@oece/ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: OecePreset,
        options: {
          cssLayer: { name: 'primeng', order: 'theme, base, primeng' }
        }
      }
    })
  ]
};

Uso

Los componentes son standalone: se importan directamente.

import { Component } from '@angular/core';
import { OeceButtonComponent, OeceChipComponent, OeceIconComponent } from '@oece/ui';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [OeceButtonComponent, OeceChipComponent, OeceIconComponent],
  template: `
    <oece-button label="Guardar" icon="check" severity="primary" (clicked)="save()" />
    <oece-chip label="Activo" tone="success" icon="check" (removed)="onRemove()" />
    <oece-icon name="search" />
  `
})
export class Demo {
  save(): void {}
  onRemove(): void {}
}

Componentes

oece-button

| Input | Tipo | Default | | --- | --- | --- | | label | string \| null | null | | icon | OeceIconName \| null | null | | iconColor | OeceButtonIconColor | 'default' | | iconPos | 'left' \| 'right' | 'left' | | severity | 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' | 'primary' | | variant | 'fill' \| 'outline' \| 'text' \| 'link' | 'fill' | | size | 'sm' \| 'md' \| 'lg' | 'md' | | type | 'button' \| 'submit' \| 'reset' | 'button' | | disabled | boolean | false | | loading | boolean | false | | fullWidth | boolean | false | | ariaLabel | string \| null | null | | tooltip | string \| null | null | | tooltipPosition | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' |

Output: clicked: MouseEvent. Si pasas icon sin label, el botón se renderiza como botón de solo icono.

oece-chip

| Input | Tipo | Default | | --- | --- | --- | | label | string \| null | null | | icon | OeceIconName \| null | null | | tone | OeceChipTone (familia de color o hex) | 'neutral' | | size | 'sm' \| 'md' \| 'lg' | 'md' | | variant | 'filled' \| 'outline' | 'filled' | | width | string \| null | '120px' | | removable | boolean | false | | clickable | boolean | false | | tooltip | string \| null | null | | tooltipPosition | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' |

Outputs: removed: void, clicked: MouseEvent. Basta con escuchar (removed) o (clicked) para que el chip sea removible/clickeable; no es necesario [removable]="true" ni [clickable]="true".

oece-icon

| Input | Tipo | Default | | --- | --- | --- | | name | OeceIconName | requerido | | size | string | '1em' | | label | string \| null | null |

El nombre del icono está tipado: el editor autocompleta los iconos disponibles.