UtilAdded in v14.11

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.

Usage

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.

// 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

NameDescriptionTypeDefault
toClassListFlattens 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[]—