Function: mergeCssClasses()

mergeCssClasses(...sources): SubscribableSet<string> & Subscription

Defined in: src/sdk/components/FSComponent.ts:1559

Merges CSS classes from zero or more sources into a single set of CSS classes. Any class that is included in at least one source will be added to the merged set. If a one or more sources define dynamic sets of classes that change over time, then changes in these sources will be reflected in the merged set as long as the merged set is resumed.

Parameters

Parameter	Type	Description
...sources	(ClassProp | undefined)[]	Sources of CSS classes to merge. Up to 32 sources are supported. The order of sources passed to this function does not matter.

Returns

SubscribableSet<string> & Subscription

A set that contains all CSS classes from the specified sources. The merged set is returned in a resumed state. Pausing the merged set will stop changes in the sources from being forwarded to the merged set until it is resumed again. Destroying the merged set will permanently stop changes in the sources from being forwarded to the merged set.

Throws

Error if more than 32 sources are specified.

Examples

Merging classes:

const merged = FSComponent.mergeCssClasses(
  SetSubject.create(['class-1', 'class-2']),
  { 'class-2': false, 'class-3': false, 'class-4': true },
  'class-3 class-5'
);
// merged now contains: 'class-1', 'class-2', 'class-3', 'class-4', 'class-5'

Merging dynamic classes:

const source1 = SetSubject.create<string>();
const source2 = {
  'class-2': Subject.create(false),
  'class-3': Subject.create(false),
  'class-4': Subject.create(false),
};
const source3 = Subject.create('class-3');

const merged = FSComponent.mergeCssClasses(
  source1,
  source2,
  source3
);
// merged now contains: 'class-3'

source1.add('class-1');
source1.add('class-2');
// merged now contains: 'class-1', 'class-2', 'class-3'

source2['class-2'].set(true);
source2['class-4'].set(true);
// merged now contains: 'class-1', 'class-2', 'class-3', 'class-4'

source1.clear();
// merged now contains: 'class-2', 'class-3', 'class-4'

source3.set('class-5 class-6');
// merged now contains: 'class-2', 'class-4', 'class-5', 'class-6'