@kaufmann-lab/ui

Librería de componentes Angular compartida para los frontends de Kaufmann. La consumen Portal LATAM, Portal OTD y Portal Star — incluida la app móvil Ionic, que por debajo sigue siendo Angular.

Nota sobre este README: por ahora solo documenta <kf-button> en detalle. La librería ya tiene muchos más componentes (Input, Checkbox, Select, Modal, Card, Tabs, Toast, y otros) — para verlos, mirá el código fuente en projects/ui/src/lib/ en el repositorio hasta que esta tabla se complete. Ver también el CHANGELOG para el detalle de qué cambió en cada versión publicada.

Requisitos

Angular 22 y TypeScript ~6.0.3. Angular es una peerDependency, así que la librería usa la versión de Angular que ya tenga instalada la aplicación anfitriona. Todos los consumidores deben estar en el mismo major de Angular.

Instalación

pnpm add @kaufmann-lab/ui

Uso

Todos los componentes son standalone — no hay ningún módulo para importar. Agregá el componente a los imports de quien lo use:

import { Component } from '@angular/core';
import { Button } from '@kaufmann-lab/ui';

@Component({
  selector: 'app-customers',
  imports: [Button],
  template: `<kf-button (click)="save()">Guardar</kf-button>`,
})
export class Customers {}

Los estilos viajan compilados dentro de cada componente con view encapsulation. No hay nada para importar en angular.json, ni ninguna hoja de estilos global para conectar.

Componentes

<kf-button>

Envuelve un <button> nativo, así que el manejo de teclado, el foco y el envío de formularios funcionan como se espera. (click) burbujea desde el botón interno — bindealo en el host.

| Input | Tipo | Default | Notas | | ---------- | --------------------------------- | ----------- | --------------------------------------------------- | | variant | 'primary' \| 'ghost' | 'primary' | | | disabled | boolean | false | El atributo suelto funciona: <kf-button disabled> | | type | 'button' \| 'submit' \| 'reset' | 'submit' | Coincide con el default nativo |

<kf-button (click)="save()">Guardar</kf-button>
<kf-button variant="ghost">Cancelar</kf-button>
<kf-button type="button" disabled>No disponible</kf-button>

El theming se hace mediante una custom property de CSS en el host:

kf-button {
  --kf-button-accent: #00693e;
}