# @andco/sdk-script

> El botón de Andco como elemento personalizado, sin paso de build.


```html
<script type="module" src="https://unpkg.com/@andco/sdk-script/andco.js"></script>
```

El módulo registra `<andco-button>` al cargarse. No hay paso de registro ni configuración global.

## andco-button

```html
<andco-button
  client-id="tu-client-id"
  redirect-to="https://tuapp.com/"
  scopes="openid email profile"
></andco-button>
```

### Atributos

| Atributo | Qué es |
| --- | --- |
| `client-id` | el cliente OAuth. Obligatorio |
| `redirect-to` | la URL registrada de retorno. Obligatorio |
| `scopes` | separados por espacios |
| `flow` | `authorization` o `intent` |
| `locale` | etiqueta BCP 47 |
| `theme-mode` | `light`, `dark` o `system` |
| `disabled`, `busy` | estado visual |
| `endpoint-auth`, `endpoint-api`, `endpoint-widget` | para apuntar a otro entorno |

Todos son observados: cambiarlos en vivo reconfigura el botón.

### Eventos

| Evento | Cuándo |
| --- | --- |
| `andco-ready` | la superficie hospedada quedó lista |
| `andco-activate` | la persona activó el control |
| `andco-complete` | la autorización o el Intent terminaron |
| `andco-dismiss` | la persona cerró la ventana |
| `andco-error` | algo falló. El detalle lleva el error |

El prefijo `andco-` existe para que estos eventos no choquen con los de tu página.

### Propiedades

Lo que no es escalar no cabe en un atributo. Se asigna como propiedad, que es la división estándar en Web Components:

```js
document.querySelector("andco-button").authorization = {
  scopes: ["openid", "email"],
  authorizations: [{ resourceServerId: "bank", resource: "https://bank.andco.cl" }],
};
```

## andcoSessionFor

```ts
andcoSessionFor(element: AndcoButtonElement): AndcoSession | null | undefined
```

La sesión de la instancia que ese elemento usa, con los tres estados de siempre.

## andcoInstance

```ts
andcoInstance(options: Record<string, unknown>): AndcoSessionClient
```

La instancia que corresponde a una configuración, para cuando necesitas llamar a la API desde la misma página.

Varios elementos que declaran la misma configuración resuelven la misma instancia. Es deliberado: son el mismo cliente OAuth en la misma página, y varias instancias significarían varias sesiones para una sola persona.

## Cuándo no usar esto

Si tu proyecto tiene un bundler, usa `@andco/sdk` o el paquete de tu framework: tendrás tipos, los errores aparecerán al compilar y no cargarás el elemento personalizado.