# @guajiritos/user-panel

> `Guajiritos User Panel` es una librería de angular para el trabajo con la sesión de usuario de la empresa `Guajiritos S.R.L`.

Latest version **21.0.0** (published 2026-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @guajiritos/user-panel
pnpm add @guajiritos/user-panel
yarn add @guajiritos/user-panel
bun add @guajiritos/user-panel
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 21.0.0 |
| Published | 2026-05-29 |
| First published | 2023-02-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 34.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Guajiritos SRL |
| Maintainers | guajiritos |

## Links

- npm: https://www.npmjs.com/package/@guajiritos/user-panel
- npm.io page: https://npm.io/package/@guajiritos/user-panel

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) 2.6.1

## Recent versions

- 21.0.0 (latest) — 2026-05-29
- 20.0.4 — 2026-05-28
- 20.0.3 — 2026-05-28
- 20.0.2 — 2026-05-28
- 20.0.1 — 2025-09-29
- 20.0.0 — 2025-06-03
- 19.0.0 — 2025-05-26
- 18.0.3 — 2024-07-18
- 18.0.2 — 2024-07-13
- 18.0.1 — 2024-07-13
- 17.1.1 — 2024-04-01
- 17.1.0 — 2024-04-01
- 17.0.0 — 2024-02-17
- 16.0.0 — 2024-02-17
- 0.1.7 — 2023-09-05
- … 13 more at https://npm.io/package/@guajiritos/user-panel/versions

## README

# Guajiritos User Panel

`Guajiritos User Panel` es una librería de angular para el trabajo con la sesión de usuario de la empresa `Guajiritos S.R.L`.

## Instalación

Con `npm`

```sh
npm i @guajiritos/user-panel @guajiritos/services --save
```

Con `yarn`

```sh
yarn add @guajiritos/user-panel @guajiritos/services
```

Con `pnpm`

```sh
pnpm add @guajiritos/user-panel @guajiritos/services
```

Importar la dependencia en tu proyecto.

```ts
import { GuajiritosUserPanel } from '@guajiritos/user-panel';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    GuajiritosUserPanel,
    BrowserAnimationsModule,
  ]
})
```

Importar la etiqueta en el componente correspondiente.

```html
<guajiritos-user-panel></guajiritos-user-panel>
```

## Entrada

Como elementos opcionales se pueden introducir los siguientes campos:

* `user` - Corresponde al usuario autenticado en los sistemas de Guajiritos S.R.L. Puedes importar la interfaz desde @guajiritos/services.

```html
<guajiritos-user-panel [user]="'user"></guajiritos-user-panel>
```

* `options` - Corresponde a las opciones del panel de usuario. Puedes importar la interfaz desde @guajiritos/services.

```html
<guajiritos-user-panel [options]="options"></guajiritos-user-panel>
```

Las opciones de usuario se pueden encontrar en la interfaz `GuajiritosUserPanelOptions`, todos los valores son opcionales. Puedes importar la interfaz desde @guajiritos/services.

```ts
options: GuajiritosUserPanelOptions = {
  showProfile: true,
  showSecondaryLogout: false,
  color: 'primary',
  width: '100%'
};
```

La ruta de la imagen se concatena con la imagen del usuario. 

```ts
user = {
  avatar: 'guajiritos-Logo-blanco.png',
};
```

Ruta resultante 'https://www.guajiritos.com/assets/logos/banner/guajiritos-Logo-blanco.png'

* `customButtons` - Corresponde a una lista de botones customizables para el panel de usuario.

```html
<guajiritos-user-panel [customButtons]="customButtons"></guajiritos-user-panel>
```

La interfaz de botones customizables `GuajiritosUserPanelButton` define un icono de material y el texto del botón. Puedes importar la interfaz desde @guajiritos/services.

```ts
customButtons: GuajiritosUserPanelButton[] = [
  {
    id: 'MyCustomButton',
    icon: 'users',
    text: 'Usuarios'
  }
]
```

## Salida

* `onEditProfile` - Evento lanzado al hacer click en el botón `Gestiona tu perfil`.
* `onLogout` - Evento lanzado al hacer click en el botón `Cerrar la sesión`.
* `onLogoutAlternative` - Evento lanzado al hacer click en el botón `Cerrar la sesión alternativa`. Esta opción solo es visible si entre las opciones del panel está activa la opción `showSecondaryLogout`.
* `onCustomButtonClick` - Evento lanzado al hacer click en uno de los botones customizables, devuelve el botón correspondiente.

---
_Source: https://npm.io/package/@guajiritos/user-panel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._