# toClassList

> Flattens class inputs into the de-duplicated token array `classList.add()` and the CDK both require. What every `panelClass` in the kit passes through.

Source: https://ngwr.dev/reference/utils/to-class-list  
Kind: Util  
Added in v14.11

## Usage

```angular-ts
import { toClassList } from 'ngwr/utils';

toClassList('p-4 rounded-xl');            // ['p-4', 'rounded-xl']
toClassList(['btn', 'p-4 rounded'], 'x'); // ['btn', 'p-4', 'rounded', 'x']
toClassList('a', null, false, '  ', 'a'); // ['a']
```

## Why ngwr provides this

Splitting on whitespace is the point of it. The CDK applies an overlay's `panelClass` with `classList.add()` and never splits a string, so a single `'p-4 rounded-xl'` reaches `add('p-4 rounded-xl')` and throws `InvalidCharacterError` — taking the overlay down with it. Which is the first form anyone writing utility classes reaches for. It is exported because the same rule applies to any class list you build yourself.

```angular-ts
// The CDK hands panelClass to classList.add() without splitting it:
//   coerceArray('p-4 rounded')  →  ['p-4 rounded']
//   classList.add('p-4 rounded')  →  InvalidCharacterError
//
// So every ngwr overlay routes its classes through this first.
panelClass: toClassList('wr-select-overlay', asSheet && 'wr-overlay-sheet', this.panelClass());
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `toClassList` | Flattens class inputs into a de-duplicated token array, splitting on whitespace. Accepts false so a call site can inline a condition; skips null, undefined and empty tokens. | `(...values: readonly (WrClassInput \| false)[]) => string[]` | `—` |